Attaching CSS files: The @import method
A problem with the link method is that obsolete browsers see the style sheet but don??™t
understand it. This can result in garbled layouts??”and often in unusable websites for those
unfortunate enough to have to deal with such arcane web browsers. The solution is to
hide the CSS from such browsers by using a command that they don??™t understand and so
will ignore. This is often referred to as the @import method.
WEB PAGE ESSENTIALS
39
2
As shown in the following example, the style element is used to do this:
The following image shows the result in obsolete browsers, such as Netscape 4. The CSS is
hidden, so just the content is displayed.
However, compliant browsers see the CSS and render the site as shown in the following
image.
The CSS specifications permit the use of the style sheet location as a
quoted string instead of enclosing it in url(). The method shown here
is more commonly supported, though.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
40
This method isn??™t perfect. Some browsers think they can deal with CSS but can??™t, meaning
they understand @import, import the CSS, and then screw up the display anyway. Also,
some versions of Internet Explorer in some cases offer a flash of unstyled content,
although a workaround there is to have a link or script element in the web page??™s head
section (which will be likely, since sites should carry a print style sheet in addition to the
one for screen, or work with JavaScript).
Pages:
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103