CSS quotes and the content property

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.

Using variables in CSS

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.

Styling HTML elements in CSS without using classes / IDs

Something I came across for the first time recently is the practice of using HTML element attributes to apply CSS styles.

The mathematics can be found at http://www.w3.org/TR/CSS2/selector.html#attribute-selectors, but a basic example of where I use this technique is as follows…

starting with a basic form…

Demo Form



To lay the form out cleanly we might apply a few simple CSS styles to the input elements, as follows…

[css]
input {
display:block;
width:200px;
border:1px solid #CCC;
background-color:#FFF;
font: normal 12px/12px arial,sans-serif;
padding:0.5em;
}
[/css]

giving us the following…

Demo Form



All well and good, but the submit button is a little kooky because, being an input element, it picks up all the styling rules that we just applied. It’s easy to fix this by applying a few extra CSS styles to the submit button specifically – changing the background color, maybe a rollover effect, stuff like that – and I’ve generally done this by creating a new class specifically for the styling of form buttons .

While this works perfectly well, adding class=”button” to our HTML is completely unnecesary, because we can isolate all submit buttons via CSS attributes. The syntax follows the pattern…

[css]
element[attribute=value]{
css rules
}
[/css]

…and could work in the following manner:

[css]
input[type=submit] {
background-color:#039;
border-color: #000;
cursor:pointer;
color:#FFF;
width:auto;
margin:0.5em;
}
[/css]

giving us the following:

Demo Form



This can be used to isolate any HTML element you like – all forms with the method=”post” or all anchor tags with target=”_self” – anything really.

In fact now I type this out it occurs to me that the CSS selectors ‘.’ and ‘#’ (class and ID respectively) are just shorthand for the CSS attribute selectors element[class~=value] and element[id~=value] – more on the ‘~’ operator in another post.

The attribute selectors are a lot more powerful than demonstrated here, and I’ll write a bit about them soon but for the meantime you can read up for yourself at http://www.w3.org/TR/CSS2/selector.html#attribute-selectors.

Safe.
Neil