Importing style sheets: the ‘@import’ rule

CSS Cascading and Inheritance Level 3

Importing style sheets: the ‘@import’ rule

The ‘@import’ rule allows users to import style rules from other style sheets. Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet. The ‘@import’ keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(…) around it.

Example 1:

The following lines are equivalent in meaning and illustrate both ‘@import’ syntaxes (one with ‘url()’ and one with a bare string):

@import “mystyle.css”;
@import url(“mystyle.css”);

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent ‘@import’ rules. Such media-dependent imports include a comma-separated list of “media queries” after the URI. In the absence of any media query, the import is unconditional. (Specifying ‘all’ for the medium has the same effect.) The UA must import the style sheet if (and only if) the media condition evaluates to true.

Example 2:

The following rules illustrate how ‘@import’ rules can be made media-dependent:

@import url(“fineprint.css”) print;
@import url(“bluish.css”) projection, tv;
@import url(“narrow.css”) handheld and (max-width: 400px);

The evaluation and full syntax of the expressions after the URL is defined by the Media Queries specification [MEDIAQ].

When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to a separate style sheet.

Content-Type of imported stylesheets

The processing of imported stylesheets depends on the actual type of the linked resource. If the resource does not have Content-Type metadata, or the host document is in quirks mode and has the same origin as the imported stylesheet, the type of the linked resource is text/css. Otherwise, the type is determined from its Content-Type metadata.

If the linked resource’s type is text/css, it must be interpreted as a CSS stylesheet. Otherwise, it must be interpreted as a network error.

This articles from W3C:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s