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.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.