homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Order of elements in CSS
Does it matter?

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4523903 posted 4:19 pm on Nov 30, 2012 (gmt 0)

My CSS file makes two calls for graphic files.

1) One is for a background gradient (just a colored background across the top portion of the page) that's called in the BODY element.

2) The other is for an image sprite. It includes a page-top header graphic and buttons and decorations for the page layout.

I was under the impression that (at least) some browsers can only download so may files from a single server at a time.

I would much rather that the image sprite be downloaded first, so the header graphic gets shown ASAP.

If there's a lag in showing the background color gradient, that doesn't bother me much.

To implement this, I'm assuming that calling the image sprite first in the CSS file is a help (Although I can't really say that my visual testing of page loading confirms this).

Am I right with my thinking, or some how mistaken?

And also, is it OK to NOT place the BODY element first in a CSS file? (When I test this format everything seems to work ok.)




WebmasterWorld Senior Member 5+ Year Member

Msg#: 4523903 posted 7:29 pm on Nov 30, 2012 (gmt 0)

Yes, multiple downloads occur at one time but the number is restricted to 4 or 6 at once.

It doesn't matter where you put the body property in a CSS file because nothing happens until the browser downloads and evaluate everything in that file.

Downloads start when the src path is read by the browser assuming it can start one right away.


WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4523903 posted 7:38 pm on Nov 30, 2012 (gmt 0)


Order of statements in CSS is only significant when one rule potentially overwrites another. So within any given element, go from most general to most specific.

The body doesn't have to come first. But your page is not going to start rendering before the whole CSS has loaded, so it only makes sense to put things where you can find them later.

There are page-speed-testing utilities that show in excruciating detail what gets loaded when, and how long it takes.

:: shuffling papers ::

Here's one [webpagetest.org] that I've met recently. (The next passing moderator may swap out this link for something higher up the Authorized List. I found it on web-pages-that-you-know-what dot com.)


WebmasterWorld Senior Member

Msg#: 4523903 posted 8:22 pm on Nov 30, 2012 (gmt 0)

Whether or not it actually makes a difference I don't know. But in my obsessive compulsive quest for speed and efficiency I always list the css in the order that they appear on the page. And I take it a step further by ordering the attribute names in alphabetical order. I'm not sure why I do it, really! But recursion comes to mind, I just wouldn't know how to test for it.

It all works for me. Last site launched now has my all-encompassing knowledge of what constitutes good design principles and it is (according to GWT) loading in an average of 123 thousands of a sec, with lowest at 82. The other sites on the same server are around 300 without having been fussed about as much.

Yes, multiple downloads occur at one time but the number is restricted to 4 or 6 at once.

I think that standard has been bumped up in most browsers. I think it's currently at 12 in FireFox, not sure about IE or others. It used to be 2 way back. But even then, and now, I assign my browsers a higher value.

In IE you can add a new registry key call MaxConnectionsPerServer and bump the default up to say, oh, 25 isn't being too demanding (depending on your ISP connection type). In FireFox you can edit it by typing about:config in address bar then search for network.http.max-connections-per-server -- bump it from default of 12(?) to something like 25.

Don't over do it or you risk suffering the wrath of webmasters by hogging the queue, they might ban you!

It helps speed up your surfing :)

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