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.
See Also
http://www.bluerobot.com/web/css/fouc.asp for
an overview of the effect.
|