Frontend engineers who care about performance want a page to load progressively;

that is, we want the browser to display whatever content it has as soon as possible.

This is especially important for pages with a lot of content and for users on slower

Internet connections.The importance of giving users visual feedback has been well

researched and documented.

Here are the cases where putting stylesheets at the bottom of the document causes

the blank white screen problem to surface in Internet Explorer:

      In a new window

      Clicking the “new window” link in the example page opens “CSS at the Bottom”

in a new window.Users often open new windows when navigating across

sites, such as when going from a search results page to the actual target page.

      As a reload

      Clicking the Refresh button, a normal user behavior, is another way to trigger a

blank white screen.Minimize and restore the window while the page is loading

to see the blank white screen.

      As a home page

      Setting the browser’s default page to

and opening a new browser window causes the blank white screen.Rule 5 is

important for any team that wants its web site to be used as a home page.

      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.

      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:

      <link rel="stylesheet" href="styles1.css">

      This is an example of a STYLE block with an @import rule:

      <style>

      @import url("styles2.css");

      </style>