@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 |
浏览器兼容性
加载中…