@import

Spec
Version
CSS1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

@import  { URI | string } [  media type,… ] ;

Description

The @import at-rule is a mechanism for importing one style sheet into another. It should be followed by a URI value and a semicolon, but it’s possible to use a string value instead of the URI value. Where relative URIs are used, they’re interpreted as being relative to the importing style sheet.

You can also specify one or more media types to which the imported style sheet applies—simply append a comma-separated list of media types to the URI.

Here’s an example of a media type specification:

@import url(/css/screen.css) screen, projection;

The @import rules in a style sheet must precede all rule sets. An @import rule that follows one or more rule sets will be ignored. As such, the example below shows an incorrect usage; because it appears after a rule set, the following @import rule will be ignored:

html {
  background-color: #fff;
  color: #000;
}

/* The following rule will be ignored */
@import url("other.css");

Example

Here are examples of the most common usage forms:

@import url("/css/main.css");
@import "local.css";

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

The media type specification feature isn’t supported by Internet Explorer versions up to and including 8. In the example below, IE would attempt to request the file ./url(/css/screen.css) screen, projection—that is, a file named screen.css) screen, projection in a subdirectory named css in a subdirectory named url( below the directory containing the importing style sheet.

@import url(/css/screen.css) screen, projection;
Internet Explorer versions up to and including 8 only support a maximum of 3 nested levels of @import—that is you can’t chain more than 3 levels deep. Subsequent levels are ignored.

User-contributed notes

ID:
#7
Contributed:
by Paul O'B
Date:
Tue, 15 Jun 2010 20:28:21 GMT

@xtiansimon

No it's not a typo. See Tommy's reply n this thread:

http://www.sitepoint.com/forums/showpost.php?p=4618404&postcount=6

ID:
#6
Contributed:
by xtiansimon
Date:
Tue, 15 Jun 2010 01:18:36 GMT

Seems there are some typos in the second to the last paragraph...

First, it says IE is attempting to request a file "./url(/css/screen.css)" What is this "./" here for?

Second, I do understand it trying to access "screen.css", but why the end ")". That is a typo.

Third, this must also be a typo, "...in a subdirectory named url("

ID:
#5
Contributed:
by Paul O'B
Date:
Thu, 25 Mar 2010 11:06:05 GMT

The @import rules must precede all other rules (except the @charset rule, if present)

Related Products