@import
Baseline 廣泛可用 *
@import CSS at-rule 用於從其他有效的樣式表中匯入樣式規則。@import 規則必須在樣式表的頂部定義，位於任何其他 at-rule（@charset 和 @layer 除外）和樣式宣告之前，否則它將被忽略。
語法
@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
- list-of-media-queries
-
是一個以逗號分隔的媒體查詢列表，它指定了應用連結 URL 中定義的 CSS 規則的媒體相關條件。如果瀏覽器不支援這些查詢中的任何一個，它就不會載入連結的資源。
- layer-name
- supports-condition
-
表示瀏覽器必須支援的特性，以便匯入樣式表。如果瀏覽器不符合 supports-condition 中指定的條件，它可能不會獲取連結的樣式表，即使透過其他路徑下載了，也不會載入它。
supports()的語法與@supports中描述的幾乎相同，該主題可以作為更完整的參考。
使用 @import 與 layer 關鍵字或 layer() 函式一起，可以將外部樣式表（來自框架、小部件樣式表、庫等）匯入到層中。
描述
匯入的規則必須在所有其他型別的規則之前，但 @charset 規則和建立層的 @layer 語句除外。
* {
margin: 0;
padding: 0;
}
/* more styles */
@import "my-imported-styles.css";
由於 @import at-rule 是在樣式之後宣告的，因此它是無效的，從而被忽略。
@import "my-imported-styles.css";
* {
margin: 0;
padding: 0;
}
/* more styles */
@import 規則不是巢狀語句。因此，它不能在條件組 at-rule 內部使用。
為了讓使用者代理可以避免檢索不支援的媒體型別的資源，開發者可以指定媒體相關的匯入條件。這些條件匯入在 URL 之後指定以逗號分隔的媒體查詢。在沒有任何媒體查詢的情況下，匯入是無條件的。為 list-of-media-queries 指定 all 具有相同的效果。
類似地，使用者代理可以在 @import at-rule 中使用 supports() 函式，僅在支援（或不支援）特定功能集時才獲取資源。這允許開發者利用新引入的 CSS 功能，同時為舊版瀏覽器提供優雅的回退。請注意，@import at-rule 的 supports() 函式中的條件可以使用 CSSImportRule.supportsText 在 JavaScript 中獲取。
@import 規則也可以透過從連結資源匯入規則來建立級聯層。規則也可以匯入到現有的級聯層中。為此，layer 關鍵字或 layer() 函式與 @import 一起使用。匯入的樣式表中的樣式規則宣告與級聯的互動方式，就好像它們是在匯入點被直接寫入樣式表一樣。
正式語法
@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/");
以上兩個示例展示瞭如何將 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() 語句，但你可以使用 not、and 和 or 組合任意數量的特性檢查。但是，當你混合使用它們時，必須使用括號來定義優先順序，例如，supports((..) or (..) and not (..)) 是無效的，但 supports((..) or ((..) and (not (..)))) 是有效的。請注意，如果只有一個宣告，則無需將其包裝在額外的括號中：這在上面的第一個示例中有所展示。
以上示例顯示了使用基本宣告語法的支援條件。你還可以在 supports() 中指定 CSS 函式，如果它們被支援並且可以在使用者代理上進行評估，則其結果將為 true。例如，下面的程式碼展示了一個 @import，它以支援子代組合器（selector()）和 font-tech() 函式為條件。
@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;
這是一個建立兩個獨立的未命名級聯層並將連結的規則分別匯入到每個層中的示例。沒有名稱宣告的級聯層是未命名級聯層。未命名級聯層在建立時即被最終確定：它們不提供任何重新排列或新增樣式的方法，也不能從外部引用。
規範
| 規範 |
|---|
| CSS 級聯與繼承第五級 # at-import |
瀏覽器相容性
載入中…