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)
常见的一些@规则包括:
1、@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方向) | ||
|
|
|