Welcome to WebmasterWorld Guest from 54.234.38.8

Forum Moderators: not2easy

Message Too Old, No Replies

CSS order for text-formatting

Does it matter?

     
2:04 am on Oct 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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;
}
7:19 am on Oct 17, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:June 20, 2002
posts:115
votes: 0


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).

8:50 am on Oct 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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. :)

2:48 pm on Oct 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 12, 2002
posts:885
votes: 0


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?
10:34 pm on Oct 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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!
10:46 pm on Oct 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


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

7:28 pm on Oct 18, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Dec 10, 2001
posts:254
votes: 0


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.

5:30 pm on Oct 19, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:June 20, 2002
posts:115
votes: 0


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.
3:53 pm on Oct 21, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Dec 10, 2001
posts:254
votes: 0


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. . .?