@import

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

@importCSS@规则,用于加载外部层叠样式表。@import规则必须放在其他除了@charset规则以外的CSS规则的前面;@import规则不可嵌套条件规则组中。

@import可在URI后面附带媒体查询;每条媒体查询间用逗号分隔。若没有媒体查询,则该导入是无条件的,相当于指定媒体为all

语法

@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 [ <string> | <url> ] [ <media-query-list> ]?;

where
<media-query-list> = <media-query>#

where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

示例

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

技术规格

技术规格 Status 备注
Media Queries
@import
Recommendation 扩展语法以支持任何媒体查询,而不仅仅是简单的媒体类型
CSS Level 2 (Revision 1)
@import
Recommendation 支持用<string>直接表示样式表的url,
并要求@import规则必须在CSS文档的开头。
CSS Level 1
@import
Recommendation 初始定义

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 5.5 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 5.5 (Yes) (Yes)

文档标签和贡献者

标签: 
 此页面的贡献者: seed-fe, Guillaume-Heras, mrstork, gqqnbig
 最后编辑者: seed-fe,