2024年CSS @规则(At-rules)新增数量超过过去十年的总和，

CSS @规则(At-rules)详解系列目录

本文目录：

零、时光宝盒

一、CSS @规则(At-rules)发展状况

二、什么是CSS @规则(At-rules)

2.1、一些背景

2.2、概念

2.3、CSS@规则(At-rules)

@规则(At-rules)索引：(目前在用的有18条 @规则(At-rules)）

三、参考资料

零、时光宝盒

（https://blog.csdn.net/weixin_69553582  逆境清醒）

歌词：

《不要慌太阳下山有月光》

也许你身处黑暗之中，快记不清当初的梦。
低下头两手空空，怅然若失般心痛，
世上每个人花期不同，
你也会和美好相逢。
张开双臂迎向风，
那时你一定更好更勇更从容，
不要迷茫 不要慌张，太阳下山 还有月光，
它会把人生路照亮，陪你到想去的地方，
不要彷徨 不要沮丧，月亮睡了 还有朝阳。
抬头看天一定会亮，
爱的人会如愿陪在你身旁。

      逆境清醒

2024.10.10

一、CSS @规则(At-rules)发展状况

　　一年里CSS规则新增数量超过过去十年的总和。没错，2024年：CSS @规则(At-rules)新增数量超过过去十年的总和。

　　截至今天（2024年10月10日），至少有一个主要浏览器支持这些CSS At-Rules规则。如果我们看看CSSWG工作草案中最初定义每条规则的年份，我们可以看到它们都是以相当一致的速度发布的：

（图片来源：css-tricks）

　　FWPD中每年的at规则数量。它们都是以平均每年1个的速度增加的，最高的是2021年的4个。然而，如果我们检查每年每个浏览器支持的at规则的数量，我们可以看到浏览器活动的巨大差异：

（图片来源：css-tricks）

　　如果我们只关注去年每个主要浏览器在rule上的出货量，我们会注意到2024年迄今为止为我们带来了惊人的7个at rules！

（图片来源：css-tricks） 

　　至少在一个主要浏览器中支持的at规则数量。2024年获得支持的有7个。

　　最初没有功能，因为一开始没有太多的at规则。现在有了比过去十年加起来更多的新规则，就在上周，Chrome团队将该功能的状态从“新”更新为“已分配”，这可能并非巧合！

　　at-rule（）为我们拥有和没有的CSS功能添加了上下文。如果没有别的，它肯定了CSS正在快速发展的感觉，就像CSS 3首次发布以来我们从未见过的那样。由此可以知道，在未来会越来越重要的 @规则 规则。

二、什么是CSS @规则(At-rules)

2.1、一些背景

　　大约在1998年，当CSS 2推荐标准发布时，at-rule（）是唯一一个被纳入CSS规范的at规则。

在2011年引入CSS 2.1推荐标准之前，情况一直如此。

　　当然，还有其他一些规则，已经在各自的模块中首次亮相。此时，CSS放弃了语义版本控制，规范并没有给出整体的真实情况，而是按功能组织的单个模块。

　　@规则(At-rules)于2011年在CSS条件规则模块级别3中发布——级别1和级别2没有正式存在，但引用了最初的CSS 1和2建议。

　　直到2015年，@规则(At-rules)才在大多数浏览器中得到支持，当时，现有的at规则已经得到了广泛的支持。

2.2、概念

CSS @规则(At-rules)：

　　CSS @规则（At-rules）是CSS中用于控制样式表行为的特殊指令，是用来指定特定样式和行为的一种方式。

　　这些指令以一个关键词（一个@字符）开头，后跟一个标识符，并包括直到下一个分号（;）或下一个声明块（以先到者为准）的所有内容。

　　@规则可以用来定义媒体查询、字体样式、动画、变量等。

CSS @规则(At-rules)语法：
 

/* 一般结构 */
@identifier (RULE);

/* 示例：通知浏览器使用 UTF-8 字符集 */
@charset "utf-8";

2.3、CSS@规则(At-rules)

常见的一些@规则包括：

 １、@media

　　@media:规则用于根据设备的特性，如屏幕宽度、设备类型等，应用不同的样式。可以用于根据不同的媒体类型（如屏幕、打印等）和特定的条件来应用不同的样式。

例如：CSS 的屏幕宽度媒体查询，大都写成这样：

@media screen and (min-width: 800px) {
  div {
    padding: 1rem 3rem;
  }
}

@media screen and (max-width: 800px) {
  body {
    font-size: 14px;
  }
}

　　这里表示的是与屏幕宽度相关的样式设置，上面的代码表示当屏幕宽度大于 800px 时，内部的样式代码块才能生效。

2、@font-face:

　　@font-face:规则用于定义自定义字体。@font-face可以在网页上使用非系统字体。

@font-face {
  font-family: 'CustomFont';
  src: url('font.ttf');
}

3、@keyframes:

　　@keyframes: 规则用于定义动画序列的关键帧，用于创建动画效果，定义动画中的关键帧和属性变化。

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

4、@import

　　@import:规则用于引入外部样式表（引入其他样式表）。@import类似于HTML中的标签。

@import url('styles.css');

5、@supports:

　　@supports: 用于检测浏览器是否支持某些CSS特性。

例如：

@supports (display: grid) {
  .grid-container {
    display: grid;
  }
}

@规则(At-rules)索引：(目前在用的有18条 @规则(At-rules)）

点击索引里每个规则的【点击查看介绍》》】查看该规则的详细介绍，

后续更新的文章会逐一介绍每个@规则(At-rules)的用法。

三、参考资料

css-tricks官网

       推荐阅读：

（https://blog.csdn.net/weixin_69553582  逆境清醒）