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中的<link>标签。

@import url('styles.css');

5、@supports:

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

例如：

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

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

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

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

	名 称	用 途	状态
✨	@charset	定义样式表使用的字符集。 点击查看介绍》》
✨	@color-profile	定义并命名了一个颜色配置文件，该配置文件可以在 color() 函数中使用来指定颜色。 点击查看介绍》》
✨	@container	容器查询，允许我们根据容器的大小或样式将样式应用于其他元素。 @container(Size Queries) @container(Style Queries) 点击查看介绍》》
✨	@counter-style	定义不属于预定义样式集的特定计数器样式。（在候选推荐阶段，仅在 Gecko 中实现）
✨	@document	条件组规则，如果应用样式表的文档满足给定条件的标准，则该规则将应用其内容。已经弃用（推迟至 CSS Level 4 规范）	弃用
✨	@font-face	描述要下载的外部字体的方面。
✨	@font-feature-values	（加上 @swash 、 @ornaments 、 @annotation 、 @stylistic 、 @styleset 和 @character-variant ） — 在 font-variant-alternates 中为 OpenType 中以不同方式激活的功能定义通用名称。（在候选推荐阶段，仅在 Gecko 中实现）	候选
✨	@font-palette-values
✨	@import	告诉 CSS 引擎包含外部样式表。
✨	@keyframes	描述 CSS 动画序列中中间步骤的方面。
✨	@layer	声明级联层并定义多个级联层情况下的优先顺序。
✨	@media	条件组规则，如果设备满足使用媒体查询定义的条件标准，则该规则将应用其内容。
✨	@namespace	告诉 CSS 引擎其所有内容都必须被视为以 XML 命名空间为前缀。
✨	@page	描述打印文档时将应用的布局更改方面。
✨	@position-try
✨	@property	描述自定义属性和变量的方面。（目前处于工作草案阶段）	候选
✨	@supports	条件组规则，如果浏览器满足给定条件的标准，则将应用其内容。
✨	@starting-style
✨	@scope
✨	@view-transition

三、参考资料

css-tricks官网

       推荐阅读：

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

​​​	​​​	​​​
给照片换底色（python+opencv）	猫十二分类	基于大模型的虚拟数字人__虚拟主播实例
​​​​	​​​​	​​​​
计算机视觉__基本图像操作（显示、读取、保存）	直方图（颜色直方图、灰度直方图）	直方图均衡化（调节图像亮度、对比度）
​​​​	​​​​	​​​​
语音识别实战（python代码）(一）	人工智能基础篇	计算机视觉基础__图像特征

​​​​
matplotlib 自带绘图样式效果展示速查（28种，全）
​​​​
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
​​​​	​​​​	​​​​
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦	Python 3D可视化（一）	让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)
​​​​	​​​​	​​​​
python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）	python爱心源代码集锦（18款）
​​​​	​​​​	​​​​
Python中Print()函数的用法___实例详解(全，例多）	Python函数方法实例详解全集(更新中...)	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
​​​​	​​​​
用代码过中秋，python海龟月饼你要不要尝一口？	python练习题目录
​​​​	​​​​	​​​​
草莓熊python turtle绘图（风车版）附源代码	​草莓熊python turtle绘图代码（玫瑰花版）附源代码	​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
​​​​	​​​​
巴斯光年python turtle绘图__附源代码	皮卡丘python turtle海龟绘图（电力球版）附源代码

​​​​	​​​​	​​​​
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)	2024年6月多家权威机构____编程语言排行榜__薪酬状况
​​​​​	​​​​	​​​​
手机屏幕坏了____怎么把里面的资料导出（18种方法）	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

​​​​
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
​​​​	​​​​	​​​​
2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
​​​​	​​​​	​​​​
【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

​​​​	​​​​	​​​​
tomcat11、tomcat10 安装配置（Windows环境）（详细图文）	Tomcat端口配置（详细）	Tomcat 启动闪退问题解决集（八大类详细）