@import

  • Revision slug: CSS/@import
  • Revision title: @import
  • Revision id: 20226
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

Summary

@import 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 types after the URI. In the absence of any media types, the import is unconditional. Specifying all for the medium has the same effect.

Syntax

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

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
Is a comma-separated list of media types the css rules applies to. If the browser doesn't support any these media types, it won't even load the linked resource.

Examples

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

Specifications

Specification Status Comment
CSS Level 2 (Revision 1) {{ Spec2('CSS2.1') }} Added support for strings instead of url(),
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><code>@import</code> 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/@media#Media_types" title="en/CSS/@media#Media_types">media types</a> after the URI. In the absence of any media types, 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</em>;
</pre>
<p>where :</p>
<dl> <dt><em>url</em></dt> <dd>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><em>list-of-media</em></dt> <dd>Is a comma-separated list of <a href="en/CSS/@media#Media_types" rel="internal" title="en/CSS/@media#Media_types">media types</a> the css rules applies to. If the browser doesn't support any 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;
</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/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 strings instead of <code>url()</code>,<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_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