Issue link: https://read.uberflip.com/i/1146286
Blank White Screen | 41 CSS at the Top To avoid the blank white screen, move the stylesheet to the top in the document's HEAD. Doing this in the sample web site I've called "CSS at the Top" solves all the problem scenarios. No matter how the page is loaded—whether in a new window, as a reload, or as a home page—the page renders progressively. CSS at the Top http://stevesouders.com/hpws/css-top.php Solved! There's just one more complexity to point out. There are two ways you can include a stylesheet in your document: the LINK tag and the @import rule. An example LINK tag looks like this: This is an example of a STYLE block with an @import rule: A STYLE block can contain multiple @import rules, but @import rules must precede all other rules. I've seen cases where this is overlooked, and developers spend time trying to determine why the stylesheet isn't loaded from an @import rule. For this reason, I prefer using the LINK tag (one less thing to keep track of ). Beyond the easier syntax, there are also performance benefits to using LINK instead of @import. The @import rule causes the blank white screen phenomenon, even if used in the docu- ment HEAD, as shown in the following example. CSS at the Top Using @import http://stevesouders.com/hpws/css-top-import.php Using the @import rule causes an unexpected ordering in how the components are downloaded. Figure 5-2 shows the HTTP traffic for all three examples. Each page contains eight HTTP requests: • One HTML page • Six images • One stylesheet The components in css-bottom.php and css-top.php are downloaded in the order in which they appear in the document. However, even though css-top-import.php has the stylesheet at the top in the document HEAD, the stylesheet is downloaded last because it uses @import. As a result, it has the blank white screen problem, just like css-bottom.php.