mozilla

Revision 20212 of @import

  • Revision slug: CSS/@import
  • Revision title: @import
  • Revision id: 20212
  • Created:
  • Creator: Marsf
  • Is current revision? No
  • Comment add link to ja; 10 words added

Revision Content

{{ CSSRef() }}

Summary

@import allows users to import style rules from other style sheets.

Syntax

@import "url";
@import "url" media1, media2, ...;
@import url("url");
@import url("url") media1;

Notes

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.

Examples

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

Specifications

Browser compatibility

See also

{{ Cssxref("@media") }}, {{ Cssxref("@font-face") }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p><code>@import</code> allows users to import style rules from other style sheets.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">@import "<em>url</em>";
@import "<em>url</em>" <em>media1</em>, <em>media2</em>, <em>...</em>;
@import url("<em>url</em>");
@import url("<em>url</em>") <em>media1</em>;
</pre>
<h3 name="Notes">Notes</h3>
<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>
<h3 name="Examples">Examples</h3>
<pre class="eval">@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#the-cascade">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#at-import">CSS 2.1</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<h3 name="See_also">See also</h3>
<p>{{ Cssxref("@media") }}, {{ Cssxref("@font-face") }}</p>
<div class="noinclude">
<p>{{ languages( { "fr": "fr/CSS/@import", "ja": "ja/CSS/@import", "pl": "pl/CSS/@import" } ) }}</p>
</div>
Revert to this revision