Style Sheets

Imported & Alternate Style Sheets

@import

@import is another method of applying an external style sheet. This method links to an external style sheet from within a style sheet (external or an embedded STYLE element). The rule expects the URL of a file containing additional style rules. It optionally allows you to specify a list of media types.

If it is included, the @import rule must be located at the beginning of the style sheet.

In the above example, the first two rules import a pair of external style sheets. The third rule specifies an external style sheet for two media types, print and handheld. The advantage of declaring media types in this case is that the browser need not load the last style sheet (unless it is a handheld device) or can wait to load it only if the user prints the page.

Your First CSS Hack

However, early browsers do not understand the @import syntax and simply ignore the statement (and the style sheet it references). This is a very important point, since often, older browsers can either crash, or wreck your pages if you use advanced CSS. Since NN4.x doesn't understand what @import means, you can use it to "trick" that browser into ignoring your modern CSS and instead, give it a simpler version to render. This technique is covered in great detail in the Import Hack at CSS-discuss (which I will simplify here) and in Tricking Browsers by Eric Meyer.

Example

You have two style sheets:

simple.css which contains only simple rules for early browsers. It might look like this:

modern.css which contains all of your advanced CSS rules to override the simple rules in simple.css. An example of some of the code in modern.css might look like this:

To "trick" NN4.x, create a third style sheet called "import.css" which contains only the line:

Link the simple.css and import.css in the HEAD of the document. Note that the simple.css style sheet must be linked first.

If you are NN4x, you recognize the LINK tag and read the instructions in simple.css, which you understand and follow. Next, you recognize the LINK tag and read the instructions in import.css which tell you to @import modern.css. But because you are an old browser, you don't know what @import means, and so you ignore it and continue rendering the page using the simple.css that you do understand.

All CSS1 browsers will load simple.css and import.css, however, only modern browsers will understand the @import rule and also load modern.css. Since modern.css is linked after simple.css, its rules will override those in simple.css more easily. So, if you check your web stats and see that you have some NS 4X users, this hack will work for all.

Alternate Style Sheets

In addition to tricking old browsers, another reason to link multiple external style sheets in the HEAD of a document is to provide alternate styles. An alternate style sheet might be used to provide a large text version of your web page for accessibility, or a different design scheme just for fun. Most modern browsers - IE is the notable exception - allow you to choose alternate style sheets from the View menu. (IE's deficiency can be circumvented with a bit of javascript but that is beyond the scope of this course. See Alternate Style Sheets at "A List Apart" web site.) Here is how you attach an alternate style sheet:

First, attach your preferred style sheet using a LINK tag in the document HEAD. Add a title attribute to each style sheet's LINK tags, so a name will appear in the browser's View menu.

Next, attach your alternate style sheet. Specify the value alternate stylesheet for the rel attribute and add a title attribute to this LINK element as well.

You can attach as many alternate style sheets as you wish.

When a web page containing alternate style sheets first loads into a browser, it defaults to the preferred styles. To see an example of a web page that is attached to multiple alternate style sheets, use Firefox to go to the W3C's Alternative Style Sheets page. From the browser's menu, choose View | Page Style. The submenu will display all the available alternate styles. Cool!

References

• Tricking Browsers and Hiding Styles
• W3C: @import
• More on the Import Hack
• "A List Apart" - Alternate Style Sheets
• W3C - Alternative Style Sheets

Modified - Thursday, April 5, 2007