Recipe 9.3 Removing Web Page Flicker in Internet Explorer 5.x for Windows

Problem

You want to remove the initial flicker, or flash, of unstyled content before Internet Explorer 5.x for Windows applies your CSS style sheet.

Solution

Add a link or script element as the child of the head element in your web document:

<head> 

 <title>christopher.org</title> 

 <link rel="stylesheet" type="text/css" media="print" href="print.css"> 

 <style type="text/css" media="screen">@import "advanced.css";</style> 

</head>

Discussion

If a web page contains a style sheet associated by only the @import method, Internet Explorer 5.x for Windows' browsers first show the contents of the web page without any of the styles applied to the markup. After a split second, the browser redraws the web page with styles applied. Adding a link or script element in the head before the @import rule forces the browser to load the styles when it initially draws the page in the viewport.

This rendering phenomenon isn't a problem with the browser itself. The CSS specification doesn't specify whether this behavior is acceptable or not, so the browser is compliant with the specification. You or your audience might perceive this flicker as a bug or annoyance, though, so you should prevent it from occurring.