Recipe 11.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 renders the web page, thus keeping it from showing a bland-looking web page.

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

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

Problem

Solution

Discussion

See Also