Rules  1  2  3  4  5  6  7  8  9  10  11  12  13  14 
Rule 5 - Put Stylesheets at the Top
 Examples  1  2  3  4 
Example 3 - CSS at the Top Using @import

Make sure to view this page in IE to see the blank white screen problem.

Current time: 08:32:09

In this example the stylesheet is in the document's HEAD. From the previous example we discovered this was key to enabling progressive rendering (at least in IE). In this example, however, instead of using a LINK tag to pull in the stylesheet the @import rule is used, like this:

<style>
@import url("styles.css");
</style>

This is a valid syntax, but, even though it's in the document's HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.

Always put your stylesheets in the document HEAD using the LINK tag.

stevesouders.com | contact SteveGreyhound, the 2nd fastest land animalThis is the companion website for High Performance Web Sites by Steve Souders.