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.As shown in the following example, the style element is used to do this:
<style type="text/css" media="all">
/* <![CDATA[ */
@import url(stylesheet.css);
/* ]]> */
</style>
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.

 

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). In any case, if you have to cater for obsolete and
alternative devices, using @import is probably the best bet, ensuring your site is accessible
to (almost) all.