@import

  • Revision slug: CSS/@import
  • Revision title: @import
  • Revision id: 20239
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 5 words added

Revision Content

Summary

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except {{ cssxref("@charset") }} rules.

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated 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.

Syntax

@import url;                      or
@import url list-of-media-queries;

where :

url
Is a {{ xref_cssstring() }} or a {{ xref_cssuri() }} representing the location of the resource to import. The url may be an absolute or relatives url.
list-of-media-queries
Is a comma-separated list of media queries conditioning the application of the css rules contained in the linked url. If the browser doesn't support any of these media types, it won't even load the linked resource.

Examples

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Specifications

Specification Status Comment
Media Queries {{ Spec2('CSS3 Media Queries') }} Extended the syntax to support any media query and not only simple media types.
CSS Level 2 (Revision 1) {{ Spec2('CSS2.1') }} Added support for {{ xref_cssstring() }} to denote the url of a stylesheet,
and requirement to insert the @import rule at the beginning of the CSS document.
CSS Level 1 {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} 5.5 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} 5.5 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

{{ languages( {  "de": "de/CSS/@import", "fr": "fr/CSS/@import", "ja": "ja/CSS/@import", "pl": "pl/CSS/@import" } ) }}

Revision Source

<h2>Summary</h2>
<p>The <code>@import</code> CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except {{ cssxref("@charset") }} rules.</p>
<p>So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent <code>@import</code> rules. These conditional imports specify comma-separated <a href="/en/CSS/Using_CSS_media_queries" title="Using CSS media queries">media queries</a> after the URI. In the absence of any media query, the import is unconditional. Specifying <code>all</code> for the medium has the same effect.</p><h2 name="Syntax">Syntax</h2>
<pre class="eval">@import <em>url</em>;                      <em>or</em>
@import <em>url</em> <em>list-of-media-queries</em>;
</pre>
<p>where :</p>
<dl> <dt style="margin: 0 40px"><em>url</em></dt> <dd style="margin: 0 40px">Is a {{ xref_cssstring() }} or a {{ xref_cssuri() }} representing the location of the resource to import. The url may be an absolute or relatives url.</dd> <dt style="margin: 0 40px"><em>list-of-media-queries</em></dt> <dd style="margin: 0 40px">Is a comma-separated list of <a href="/en/CSS/Using_CSS_media_queries" rel="internal" title="en/CSS/Using_CSS_media_queries">media queries</a> conditioning the application of the css rules contained in the linked url. If the browser doesn't support any of these media types, it won't even load the linked resource.</dd>
</dl><h2 name="Examples">Examples</h2>
<pre class="eval">@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
</pre>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/#media0" title="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/#media0">Media Queries</a></td> <td>{{ Spec2('CSS3 Media Queries') }}</td> <td>Extended the syntax to support any media query and not only simple <a href="/en/CSS/@media#Media_types" title="en/CSS/@media#Media_types">media types</a>.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#at-import" title="http://www.w3.org/TR/CSS21/cascade.html#at-import">CSS Level 2 (Revision 1)</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>Added support for {{ xref_cssstring() }} to denote the url of a stylesheet,<br> and requirement to insert the <code>@import</code> rule at the beginning of the CSS document.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/REC-CSS1#the-cascade" title="http://www.w3.org/TR/REC-CSS1#the-cascade">CSS Level 1</a></td> <td>{{ Spec2('CSS1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>5.5 <a class="external" href="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx"></a></td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>5.5 <a class="external" href="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx"></a></td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2 name="See_also">See also</h2>
<ul> <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li>{{ CSS_at_rules() }}</li>
</ul>
<div class="noinclude"> <p>{{ languages( {  "de": "de/CSS/@import", "fr": "fr/CSS/@import", "ja": "ja/CSS/@import", "pl": "pl/CSS/@import" } ) }}</p>
</div>
Revert to this revision