homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS order for text-formatting
Does it matter?
Purple Martin




msg:1212020
 2:04 am on Oct 17, 2002 (gmt 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;
}

 

starway




msg:1212021
 7:19 am on Oct 17, 2002 (gmt 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).

Purple Martin




msg:1212022
 8:50 am on Oct 17, 2002 (gmt 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. :)

dingman




msg:1212023
 2:48 pm on Oct 17, 2002 (gmt 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?

Purple Martin




msg:1212024
 10:34 pm on Oct 17, 2002 (gmt 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!

Nick_W




msg:1212025
 10:46 pm on Oct 17, 2002 (gmt 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

bruhaha




msg:1212026
 7:28 pm on Oct 18, 2002 (gmt 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.

starway




msg:1212027
 5:30 pm on Oct 19, 2002 (gmt 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.

bruhaha




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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved