> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/css-xi-lie/15-gui-ze-qi-ta.md). # @规则：其他 一个@规则是一个CSS 语句，以 `@` 符号开头，后跟一个标识符，并包括直到下一个分号的所有内容或下一个 CSS 块，以先到者为准。 下面是一些@规则： * @charset：定义样式表使用的字符集； * @import：告诉 CSS 引擎引入一个外部样式表； * @namespace：告诉 CSS 引擎必须考虑 XML 命名空间； * @font-face：引用外部字体文件； * @media：如果满足媒介查询的条件则条件规则组里的规则生效； * @keyframes：描述 CSS 动画的帧； * @supports：如果满足给定条件则条件规则组里的规则生效； * @page：描述打印文档时布局的变化； * @document：如果文档样式表满足给定条件则条件规则组里的规则生效。 ## @charset @charset 规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，且前面不得有任何字符。因为它不是一个嵌套语句，所以不能在 @规则条件组 中使用。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 `style` 元素内的样式属性内使用。 在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）： * 文件的开头的 Unicode byte-order 字符值。 * 由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。 * CSS @规则 @charset。 * `link` 元素的 `charset` 属性。 **注意：** 该方法在 HTML5 标准中已废除，无法使用。 * 默认为 `UTF-8`。 @charset 规则的值是一个 web-safe 字符编码组合的字符串，还必须被双引号包围，@charset 只允许一个空格，并且以分号结束。 ```css /*大小写不敏感*/ @charset "UTF-8"; @charset "utf-8"; /* 设置css的编码格式为Unicode UTF-8 */ @charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */ @charset 'UTF-8'; /* 无效的, 使用了错误的引号 */ @charset "UTF-8"; /* 无效的, 多于一个空格 */ @charset "UTF-8"; /* 无效的, 在 @charset 之前多了一个空格 */ @charset UTF-8; /* 缺少引号，不是 CSS 字符串 */ ``` ## @import @import 规则用于从其他样式表导入样式规则。@import 规则必须位于所有其他类型的规则之前，@charset 规则除外；因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。 为避免不支持的媒体类型检索资源，可以指定 @import 规则依赖的媒体查询 。这些条件导入在 URI 之后指定以逗号分隔的媒体查询。在没有任何媒体查询的情况下，默认所有的媒体具有相同的效果。 ```css @import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; ``` ```css @import 'custom.css'; @import url("fineprint.css") print; @import url("bluish.css") speech; @import "common.css" screen; @import url('landscape.css') screen and (orientation:landscape); ``` ## @namespace @namespace 规则用于定义 CSS 样式表中使用的 XML 命名空间。 定义的命名空间可用于限制通用选择器、类型选择器和属性选择器仅选择该命名空间内的元素。@namespace 规则通常仅在处理包含多个名称空间的文档时有用——例如带有内联 SVG 或 MathML 的 HTML5，或混合多个词汇表的 XML。 @namespace 规则在样式表中必需在 @charset 和 @import 后，所有其他@规则和样式声明之前。 在 HTML5 中，已知外来元素将自动分配命名空间。这意味着，HTML 元素默认为 XHTML 命名空间（ xmlns 属性，同理，SVG 和 Math 元素将被赋予其适当的命名空间（ 和 ```css /* 默认命名空间 */ @namespace url(XML-namespace-URL); @namespace "XML-namespace-URL"; /* 命名空间前缀名称 */ @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL"; ``` ```css @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); /* 匹配所有 XHTML 的 元素，因为 XHTML 是默认的无前缀名称空间 */ a {} /* 匹配所有 SVG 的 元素 */ svg|a {} /* 匹配 XHTML 和 SVG 的 元素 */ *|a {} ``` ## @keyframes关键帧 @keyframes 规则用于指定动画名称和动画效果。 ```css /* 规定动画语法: from...to...定义的是从开始到结束两个状态 */ @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } /* 规定各个阶段不同的状态的动画(不只有开始于结束状态) */ @keyframes 动画名称 { 0% { } n1% { } n2% { } n3% { } n4% { } ......... 100% { } } ``` ```css @keyframes goback { 0% { } 49% { transform: translateX(1000px); } 55% { transform: translateX(1000px) rotateY(180deg); } 95% { transform: translateX(0) rotateY(180deg); } 100% { transform: translateX(0) rotateY(0deg); } } ``` ## @supports @supports 规则用于检测浏览器中是否支持某一个或多个特定的 CSS 功能。这称为特征查询。该规则可以放置在代码的顶层，也可以嵌套在任何其他条件组@规则中。 @supports 规则的条件表达式由一个或多个由逻辑运算符 `and`、`or`、`not` 组合而成的 CSS 属性-值对组成。运算符的优先级可以用括号定义。 最基本的条件表达式是一个简单的声明（属性名后跟一个值，用冒号分隔）。声明必须用括号括起来。如果浏览器中 `transform-origin：5% 5%` 是有效的，则返回 true： ```css @supports (transform-origin: 5% 5%) {} ``` 第二个基本支持条件是支持函数，所有浏览器都支持这些语法，但函数本身仍在标准化中。 ### 语法 **selector() ：** 检测浏览器是否支持选择器语法。 ```css /** 如果支持子选择器，则返回 true **/ @supports selector(A > B) {} ``` **not：** 对检测结果取反。下面的例子中，如果浏览器的返回true[`transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)财产**不**考虑`10em 10em 10em`有效： ```css @supports not (transform-origin: 10em 10em 10em) {} @supports not (not (transform-origin: 2px)) {} @supports (display: grid) and (not (display: inline-grid)) {} ``` **and：** 连接条件表达式，如果连接的两个表达式**都为 true**，则返回 true。 ```css @supports (display: table-cell) and (display: list-item) {} ``` **or：** 连接条件表达式，如果连接的两个表达式**有一个为 true**，则返回 true。 ```css @supports (transform-style: preserve) or (-moz-transform-style: preserve) {} ``` ### CSS.supports() CSS API 提供了 `supports()`方法判断浏览器是否支持给定的 CSS 属性-值，该方法返回布尔值。 **注意：** 除 IE 6\~11，其他主流浏览器都支持该方法。 ```js CSS.supports(propertyName, value) CSS.supports(supportCondition) ``` ```js CSS.supports("text-decoration-style", "blink") CSS.supports("display: flex") CSS.supports("(--foo: red)") CSS.supports('(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)') ``` ### 常见示例 ```css /** 检测 CSS 属性或前缀的支持： **/ @supports (animation-name: test) {} @supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) {} /** 检测不支持的 CSS 属性 **/ @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {} /** 检测自定义属性的支持 **/ @supports (--foo: green) {} /** 检测选择器的支持 **/ @supports not selector(:is(a, b)) {} @supports selector(:nth-child(1n of a, b)) {} ``` ## @page @page 规则用于打印文档时修改某些 CSS 属性。它仅支持部分 CSS 属性，支持的属性有：margin、size、marks、bleed 以及页面外边距盒子等，不支持的属性将会被忽略。 ```css @page { margin: 1cm; } @page :first { margin: 2cm; } ``` @page 可用的伪类： * **:blank**： 匹配一个空的用户输入元素，包含一个空字符串或其他空输入； * **:first**： 表示打印文档的第一页； * **:left**：表示打印文档的所有左侧页面。**注意：** 给定页面是【左】还是【右】取决于文档的主要书写方向。例如，如果第一页的主要书写方向是从左到右，那么它将是 `:right`；如果它的主要书写方向是从右到左，那么它将是 `:left` 页。 * **:right**： 表示打印文档的所有右侧页面。 ## @document @document 规则用于指定将样式对一个或多个匹配的 URL 生效。**注意：** 该规则已被弃用，不推荐**使用**。 ```css /* 将 CSS 规则应用于: - URL 为http://www.w3.org/ - http://www.w3.org/Style/ 为前缀的 URL - 域名是 mozilla.org 或者以 mozilla.org 结尾的域名的 URL - 任何独立视频 — 以 https: 开头的 URL */ @document url("http://www.w3.org/"), url-prefix("http://www.w3.org/Style/"), domain("mozilla.org"), media-document("video"), regexp("https:.*") { body { color: purple; background: yellow; } } ``` ## 参考资料 [MDN CSS @规则](https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule) [MDN @charset](https://developer.mozilla.org/en-US/docs/Web/CSS/@charset) [MDN @import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) [MDN @supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)