What is the Difference Between @import and link for CSS?

External style sheets are an important part of every Web designer's bag of tricks, but there are two ways to include them in your pages: @import and . How do you decide which method is better? This FAQ discusses the differences between the two methods, why you might use one over another, and how to decide.

The Difference Between @import and

Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.

- Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your HTML document like this:

@import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:

From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.

Why Use @import?

The most common reason given for using @import instead (or along with) is because older browsers didn't recognize @import, so you could hide styles from them. Specifically:

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72)

  @import url(../style.css);

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72), Konqueror 2, and Amaya 5.1

  @import url("../style.css");

• hides the style sheet from Netscape 4, IE 6 and below

  @import url(../style.css) screen;

• hides the style sheet from Netscape 4, IE 4 and below, Konqueror 2

  @import "../styles.css";

Another use for the @import method is to use multiple style sheets on a page, but only one link in your . For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that can still be a problem.

Why Use ?

The number one reason for using linked style sheets is to provide alternate style sheets for your customers. Browsers like Firefox, Safari, and Opera support the rel="alternate stylesheet" attribute and when there is one available will allow viewers to switch between them. You can also use a to switch between style sheets in IE. This is most often used with for accessibility purposes.

One of the drawbacks to using @import is that if you have a very simple with just the @import rule in it, your pages may display a flash of unstyled content () as they are loading. This can be jarring to your viewers. A simple fix to this is to make sure you have at least one additional or

阅读(834) | 评论(0) | 转发(0) |