@import

構文

@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

内容は次の通りです。

url

インポートするリソースの位置を表す <string> または <url> です。 URL は絶対パスでも相対パスでも構いません。

list-of-media-queries

メディアクエリーのカンマ区切りのリストで、リンクした URL で定義された CSS ルールを適用するためのメディアに依存した条件を指定します。ブラウザーが対応していないメディアクエリーの場合、リンクされたリソースは読み込まれません。

layer-name

リンクされたリソースのコンテンツがインポートされるカスケードレイヤーの名前です。詳しくは layer() を参照してください。

supports-condition

このスタイルシートをインポートするために、ブラウザーが対応している必要がある特性を示します。 ブラウザーが supports-condition で指定された条件に適合しない場合、リンクされたスタイルシートを取得しないことがあり、他にもパスを通してダウンロードしても読み込むことはできません。 supports() の構文は @supports で記述されているものとほぼ同じですので、より完全なリファレンスはそちらのトピックを参照してください。

@import を layer キーワードまたは layer() 関数とともに使用すると、外部スタイルシート（フレームワーク、ウィジェットスタイルシート、ライブラリーなど）をレイヤーにインポートすることができます。

解説

ルールのインポートは、 @charset ルールと @layer 文を作成するレイヤーを除き、他のすべての種類のルールよりも前に来る必要があります。

* {
  margin: 0;
  padding: 0;
}
/* それ以外のスタイル */
@import "my-imported-styles.css";

@import アットルールはスタイル設定の後に宣言されており、不正であるため無視されます。

@import "my-imported-styles.css";
* {
  margin: 0;
  padding: 0;
}
/* それ以外のスタイル */

@import ルールは入れ子になる文ではありません。従って、条件付きアットルールグループの中で使うことはできません。

ユーザーエージェントは未知のメディア種別のリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import ルールを指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリーで指定します。メディアクエリーがないと、インポートは無条件で行われます。メディアに all を指定しても同じ効果になります。

同様に、ユーザーエージェントは @import アットルールで supports() 関数を使用して、具体的な特性の集合に対応している（または対応していない）場合のみリソースを取得することができます。 これにより、作者は最近導入された CSS 特性の利点を活かしつつ、古いバージョンのブラウザーに対して優雅なフォールバックを提供することができます。 なお、 @import アットルールの supports() 関数の条件は、 JavaScript で CSSImportRule.supportsText を用いて取得することができます。

@import ルールにより、リンクされたリソースからルールをインポートしてカスケードレイヤーを作成することもできます。ルールは既存のカスケードレイヤーにインポートすることもできます。そのために @import とともに layer キーワードまたは layer() 関数を使用します。インポートされたスタイルシートのスタイルルールの宣言は、インポートされた時点でスタイルシートに文字どおり書き込まれたかのようにカスケードに作用します。

形式文法

@import = 
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;  

<layer-name> = 
  <ident> [ '.' <ident> ]*  

<import-conditions> = 
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-selector-fn>     |
  <supports-font-tech-fn>    |
  <supports-font-format-fn>  |
  <supports-at-rule-fn>      |
  <supports-decl>            

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-decl> = 
  ( <declaration> )  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<wq-name> = 
  <ns-prefix>? <ident-token>  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

例

CSS ルールをインポート

@import "custom.css";
@import url("chrome://communicator/skin/");

上の 2 つの例では、 url を <string> として指定する方法と url() 関数として指定する方法を示しています。

条件付きで CSS ルールをインポート

@import "fine-print.css" print;
@import "bluish.css" print, screen;
@import "common.css" screen;
@import "landscape.css" screen and (orientation: landscape);

上記の例の @import ルールは、リンクされた CSS ルールが適用される前に成立する必要があるメディア依存の条件を示しています。たとえば、最後の @import ルールは、横向きの画面の場合のみ landscape.css スタイルシートを読み込ませます。

機能に対応していることを条件とした CSS ルールのインポート

@import "grid.css" supports(display: grid) screen and (width <= 400px);
@import "flex.css" supports((not (display: grid)) and (display: flex)) screen
  and (width <= 400px);

上記の @import ルールは、display: grid が対応している場合はグリッドを使用するレイアウトをインポートし、そうでない場合は display: flex を使用する CSS をインポートする方法を示しています。 supports() 文は 1 つしか置くことができませんが、not、and、or で任意の数の特性チェックを組み合わせることができます。ただし、それらを混在させる場合は、優先順位を定義するために括弧を使用する必要があります。例えば、supports((..) or (..) and not (..)) は無効ですが、supports((..) or ((..) and (not (..)))) は有効です。 なお、もし単一の宣言しかない場合は、括弧でくくる必要はありません。これは上の最初の例で示されています。

上記の例では、基本的な宣言構文を使って対応条件を示しています。 supports() で CSS 関数を指定することもでき、対応していてユーザーエージェントで評価できる場合は true と評価されます。 例えば、下記のコードでは、子結合子 (selector()) と font-tech() 関数の両方を条件とする @import を表示しています。

@import "whatever.css"
  supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

カスケードレイヤーへのCSSルールのインポート

@import "theme.css" layer(utilities);

上の例では、 utilities という名前のカスケードレイヤーが作成され、インポートされたスタイルシート theme のルールを保持するために使用されます。

@import "headings.css" layer(default);
@import "links.css" layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

上の例では、 headings.css と links.css のスタイルシートのルールは、 audio[controls] ルールと同じレイヤー内でカスケードされます。

@import "theme.css" layer();
@import "style.css" layer;

この例は、2 つの別個の無名カスケードレイヤーを作成し、それぞれにリンク先のルールをインポートする例です。名前なしで宣言されたカスケードレイヤーは、無名カスケードレイヤーです。名前のないカスケードレイヤーは、作成された時点で確定されます。スタイルを並べ替えたり追加したりする意味を提供せず、外部から参照することはできません。

仕様書

ブラウザーの互換性

関連情報

• @media
• @supports
• CSS カスケードと継承モジュール
• CSS アットルール関数