@import

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

概述

@import CSS @ 规则用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,@charset 规则除外;因为它不是一个嵌套语句,@import 不能在条件组的规则中使用。

因此,用户代理可以避免为不支持的媒体类型检索资源,作者可以指定依赖媒体的 @import 规则。这些条件导入在 URI 之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下,导入是无条件的。指定所有的媒体具有相同的效果。

语法

@import url;
@import url list-of-media-queries;

其中:

url

是一个表示要引入资源位置的 <string> 或者 <uri> 。这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件;可以只指明包名,然后合适的文件会被自动选择 (e.g. chrome://communicator/skin/). See here 了解更多。

list-of-media-queries

是一个逗号分隔的 媒体查询 条件列表,决定通过 URL 引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件,就不会引入 URL 指明的 CSS 文件。

正规语法

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

<supports-decl> =
( <declaration> )

示例

css
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation: landscape);

规范

Specification
CSS Cascading and Inheritance Level 5
# at-import

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@import
layer()
supports() as import condition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
See implementation notes.