@import
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Version |
|---|
| CSS1 |
Example
Here are examples of the most common usage forms:
@import url("/css/main.css");
@import "local.css";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");Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
The media type specification feature isn’t supported by Internet Explorer versions up to and including 7. In the example above, 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.
Related Reading
User-contributed notes
- ID:
- #3
- Date:
- Wed, 20 Feb 2008 20:50:00 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
I use the @import rule as one of the most exciting, important parts of CSS. Take the code below (sorry can't do blockquote), this is my full main CSS file for a site.
*****
@import url("layout.css");
@import url("colour.css");
@import url("fonts.css");
@import url(.css) all;
*****
The bottom line is the whole center of the my hidden technique. Internet Explorer 5.0 > 7 see this line and load a file called "url(.css) all", any other browser loads a file ".css". And there it is, using CSS to solve internet explorer rendering issues in stead of the markup.
I believe for IE8 how Microsoft should have solved the quirks rendering mode issue is with a CSS rule not a markup meta tag. IE7 conditional statements are an ugly markup hack as well. Rendering is after all about how the CSS works - not the markup.
If i had been on the IE8 development team i'd have pushed for
"@import url("hacks.css") ie8;"
- ID:
- #2
- Date:
- Mon, 28 Jan 2008 00:12:54 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
In the compatibility section you use the phrase 'in the example above' to refer to the first example, but the previous example isn't what is being referred to. The example should be repeated in this section.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
