CSS order for text-formatting

Does it matter?

[Purple Martin]

Does it matter what order text-formatting stuff is used in CSS? For example, does the order below need reshuffling, or is any order OK?

.foo {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 1.2em;
font-style : italic;
font-weight : bold;
text-decoration : underline;
text-align : right;
}

[starway]

There's absolutely no any difference in what order do you write CSS properties in styles.
I just want to tell about another - reduced length - type of records:

.foo {
font: italic bold 1.2em Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration : underline;
text-align : right;
}

This is exactly the same as the one you posted. It can be useful for reducing styles file size, and to make it look more compact.
But here order matters! It should be this:

font: <font-style> <font-weight> <font-size> <font-family>

If you do it this way exactly, it will work in all browsers (including old NN4).

[Purple Martin]

Aaah! Thankyou, I knew I'd heard something about order but couldn't remember exactly what it was. Thanks very much, that's cleared it up.

As for the reduced length version, my styles are built on-the-fly according to the user's choices, so I'll stick with the longer way as it's less complex to build code for. :)

[dingman]

Martin, how are you going about building the users' styles? I've been thinking about adding such a feature to a site I'm working on, but I don't want to throw away the benefits of having the browser cache the CSS. Are you writing a static page from the script and linking that, so that has-it-chenged requests get the right answer? sending a header to specify to the browser that it's cacheable? Not worrying about it?

[Purple Martin]

dingman - users can change the style of the document text with a select menu (this is part of an on-line application, so don't worry if it's not clear why I'd want to do this). Anyway, it's done with JavaScript by using the removeRule and addRule methods (the app is for a closed IE5 environment :) ) to replace styles in the styleSheet object. It's actually quite fun watching the whole page change when the select menu has the focus and you use the mouse scroll-wheel to cycle through the style options!

[Nick_W]

I have this vague recollection of font-family being the last thing you should call. Only on one line declarations though.

Anyone know what I'm babbling about?

Nick

[bruhaha]

starway wrote:

But here order matters! It should be this:

font: <font-style> <font-weight> <font-size> <font-family>

Neither here nor there, and what you list is how I do it, but I've seen the order of the first two reversed in some lists, and it works just the same.

Also, a couple of other properties can be included in this one. A fuller list would be:

<font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>

Finally, only the last two are strictly required, which might occasionally save you some typing.

[starway]

Neither here nor there, and what you list is how I do it, but I've seen the order of the first two reversed in some lists, and it works just the same.

Did you test it in all browsers? I guess you didn't.

[bruhaha]

Did you test it in all browsers? I guess you didn't.

I don't believe I've tested the "alternate order" in all the browsers. I didn't see any need to since I have always used the "standard order" you listed (which I did test) without incident.

But when I refer to "lists" I'm speaking of how reference tools state it. I just checked to see if I was just misremembering --Web Design in a Nutshell, p.403 and she (at least the first edition) includes the 'alternate' order, reversing the order of the first two values. It is a bit odd though since she lists it in the standard order at the beginning of the entry, then introduces the alternate order with "must be listed as follows"? A typo maybe?

I will confess, however, that you've made me curious. I'm assuming from your remarks that you have tested the alternate order, and it didn't always work. In my quick tests of current browsers (Netscape 4.74 and 6.2, IE 6.0 and Opera 6.05) both orders displayed the same. So, how far back do I have to go to encounter problems? or is there a problem with some Mac browser version (I have to go out of my way to run tests for Mac's --and don't need to much for those who use our sites)? or. . .?