Import Hack

From CSS Discuss

Jump to: navigation, search

Contents

The @import Hack

Early browsers are notorious for malfunctioning when presented with CSS rules they can't handle (Netscape Navigator 4 will crash at the sight of certain rules). The import hack allows you to hide entire stylesheets from version 4 and older browsers by linking them with a method they don't understand: the @import rule. CSS2:@import

The @import rule links to an external stylesheet from within a stylesheet (external or in a STYLE element), however, early browsers do not understand the syntax and simply ignore the statement (and the stylesheet it references).

For a table of all variations on the @import hack, take a look at: http://imfo.ru/csstest/css_hacks/import.php

Typical @import Setup

Begin with two stylesheets: simple.css (only simple rules for early browsers) modern.css (advanced CSS2, rules to override rules in simple.css)

Create a third stylesheet "import.css" containing only:

@import "modern.css";

Link the simple.css and import.css in the HEAD of the document:

<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="import.css" />

(The simple stylesheet /must/ be linked first.)

The Effect

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.

Alternate Syntax

Different versions of the import rule have varying levels of support from older browsers.

@import "style.css";      /* hidden from nearly all v4 browsers  */
@import url('style.css'); /* IE4 can understand, but not NN4 */
...

Browser support for different syntaxes

Example CSS files

/* simple.css */
body {
  background:white;
  color:#666666;
}
/* modern.css */
body {
  font-size:87%;
  line-height:1.4em;
  text-align:justify;
}

media="all" (Simpler Hiding From Nav4)

If you only have ONE stylesheet you need to hide from Nav4 (only one SS can be hidden this way), you can link to the stylesheet with a media rule:

<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="hidden[[ From Nav4 ]].css" media="all" />

media not "all" (Hiding CSS from IE)

If you have a stylesheet that needs to be hidden from IE (all versions) give it a mediatype different from "all", i.e. "screen".

<style type="text/css">@import "modern.css" screen;</style>


Why use the import.css file?

Using link elements allows us to more easily adapt to a system with alternate stylesheets. (See Style Switching ). If alternate stylesheets are not a concern, the file import.css is not needed. The @import rule can be placed in a STYLE element as such:

<link rel="stylesheet" type="text/css" href="simple.css" />
<style type="text/css"> @import "modern.css"; </style>

Why not put @import at the bottom of simple.css?

According to the CSS specs, @import rules must precede any other CSS rules in a stylesheet, so this creates the need to place it in its own stylesheet for these purposes.

Personal tools