スタイルシートのインポート。
@import 規則は、他のスタイルシートからスタイル規則をインポートする（取り込む）ことを、作者に許容する。@import 規則が妥当なスタイルシートを指しているならば、ユーザー エージェントは、当の規則が在った所に、その内容が記されていたかのように扱うものとする ― ただし、次の 2 つの例外がある：
@import 規則は、同じスタイルシート内の［@charset／名前のみを供する @layer 定義］を除く、他のすべての妥当な［at-規則／スタイル規則］より先行していなければならない ― さもなければ @import 規則は無効になる。
<string> が供されている場合、それは、同じ引数を伴う 1 個の <url> として解釈するものとする。
以下のCSSが組み込んであります：
Test.css：開始<SPAN class=T1>テスト<SPAN>SPAN要素</SPAN></SPAN>終了
[layer | layer(<layer-ident>)]?
[supports( [<supports-condition> | <declaration>] )]? <media-query-list>?
インポート条件 と総称される、省略可能な［supports()／<media-query-list>］は、当のスタイルシートが、どのような条件の下で適用されるかを言明する。
supports( [<supports-condition> | <declaration>] )
¶
次の 条件付き @import 規則 は、ユーザー エージェントが display: flex をサポートする場合に限り、スタイルシートを読み込むことに加え、表示域横幅が 400px 以下の携帯機器【 handheld 】に限り、スタイルシートを適用する：
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
次のインポートは、2 つのカスケード層 ― 順に、framework component 層、無名な層 ― の中にスタイルシートを読み込む：
@import url("tabs.css") layer(framework component);
@import url("override.css") layer();
次の 2 行（url() によるものと、文字列そのままのもの）は、意味的に等価な @import 構文になる：
@import "mystyle.css";
@import url("mystyle.css");
インポート条件は、［ある媒体／ある特能のサポート］に依存するインポートを許容する。インポート条件が無い下では、無条件にインポートされる（インポート条件の <media-query-list> に値 all を指定しても、同じ効果になる）。インポート条件が合致しない場合、インポートされるスタイルシート内の規則は適用されない ― インポートされるスタイルシートが、所与の媒体クエリを伴う［@media／@supports］ブロックで括られたときとちょうど同じく。
@import 規則を媒体に依存させる例を以下に示す：
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
したがってユーザー エージェントは、インポート条件が合致しない条件付きインポートについては、フェッチしなくともよい。加えて、インポートによるスタイルシートの適用が <supports-condition> により阻まれる場合、そのスタイルシートは（他のリンクを通して読み込まれない限り）fetch しないものとする ― その import 規則に対応する CSSImportRule.styleSheet 値は、（他のリンクを通して読み込まれる場合でも） null を返すものとする。
作者が、より新しいユーザー エージェントのネットワーク処理能には影響しないよう、旧来のユーザー エージェントにフォールバック規則を供する方法を、次の規則に示す：
@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
...
}
<media-query> は、media_query_list 生成規則に対応し、媒体クエリとして解釈される。<supports-condition> は、supports_condition 生成規則に対応し、@supports 条件として解釈される。<supports-condition> に代えて <declaration>（declaration 生成規則）が与えられた場合、supports_declaration_condition 生成規則として解釈した上で（すなわち、暗黙の丸括弧が追加される）、<supports-condition> として扱うものとする。
例えば、次の 2 行は等価になる：
@import "mystyle.css" supports(display: flex); @import "mystyle.css" supports((display: flex));
インポート条件の評価とその全部的な構文は Media Queries [MEDIAQ]、および CSS Conditional Rules [CSS-CONDITIONAL-3] にて定義される。
| 表示内容： |
| 表示内容： |