CSS quotes and the content property

CSS, Web Dev

If there’s one thing I enjoy more than learning new stuff, it is learning new stuff about something that I thought I had boxed off already. The CSS2 ‘quotes’ property pretty much fits that bill.

Here’s the rub if (like me) this is a property that you’re unfamiliar with:

Major browsers will prepend and append quotation marks to the `<q>` element via the CSS ::before and ::after pseudo-elements. This is pre-programmed into the user-agent style sheet, and a quick inspection via Firebug or whichever dev tools you prefer will reveal the following…

[css]
q::before {
content:open-quote;
}
q::after {
content:close-quote;
}
[/css]

I frequently use the ::before and ::after pseudo-elements to help keep my HTML light when marking up some of the more elaborate designs that are passed my way, normally using ASCII or text strings in the content property. This is the first time (as far as I can recall) that I’ve come across the use of what is essentially a predefined variable within the CSS language. The variable itself is pre-defined by the user-agent (you’ll notice that Firefox uses slightly different ‘open-quote’ and ‘close-quote’ symbols to Safari / Chrome.

Should you wish to override the browser default, you can do so either by changing the ‘content’ property of each individual ::before and ::after declaration, or you can use the ‘quotes’ property of the ‘parent’ (? I’m not sure that this is the correct term ?) element.

The quotes property

The specification for the quotes property goes into great detail on how this may be used to employ different symbols across different languages or different levels of nested quotes, but the basic use would be to declare the ‘open-quote’ value and the ‘close-quote’ value, separated by spaces, as the value of the ‘quotes’ property as follows:

[css]
q {
quotes: ‘“’ ‘”’;
}
[/css]

Whichever values you define will be used in place of the User-Agent defined symbols throughout your document.

Taking it a little further

This technique does not only have to be applied to <q> elements. It appears that any element can take a ‘quotes’ property, which can subsequently be called in its own ::before or ::after pseudo-elements.

For example, consider the following, using CSS3 attribute selectors :

[css]
[cite^="http://blog.neilpie.co.uk"]{
quotes: ‘As I have said on my weblog: “’ ‘”’;
}
[cite^="http://blog.neilpie.co.uk"]::before {
content: open-quote;
}
[/css]

What we are doing here is prepending any element with the ‘cite’ attribute starting with ‘http://blog.neilpie.co.uk’ – i.e. anything that cites this blog as its source – with an ‘open-quote’ value of ‘As I have said on my weblog: “’.

By writing this CSS rule without an element selector, it automatically applies to any element with a matching ‘cite’ attribute – so will also include <blockquote> elements. If we only wanted to match q elements, then we likely wouldn’t need the ::before declaration, because this would already be defined in the user-agent style sheet. Do note that while the ‘cite’ attribute is only valid on a <q> or <blockquote> element, the CSS rules here would also apply to any other element matching the rule.

Taking it a little too far?

It occurs to me that being able to predefine these ::before and ::after content strings could be used outside of the context of quotes, and leant on for use in some elaborate CSS, enabling an element of DRY programming in CSS. The problem is that it feels just a little bit dirty to me to do so at this point. I intend to explore the ‘content’ property further before drawing any conclusions, as there are other possible values that it can take outside of ‘open-quote’, ‘close-quote’ and strings – including the intriguing ‘attr(X)’ – any of which could turn out to be extremely useful to this end.

Rebooting

Journal

I’m perfectly happy to accept that I’m not much of a writer. I’m also perfectly happy to accept that auto-feeding all my Twitter status updates into my blog was probably a bad idea and the reason that I stopped updating it.

Rewind a second… Who am I trying to kid there? the reason that I stopped updating is because I didn’t have the time any more. Work became super-busy (which is nice) and Laura-Jane severely injured her back (which isn’t nice) leaving me pretty much on sole parenting duty for a few months over the summer. Anything that didn’t involve a two-year old or earning money to pay the bills pretty much went on hold. Networking, studying, the podcast, the videos, exercise, socialising – everything.

That’s not really the issue. Now Laura’s back is almost better, the problem is that I am still keeping everything else on hold. I find myself working whenever possible out of habit more than anything else, telling myself that everything else will have to wait until I don’t have any work to do.

Here’s the rub – I’m a freelancer. If I don’t have any work to do then that’s a pretty serious problem. To put it in context; I keep a running to do list, the last item of which is ‘get a job or sign on’ – this keeps it clear in my mind that being busy and having lots on is not just a good thing, but the permanent state that I should be aiming for. Therefore it follows that I just have to make the time for all the other stuff that I want / need to be doing. Either that or rule it out altogether.

I make time for my son. I can do that. The phone goes off, the inbox builds up and we play or go swimming or read stories or any number of other things. I need to make time the same to study. To exercise. To write. To record. I can do that too.

So this is me, making the mental decision to do so on the side of Christmas where it actually means something. I look forward to still being here in 12 months…

Hello world!

Uncategorized

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Office Skiffle & The Effervescing Elephant

Journal

Yet another video blog that has absolutely nothing to do with web programming.

I hope you enjoy it and actively encourage you to get involved in the office skiffle movement. I’m not sure if there’s anybody in the office skiffle movement other than me at the moment, but we’re definitely changing the musical landscape.

Instruments featuring in this video are:

  • Recycling Bin Bass
  • Keyboard Washboard
  • Stapler
  • 30cm Ruler
  • Rotary Pencil Sharpener
  • The ubiquitous Flying-V Ukulele

Safe.

Using variables in CSS

CSS, PHP, Web Dev

I’m working on a little PHP script to allow for variables and inheritance in CSS. I know there’s a ruby script that does this somewhere, but I fancy seeing if we can’t get a pure PHP version up & running between us. If you’re somebody that writes their own CSS and are willing to have a play with it to see what problems occur then I’d really appreciate it. If you want to tighten up my regular expressions a bit as well then it probably won’t go amiss, as I’ve only spent 5 minutes on them so far 😉

It’s fairly straightforward, and at the moment just runs some simple find & replace on a stylesheet, nothing too fancy, and it seems to hold it’s own on my dev server, but I’d be interested to see if it works in the hands of others. I don’t have much spare time but will be adding attribute inheritance next – which could be very cool.

you can grab the PHP here, and implement it by saving it as PCSS.php (or whatever you choose) and then linking to your stylesheet as follows:

[html]
css" media="screen" rel="stylesheet" />
[/html]

In case that isn’t clear – instead of linking to your stylesheet within the tag, you link to my PHP file and then tag a ‘?’ and the filename of your stylesheet onto the end.

once running you can declare variables in your stylesheet ‘thusly’, ensuring each begins with a $ and ends with a  line-break:

[css]
/*
$pie_blue = #443300
$pie_border = 1px solid #CCC
$pie_padding = 1em
*/

.class {
color: $pie_blue;
border: $pie_border;
}
[/css]

and so on…

Again, if anybody does pick this up and play with it, I really appreciate the time and help.

Welcome to my Video Blog

Journal

I’ve been meaning to get on these for a while now. I intend to cover some real basic PHP introduction stuff, maybe some dev app guides and so on. Obviously, the common WordPress hacks that people ask me to do.

For now though here’s me just saying ‘hello’ and introducing you to my hamster, Joe Namath.