@import

@import url;
@import url list-of-media-queries;
@import url supports(supports-query);
@import url supports(supports-query) list-of-media-queries;

内容は次の通りです。

url

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

list-of-media-queries

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

supports-query

<supports-condition> または <declaration> のどちらかです。

ルールのインポートは、 @charset を除く他のすべての種類のルールよりも先で行わなければなりません。 @import ルールは入れ子になるステートメントではないので、 条件付きアットルールグループの中で使うことはできません。

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

@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> )  

• @media
• @supports