❕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个）
@charset
字符集（均为非嵌套语句）
@import
外部导入
@namespace
定义 XML 命名空间
2. 条件组（4个）
@media
媒体查询
@supports
特性查询
@container
容器查询
@document（已废弃）
根据 URL
3. 动画（2个）
@keyframes
@scroll-timeline
4. 字体（9个）
@font-face
@font-feature-values
@swash
@annotation
@ornaments
@stylistic
@styleset
@character-variant
@font-palette-values
5. 打印（5个）
@page
@top-center
@bottom-center
@left-bottom
@right-bottom
6. 其它（4个）
@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/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, 44Last updated