Published in CSS on Thursday, June 17th, 2004
Some obeservations about how different browsers request CSS files and the images within them.
As alluded to in a previous entry, some interesting yet, quite possibly trivial observations were noted while testing the caching behavior of CSS files in Opera 7.50, Firefox 0.9, and Internet Explorer 6.0.
So with no further ado, on to the facts...
Part of the cache testing done while trying the different CSS Gzipping methods involved some up close examination of the server logs of one of our Apache 2.0 test servers. In this case Apache is installed on a box running windows XP.
To sumarize, it was found that if multiple CSS files were linked in an (x)html document (or a CSS file), the different browsers would treat requests for the CSS files themselves and the images referred within those CSS files differently.
Having read somewhere (that adds credibility, eh?) that browsers won't begin to paint a page until they have the complete CSS file (FOUC being an exception), these observations, while there's nothing we can do about it except perhaps optimize our CSS, are relevant to our work are interesting nonetheless.
Although sometimes requests for the favicon would get in the way, Firefox consistently asked for CSS first, no matter how many files were linked (including files linked via @import within other CSS files), no matter the linking method used (@import vs <link>).
Background images referred to by the CSS files were intermingled with other file requests, for example source files referred to by <img /> elements used in (x)html markup.
Opera, known for it's speed, is a CSS downloading machine. It too wasn't fazed by the link method used, grabbing not only all CSS files first but also the background images referenced in the CSS file.
Great for Opera, too bad it won't cache gzipped CSS files.
The worlds most popular browser is a finicky tool, as we all know. IE (v6.0 here) prefers CSS files when used with the <link /> method, giving them the first download priority. IE intermingles @imported CSS with all other manners of objects that exist in a given page, whether they are linked from the (x)html document or the CSS file.
CSS specific background images were also observed to intermingle with other objects referred to by the the webpage.
How to wrap up this somewhat fruitless yet interesting post? How about by saying lets hope that the future worlds most popular browser is one of the efficient CSS downloading machines.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback