2024年CSS @规则(At-rules)新增数量超过过去十年的总和，
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(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） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
|
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
|
|
|
|
|
| ||
|
| ||
| Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一） | ||
|
|
|
|
| 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | ||
|
|
|
|
| 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） | python爱心源代码集锦（18款） | |
|
|
|
|
|
|
| |
| 用代码过中秋，python海龟月饼你要不要尝一口？ | ||
|
|
|
|
| 草莓熊python turtle绘图（风车版）附源代码 | ||
|
|
| |
| 皮卡丘python turtle海龟绘图（电力球版）附源代码 | ||
|
|
|
|
| 2024年6月多家权威机构____编程语言排行榜__薪酬状况 | ||
|
|
|
|
| 【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向) | ||
|
|
|
|
扫一扫
4014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
