@import
=======

**`@import`** は CSS のアットルールで、スタイルルールを他の有効なスタイルシートからインポートするために使用します。
 `@import` ルールはスタイルシートの最上位で、他のアットルール（@charset や @layer）やスタイル宣言の前に定義する必要があり、そうしなければ無視されます。

構文
--


```css
@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()` のいずれかです。 URL は絶対パスでも相対パスでも構いません。

*list-of-media-queries*

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

*layer-name*

リンクされたリソースのコンテンツがインポートされるカスケードレイヤーの名前です。

*supports-condition* 
Experimental

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


解説
--

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


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


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


```css
@import url("my-imported-styles.css");
\* {
  margin: 0;
  padding: 0;
}
/\* more styles \*/
```


`@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> ;    
  
<url> =   
  <url()>  |  
  <src()>    
  
<layer-name> =   
  <ident> [ '.' <ident> ]\*    
  
<import-conditions> =   
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
<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-decl>    
  
<general-enclosed> =   
  [ <function-token> <any-value>? ) ]  |  
  [ ( <any-value>? ) ]                   
  
<supports-decl> =   
  ( <declaration> )    
  
```

例
-

### CSS ルールをインポート


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


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

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


```css
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
```


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

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


```css
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
 and (max-width: 400px);
```


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

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


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

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


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


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


```css
@import url(headings.css) layer(default);
@import url(links.css) layer(default);

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


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


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


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

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `@media`
* `@supports`