❕CSS At-rule

两种 CSS 语句：规则集和 At-rule

CSS 里的绝大部分内容都是规则集，即选择器和属性:值的集合。

当然，也有一些功能是规则集覆盖不到的，比如开发者想在样式表里指定字符集、字体、列表计数器等信息，或是想导入外部样式表。要想实现上述功能，就得用到 CSS 里的另一种语句了。

CSS 语句是一个构建块，它以任何非空格字符开始，以 } 或 ; 结束。有两种类型的 CSS 语句，分别是规则集和 At-rule。任何不是规则集也不是 At-rule 的语句都是无效的，会被忽略。

还有一组语句叫嵌套语句，它们可以用在部分 At-rule 里，比如条件组的规则。此外，《CSS Nesting Module》 规范也列出了 CSS 原生嵌套的功能，目前尚处于工作草案阶段，更多详情可查阅历史文章《CSS 的原生嵌套》。

这部分将介绍 At-rule 语句。

At-rule（29个）

At-rule 以 @ 开始，后面跟一个标识符，然后一直持续到语句末尾，要么是 } 要么是 ;。

每种 At-rule 的类型由其标识符定义的，它们都有自己的内部语法和语义。At-rule 可以用来传达元数据信息（如@charset, @import）、条件信息（如@media）和描述性信息（如@font-face）等。

1. 元数据（3个）

At-rule	说明
@charset	字符集（均为非嵌套语句）
@import	外部导入
@namespace	定义 XML 命名空间

2. 条件组（4个）

At-rule	说明
@media	媒体查询
@supports	特性查询
@container	容器查询
@document（已废弃）	根据 URL

3. 动画（2个）

At-rule	说明
@keyframes
@scroll-timeline

4. 字体（9个）

At-rule	相关规则
@font-face
@font-feature-values	@swash @annotation @ornaments @stylistic @styleset @character-variant
@font-palette-values

5. 打印（5个）

At-rule	相关规则
@page	@top-center @bottom-center @left-bottom @right-bottom

6. 其它（4个）

At-rule	说明
@counter-style	可用在 list-style,counter(), counters()
@color-profile	可用在 color()
@property	CSS Houdini
@layer	级联层

7. 已废弃（2个）

• @viewport（已废弃） 配置视口

• @historical-forms

扩展阅读

• https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
let ruleArr = [], descriptorArr = [];
document.querySelectorAll(".index code").forEach(item => {
  let code = item.innerText;
  if (/^\@/.test(code)) ruleArr.push(code);
  else if (/\@/.test(code)) descriptorArr.push(code);
});
console.log(ruleArr.length, descriptorArr.length); // 25, 44