关于前端:现代-CSS-指南-atrule-规则扫盲

2次阅读

共计 15370 个字符，预计需要花费 39 分钟才能阅读完成。

大部分同学都用过 CSS 的屏幕宽度媒体查问，像是这样：

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

这里示意的是与屏幕宽度相干的款式设置，下面的代码示意当屏幕宽度大于 900px 时，外部的款式代码块能力失效。

其实不仅仅是下面的屏幕宽度媒体查问，在 CSS 中，存在大量的以 @ 符号结尾的规定。称之为 @规定(at-rule)。本文就将介绍一下除去媒体查问之外，其余有意思的且在将来会越来越重要的 @规定 规定。

OK，什么是 @规定（at-rule）呢？

一个 at-rule 是一个 CSS 语句，以 at 符号结尾，‘@‘ (U+0040 COMMERCIAL AT), 后跟一个标识符，并包含直到下一个分号的所有内容，‘;‘ (U+003B SEMICOLON), 或下一个 CSS 块，以先到者为准。

除去咱们最为相熟的 @media 之外，CSS 还有哪些 @规定呢？

上面是一些 @规定，由它们的标示符指定，每种规定都有不同的语法：

@charset, 定义样式表应用的字符集。
@import, 通知 CSS 引擎引入一个内部样式表。
@namespace, 通知 CSS 引擎必须思考 XML 命名空间。

上面是一些嵌套 @ 规定，是嵌套语句的子集，不仅能够作为样式表里的一个语句，也能够用在条件规定组里：

@media，如果满足媒介查问的条件则条件规定组里的规定失效。
@page，形容打印文档时布局的变动。
@font-face，形容将下载的内部的字体。
@keyframes，形容 CSS 动画的两头步骤。
@supports, 如果满足给定条件则条件规定组里的规定失效。
@document，如果文档样式表满足给定条件则条件规定组里的规定失效。(推延至 CSS Level 4 标准)
@viewport（已废除），规定让咱们能够对文档的大小进行设置。这个个性次要被用于挪动设施，然而也能够用在反对相似“固定到边缘”等个性的桌面浏览器，如微软的 Edge。
@counter-style — 一个 @counter-style 规定定义了如何把一个计数器的值转化为字符串示意。
@font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant)，容许作者在 font-variant-alternates 中应用通用名称，用于在 OpenType 中以不同形式激活性能。它容许在应用几种字体时简化 CSS。
@property（实验性），是 CSS Houdini API 的一部分，它容许开发者显式地定义他们的 css 自定义属性, 容许进行属性类型查看、设定默认值以及定义该自定义属性是否能够被继承。
@layer，申明了一个级联层，同一层内的规定将级联在一起，这给予了开发者对层叠机制的更多管制。

除去咱们十分相熟的 @media、keyframes 以及 @font-face，像是 @supports、@counter-style、@property、@layer 等都曾经或将在将来 Web 利用中表演无足轻重的作用。

上面，就追随本文，一起对它们一探到底。你也能够跳过你曾经把握的，翻到对应你还不太理解的 @ 规定下，迅速理解它们。

这三个能够放在一起解说，他们的语法比较简单，也绝对好了解。其中：

@charset：指定样式表中应用的字符编码。它必须是样式表中的第一个元素，而后面不得有任何字符。

像是这样：

// style.css
@charset "UTF-8";

留神，如果有多个 @charset @规定被申明，只有第一个会被应用。

很多人会有纳闷，这个申明到底有什么用呢？

事实上，如果 CSS 文件中有任何非 ASCII 文本，例如字体名称，伪元素的 content 属性值、选择器等中的非 ASCII 字符，都须要确保 CSS 解析器晓得如何转换字节正确转换为字符，以便它了解 CSS 代码。

所以如果当你发现你的伪元素 content 中插入了一些内容，然而通过打包编译后它乱码了，很有可能是因为你忘了申明这个字符集。

@import：用于从其余样式表导入款式规定。这些规定必须先于所有其余类型的规定，@charset 规定除外

@import 有两种语法：

url() 内蕴含 style sheet 的 URI
间接写 style sheet 的 URI 的字符串

还能够间接在前面定义媒体查问规定，像是这样：

@import 'custom.css';
@import url('landscape.css');
@import url('landscape.css') screen and (orientation:landscape);

正当的应用 @import 其实也是有益处的：

能够正当的管制 CSS 文件的大小
更好的分治与复用

很多人可能会常常看到，网络上会有各种 抵制 @import的文章，不过既然设计了 @import，总有它的有用之处，不能过于相对。应用 @import 影响页面性能的中央次要体现在两个方面：

影响浏览器的并行下载
优先级问题，款式相互笼罩
导致页面闪动

这里能够简略解释一下。首先咱们得晓得，加载页面时，link 标签引入的 CSS 被同时加载，而 @import 引入的 CSS 将在页面加载结束后被加载。

CSS 解析引擎在对一个 CSS 文件进行解析时，如在文件顶部遇到 @import 规定，将被替换为该 @import 导入的 CSS 文件中的全副款式。而 @import 内的规定其后被加载，却会在加载结束后置于样式表顶部，最终渲染时，如果存在同名同优先级款式，会被上面的同名款式层叠，导致所谓的优先级抵触。

实际上，浏览器渲染的动作个别会执行屡次的。最初一次渲染，肯定是基于之前加载过的所有款式整合后渲染树进行绘制页面的，
而因为 @import 内的规定的加载机会问题，会在页面内容加载完后再加载。相当于把 CSS 放在了 body 底部，从而造成了页面的闪动。当网络较差时，闪动体验更为显著。

@namespace：@namespace 是用来定义应用在 CSS 样式表中的 XML 命名空间的 @规定。定义的命名空间能够把通配、元素和属性选择器限度在指定命名空间里的元素。

并且，任何 @namespace 规定都必须在所有的 @charset 和 @import规定之后，并且在样式表中，位于其余任何款式申明之前。

总的来说，@namespace 在现如今的 CSS 生态中，属于十分冷门的一个规定。基本上我从业这么久，没怎么见过这个属性的具体应用。

如果你对它的确感兴趣，能够看看这篇详解 — spacing-out-on-css-namespaces.

`@media`、`@keyframes`、`@font-face`

这三个 @ 规定，大家应该十分相熟。

@media：如果满足媒介查问的条件则条件规定组里的规定失效
@keyframes：定义 CSS 动画的两头步骤
@font-face：形容将下载的内部的字体

@keyframes 和 @font-face 这两个大家必定十分相熟。

然而 @media 其实内有乾坤！除了屏幕宽度媒体查问外，其实还存在十分多不同性能的媒体查问！

上面我会列出一些在将来，我认为会越来越被提及应用到的 @media 规定。

prefers-reduced-motion 规定查问用于削弱动画成果，除了默认规定，只有一种语法取值 prefers-reduced-motion: reduce，开启了该规定后，相当于通知用户代理，心愿他看到的页面，能够删除或替换掉一些会让局部视觉静止障碍者不适的动画类型。

标准原文：Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.

vestibular motion disorders 是一种视觉运动障碍患者，中文我只能谷歌翻译，翻译进去是 前庭运动障碍，我感觉不太对，谷歌了一下是一种会导致眩晕的一类病症，譬如一个动画一秒闪动屡次，就会导致患者的不适。

应用办法，还是下面那段代码：

.ele {animation: aniName 5s infinite linear;}

@media (prefers-reduced-motion: reduce) {
    .ele {animation: none;}
}

如果咱们有一些相似这样的动画：

在用户开启了 prefers-reduced-motion: reduce 时，就应该把它去掉。那么该如何开启这个选项呢？MDN — prefers-reduced-motion 给出的是：

在 GTK/Gnome 中，能够通过 GNOME Tweaks（在“通用”或“外观”菜单中，取决于具体版本）的配置，设置 gtk-enable-animations 的值为 false
能够在 GTK 3 的配置文件中的 [Settings] 模块下设置 gtk-enable-animations = false
在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画
在 Windows 7 中：控制面板 > 轻松获取 > ? 是计算机更易于查看 > 敞开不必要动画
在 MacOS 中：零碎偏好 > 辅助应用 > 显示 > 缩小静止
在 iOS 上：设置 > 通用 > 辅助性 > 缩小静止
在 Android 9+ 上：设置 > 辅助性 > 移除动画

prefers-color-scheme 还是十分好了解的，它用于匹配用户通过操作系统设置的亮堂或夜间（暗）模式。它有两个不同的取值：

prefers-color-scheme: light：亮堂模式
prefers-color-scheme: dark：夜间（暗）模式

语法如下，如果咱们默认的是亮堂模式，只须要适配夜间模式即可：

body {
    background: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    body {
        background: black;
        color: white;
    }
}

当然，上述只是 CSS 代码示意，要做到两套主题的切换必定不是这么简略，办法也很多，本文不赘述，读者能够自行理解各种实现主题切换，或者是明暗切换的计划。

prefers-contrast 该 CSS 媒体性能是用来检测用户是否要求将网页内容以更高或者更低的对比度进行出现。其中：

prefers-contrast: no-preference：默认值，不作任何变动
prefers-contrast: less：心愿应用对比度更低的界面
prefers-contrast: more：心愿应用对比度更高的界面

以 prefers-contrast: less 为例子，语法如下：

body {
    background: #fff; // 文字与背景对比度为 5.74
    color: #666;
}

// 晋升对比度
@media (prefers-contrast: more) {
    body {
        background: #fff; // 文字与背景对比度为 21
        color: #000;
    }
}

下面只是伪 CSS 代码，具体可能须要对具体的一些元素进行解决，或者应用 filter: contrast() 全局对立解决，当开启配置时，用于实现相似这样的性能：

是否曾关怀过页面内容的展现，应用的色彩是否失当？色弱、色盲用户是否失常看清内容？良好的色调应用，在任何时候都是无益的，而且不仅仅局限于对于色弱、色盲用户。在户外用手机、阳光很强看不清，合乎无障碍规范的高清晰度、高对比度文字就更容易浏览。

这里就有一个概念 — 色彩对比度，简略地说，形容就是两种色彩在亮度（Brightness）上的差异。使用到咱们的页面上，大多数的状况就是背景色（background-color）与内容色彩（color）的比照差别。

最权威的互联网无障碍标准 —— WCAG AA 标准规定，所有重要内容的色调对比度须要达到 4.5:1 或以上（字号大于 18 号时达到 3:1 或以上），才算领有较好的可读性。

prefers-reduced-transparency 该 CSS 媒体性能是用来检测用户是否要求缩小网页中的通明元素：

prefers-contrast: no-preference：默认值，不作任何变动
prefers-contrast: reduce：心愿界面元素存在尽可能少的通明元素

以 prefers-contrast: reduce 为例子，语法如下：

.ele {opacity: 0.5;}

// 缩小通明元素
@media (prefers-contrast: reduce) {
    .ele {opacity: 1;}
}

我在上一次，介绍这个性能的时候，它还是一片红色，然而短短半年，整个兼容性曾经有了很大的晋升！

对于局部网速较差的地区，或者流量很贵的状况，用户会心愿缩小页面中的流量申请，基于此有了 prefers-reduced-data。

prefers-reduced-data 该 CSS 媒体查问性能是用于告知用户代理，心愿缩小页面的流量申请。

prefers-reduced-data: no-preference：默认值，不作任何变动
prefers-reduced-data: reduce：心愿界面元素耗费更少的互联网流量

以 prefers-reduced-data: reduce 为例子，语法如下：

.ele {background-image: url(image-1800w.jpg);
}

// 升高图片品质
@media (prefers-reduced-data: reduce) {
    .ele {background-image: url(image-600w.jpg);
    }
}

当检测到用户开启了 prefers-reduced-data: reduce，咱们将提供压缩度更高，尺寸更小，耗费流量更少的图片。

当然，上述代码只是个示意，咱们能够做的其实有更多。

不过，这是仍处于实验室的性能，临时没有任何浏览器反对该媒体查问~ 😢

当然，从 Chrome 85+ 开始，能够通过开启 #enable-experimental-web-platform-features 实验室选项开启该性能！

`@supports` 个性检测

好，介绍完一些后续会十分重要从 @media 规定后，咱们来看看 @supports。

传统的 CSS 个性检测都是通过 javascript 实现的，然而现在，原生 CSS 即可实现个性检测的性能。

CSS @supports 通过 CSS 语法来实现个性检测，并在外部 CSS 区块中写入如果个性检测通过心愿实现的 CSS 语句。

@supports <supports_condition> {/* specific rules */}

举个例子：

div {position: fixed;}

@supports (position:sticky) {
    div {position:sticky;}
}

下面的例子中，position: sticky 是 position 的一个比拟新的属性，用于实现黏性布局，能够轻松实现一些以往须要 Javascript 能力实现的布局，然而不肯定在一些低端机型上兼容。

下面的写法，首先定义了 div 的 position: fixed，紧接着上面一句 @supports (position:sticky) 则是个性检测括号内的内容，如果以后浏览器反对 @supports 语法，并且反对 position:sticky 语法，那么 div 的则会被设置为 position:sticky。

咱们能够看到，@supports 语法的外围就在于这一句：@supports (...) {}，括号内是一个 CSS 表达式，如果浏览器判断括号内的表达式非法，那么接下来就会去渲染括号内的 CSS 表达式。除了这种最惯例的用法，还能够配合其余几个关键字：

`@supports not` && `@supports and` && `@supports or`

`@supports not` — 非

not 操作符能够放在任何表达式的后面来产生一个新的表达式，新的表达式为原表达式的值的否定。看个例子：

.container {
  translate: 50% 10%;
  rotate: 80deg;
  scale: 1.5;
}

// 如果不反对上述的语法，则 supports 内的语法失效
@supports not (scale: 1) {
  .container {transform: translate(50%, 10%) rotate(80deg) scale(1.5);
  }
}

因为增加了 not 关键字，所以与下面第一个例子相同，这里如果检测到浏览器不反对 transform 这种离开独自的写法 — scale: 1，则将 .container 的 transform 属性合在一起写，写成 transform: translate(50%, 10%) rotate(80deg) scale(1.5)。

对于 transform 的离开写法，如果你还不太理解，能够戳：解放生产力！transform 反对独自赋值扭转

`@supports and` — 与

这个也好了解，多重判断，相似 javascript 的 && 运算符符。用 and 操作符连贯两个原始的表达式。只有两个原始表达式的值都为真，生成的表达式才为真，反之为假。

当然，and 能够连贯任意多个表达式看个例子：

p {
    overflow: hidden;
    text-overflow: ellipsis;
}
@supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
    p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

下面同时，检测 @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) 了三个语法，如果同时反对，则设定三个 CSS 规定。这三个语法必须同时失去浏览器的反对，如果表达式为真，则能够用于实现多行省略成果：

CodePen Demo – @supportAnd

`@supports or` — 或

了解了 @supports and，就很好了解 @supports or 了，与 javascript 的 || 运算符相似，表达式中只有有一个为真，则生成表达式表达式为真。

看例子：

@supports (background:-webkit-linear-gradient(0deg, yellow, red)) or (background:linear-gradient(90deg, yellow, red)){
    div {background:-webkit-linear-gradient(0deg, yellow, red);
        background:linear-gradient(90deg, yellow, red)
    }
}

下面的例子中，只有检测到浏览器反对 background:-webkit-linear-gradient(0deg, yellow, red) 或者（or）background:linear-gradient(90deg, yellow, red) 其中一个，则给 div 元素增加突变。

CodePen Demo — @supports or

当然，关键字 not 还能够和 and 或者 or 混合应用。感兴趣的能够尝试一下。

兼容性来看，先看看 Can i use(更新至 2022/10/13) 吧：

大部分浏览器都曾经反对了，咱们曾经能够开始应用起来了，应用 @supports 实现渐进加强的成果。

`@counter-style` CSS 计数器

@counter-style：是一个 CSS at-rule，它让开发者能够自定义 counter 的款式。一个 @counter-style 规定定义了如何把一个计数器的值转化为字符串示意。

利用 @counter-style，咱们能够构建自定义的计数器款式。

当然，在 @counter-style 之前，CSS 还有一种实现简略计数器的标准，它由如下几个属性独特形成：

counter-reset：初始化计数器的值
counter-increment：在初始化之后，计数器的值就能够应用 counter-increment 来指定其为递增或递加
counter()：计数器的值能够应用 counter() 或 counters() 函数以在 CSS 伪元素的 content 属性中显示

咱们来看最简略的一个例子，咱们想实现一个 ul 布局，其中的 li 个数不定，然而均分每行的空间，并且可能主动带上序号，像是这样：

应用 counter-reset、counter-increment、counter() 这一套，十分的简略就能实现，像是这样：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul>
  // ... <li> 个数不定
</ul>

<ul>
  // ... <li> 个数不定
</ul>

给每个 li 元素标序号这个事件就能够交给 CSS 计数器：

ul {
  display: flex;
  justify-content: space-around;
  counter-reset: stepCount;
}
li {position: relative;}
li::before {
  position: absolute;
  counter-increment: stepCount 1;
  content: counter(stepCount); 
}

简略解释一下：

在 ul 的款式中，每次都会初始化一个 CSS 计数器 stepCount，默认值为 0
在 li::before 中的 counter-increment: stepCount 1 示意每次调用到这里，stepCount 的值加 1
最初通过 counter(stepCount) 将以后具体的计数值通过伪元素的 content 显现出来

OK，那么为什么有了上述的 CSS 计数器标准后，又新增了 @counter-style CSS 计数器标准呢？

`@counter-style` 的意义

这是因为，上述的 counter-reset、counter-increment、counter() 这一套更多的生成的数字类型的计数器。

然而，数字类型的计数器无奈满足以后全球化的排版的诉求。基于此，@counter-style 规定用一种凋谢的形式补救了这一毛病，在预约义的款式不能满足需要时，它能够使开发者自定义他们本人的计数器款式。

举个例子，咱们应用 MDN 上的例子作为示例：

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li>
</ul>

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
li {list-style: circled-alpha;}

这样，咱们就能够失去自定义的计数前缀：

有了这个，咱们就能够将上述的 symbols 替换成其余咱们喜爱我计数图形，譬如 emoji 图形：

@counter-style circled-alpha {
  system: fixed;
  symbols: 😀 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨;
  suffix: " ";
}
li {list-style: circled-alpha;}

看看成果：

CodePen Demo — @counter-style

当然，理论应用过程中，@counter-style 的语法会有一点点简单，可选的属性也有很多，更为具体的能够认真学习下文档 — MDN — @counter-style

`@property` CSS 自定义属性

@property CSS at-rule 是 CSS Houdini API 的一部分, 它容许开发者显式地定义他们的 CSS 自定义属性，容许进行属性类型查看、设定默认值以及定义该自定义属性是否能够被继承。

失常而言，咱们定义和应用一个 CSS 自定义属性的办法是这样的：

:root {--whiteColor: #fff;}

p {color: (--whiteColor);
}

而有了 @property 规定之后，咱们还能够像下述代码这样去定义个 CSS 自定义属性：

<style>
@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

p {color: var(--property-name);
}
</style>

简略解读下：

@property --property-name 中的 --property-name 就是自定义属性的名称，定义后可在 CSS 中通过 var(--property-name) 进行援用
syntax：该自定义属性的语法规定，也能够了解为示意定义的自定义属性的类型
inherits：是否容许继承
initial-value：初始值

其中，@property 规定中的 syntax 和 inherits 描述符是必须的。

当然，在 JavaScript 内定义的写法也很简略，顺便一提：

<script>
CSS.registerProperty({
  name: "--property-name",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee"
});
</script>

为什么要应用这么麻烦的语法定义 CSS 自定义属性呢？CSS Houdini 定义的自定义变量的劣势在哪里？

咱们来看这样一个例子，咱们有这样一个突变的图案：

<div></div>

div {background: linear-gradient(45deg, #fff, #000);
}

咱们革新下上述代码，改为应用 CSS 自定义属性：

:root {
    --colorA: #fff;
    --colorB: #000;
}
div {background: linear-gradient(45deg, var(--colorA), var(--colorB));
}

失去的还是同样的一个突变图：

咱们再加上一个过渡成果：

:root {
    --colorA: #fff;
    --colorB: #000;
}
div {background: linear-gradient(45deg, var(--colorA), var(--colorB));
    transition: 1s background;
    
    &:hover {
        --colorA: yellowgreen;
        --colorB: deeppink;
    }
}

看看鼠标 Hover 的时候，会产生什么：

尽管咱们设定了 1s 的过渡动画 transition: 1s background，然而很惋惜，CSS 是不反对背景渐变色的间接过渡变动的，咱们失去的只是两帧之间的间接变动。

OK，接下来咱们就应用本文的配角，应用 Houdini API 中的 CSS 自定义属性替换本来的 CSS 自定义属性。

简略进行革新一下，应用 color syntax 语法类型：

@property --houdini-colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
@property --houdini-colorB {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
.property {background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
    transition: 1s --houdini-colorA, 1s --houdini-colorB;
    
    &:hover {
        --houdini-colorA: yellowgreen;
        --houdini-colorB: deeppink;
    }
}

咱们应用了 @property 语法，定义了两个 CSS Houdini 自定义变量 --houdini-colorA 和 --houdini-colorB，在 hover 变动的时候，扭转这两个色彩。

须要关注的是，咱们设定的过渡语句 transition: 1s --houdini-colorA, 1s --houdini-colorB，在这里，咱们是针对 CSS Houdini 自定义变量设定过渡，而不是针对 background 设定过渡动画，再看看这次的成果：

Wow，胜利了，渐变色的变动从两帧的逐帧动画变成了补间动画，实现了从一个渐变色过渡到另外一个渐变色的成果！而这，都得益于 CSS Houdini 自定义变量的弱小能力！

CodePen Demo — CSS Houdini 自定义变量实现渐变色过渡动画

CSS @property 规定的弱小之处在于，很多以往无奈应用 CSS 进行动画的成果，现在，借助它都能够实现！

更多 CSS @property 的用法，你能够戳 CSS @property，让不可能变可能

`@layer`

@layer 堪称是 CSS 圈 2022 年最受注目的新个性。

它的呈现，目标在于让大型项目中的 CSS 文件及内容，能够失去更好的管制和治理。

CSS @layer 从 CSS Cascading and Inheritance Level 5 被标准定义。

何为 CSS @layer？简略而言，CSS @规定中的 @layer 申明了一个级联层，同一层内的规定将级联在一起，这给予了开发者对层叠机制的更多管制。

语法也非常简单，看这样一个例子：

@layer utilities {/* 创立一个名为 utilities 的级联层 */}

这样，咱们就创立一个名为 utilities 的 @layer 级联层。

@layer 级联层如何应用呢？

@layer 级联层最大的性能，就是用于管制不同款式之间的优先级。

看上面这样一个例子，咱们定义了两个 @layer 级联层 A 和 B：

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {background: blue;}
}
@layer B {
    div {background: green;}
}

因为 @layer B 的程序排在 @layer A 之后，所以 @layer B 内的所有款式优先级都会比 @layer A 高，最终 div 的色彩为 green：

当然，如果页面内的 @layer 太多，可能不太好记住所有 @layer 的程序，因而，还有这样一种写法。

咱们能够同时命名多个 @layer 层，其后再补充其中的款式规定。

<div></div>

@layer B, C, A;
div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {background: blue;}
}
@layer B {
    div {background: green;}
}
@layer C {
    div {background: orange;}
}

上述代码，咱们首先定义了 @layer B, C, A 三个 @layer 级联层。而后再前面的 CSS 代码中补充了每个级联层的 CSS 代码，然而款式的优先级为：

A > C > B

因而，最终的 div 的色彩值为 @layer A 中定义的色彩，为 blue：

到这里，CSS @layer 的作用能够清晰的被窥见。

利用 CSS @layer，咱们能够将 CSS 不同模块划入不同的 @layer 中，利用先后顺序，十分好的去管制全局的款式优先级。

CSS @layer 的诞生，让咱们有能力更好的划分页面的款式层级，更好的解决外部款式与内部援用款式的优先级程序，属于比拟重大的一次变革。

这里只是非常简单的介绍了 @layer 规定，更具体的，你能够戳这里：2022 年最受注目的新个性 CSS @layer 到底是个啥？

`@container` 容器查问

@container：提供了一种，基于容器的可用宽度来扭转布局的形式。

容器查问也是一个十分新且重要的个性，补救了过往媒体查问的有余。

在之前，响应式有这么个掣肘。同一 DOM 的不同布局状态如果想要变动，须要依赖诸如 媒体查问 来实现。

像是这样：

通过浏览器视窗大小的变动，借助媒体查问，实现不一样的布局。

然而，在现如今，大部分 PC 端页面应用的是基于 Flex/Grid 的弹性布局。

很多时候，当内容数不确定的时候，即使是雷同的浏览器视窗宽度下，元素的布局及宽度可能也是不统一的。

思考上面这种状况：

<!-- 状况一  -->
<ul class="wrap">
    <li></li>
    <li></li>
    <li></li>
</ul>
<!-- 状况二  -->
<ul class="wrap">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
li {
    width: 190px;
    height: 100px;
    flex-grow: 1;
    flex-shrink: 0;
}

这种状况下，如果须要在不同宽度下对最初一个元素做一下解决，传统形式还是比拟麻烦的。

在这种状况下，容器查问（CSS Container Queries）就应运而生了！

容器查问它给予了 CSS，在不扭转浏览器视口宽度的前提下，只是依据容器的宽度变动，对布局做成调整的能力。

还是下面的例子，简略的代码示意：

<div class="wrap">
    <div class="g-container">
        <div class="child">Title</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    </div>
</div>

.wrap {
    width: 500px;
    resize: horizontal;
    overflow: auto;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
}
.wrap {
    /* CSS CONTAINER */
    container-name: wrap;
    container-type: inline-size;
}
@container wrap (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
}

像是这样，咱们通过 resize: horizontal 来模仿单个容器的宽度变动，在这种状况下，容器查问可能做到在不同宽度下，扭转容器外部的布局。

这样，就简略实现了一个容器查问性能：

留神，认真和下面的例子作比照，这里，浏览器的视口宽度是没有变动的，变动的只是容器的宽度！

媒体查问与容器查问的异同，通过一张简略的图看看，外围的点在于容器的宽度发生变化时，视口的宽度不肯定会发生变化：

咱们简略拆解下上述的代码，十分好了解。

在 .warp 的款式中，通过 container-name: wrap 注册一个容器
注册完容器之后，便能够通过 @container wrap () 容器查问语法，在外部写入不同状况下的另外一套款式
这里 @container wrap (max-width: 400px) {} 的意思便是，当 .wrap 容器的宽度小于 400 px 时，采纳外部定义的款式，否则，应用内部默认的款式

对于容器查问更为具体的语法，我倡议还是上 MDN 或者标准具体看看 — MDN — CSS Container Queries

`@scroll-timeline`

在之前，我介绍了 CSS 最新的个性 @scroll-timeline，譬如这两篇文章：

革命性翻新，动画杀手锏 @scroll-timeline
超酷炫的转场动画？CSS 轻松拿下！

@scroll-timeline 可能设定一个动画的开始和完结由滚动容器内的滚动进度决定，而不是由工夫决定。

意思是，咱们能够定义一个动画成果，该动画的开始和完结能够通过容器的滚动来进行管制。

利用它，咱们能够应用纯 CSS 实现页面滚动与 CSS 动画的联合，像是这样：

遗憾的是，这个如此好的个性，最近曾经被标准废除，曾经不再举荐应用了：

意思是，即使目前有一些浏览器曾经反对了 @scroll-timeline，然而它很快又将要退出历史舞台。不再倡议再应用这个 at-rule 规定。

这里，@scroll-timeline 尽管被废除了，然而 CSS 将会换一种实现形式卷土重来。

到这里，其实还有几个十分冷门且不太实用的 at-rule 规定，譬如：

@color-profile：容许定义并命名一个色彩配置文件
@font-feature-values：次要是绝对字体性能的拓展

可能收集到材料太少，文档也绝对简陋，目前实用的场景太少，就不具体开展。

综上，能够看到，整个 at-rule 家族还是十分弱小的，引入了十分多新的个性及性能，让 CSS 生态愈发弱小。让 CSS 能够做到的事件越来越多，咱们也有理由期待将来 CSS 会在 Web 畛域表演愈发重要的角色。

正文完

前端

发表至：前端

2022-11-03

0

关于前端:Vue源码之生命周期初始化阶段①

关于前端:Mob秒验一键登录注册新用户免费获得1000条

关于前端:JavaScript-中的函数式编程函数组合和柯里化

关于前端:北斗监控概述之告警篇四

关于ios:不越狱下载未上架的APPios签名工具永久有效吗

关于前端:现代-CSS-指南-atrule-规则扫盲

at-rule @规定

@charset、@import、@namespace

`@media`、`@keyframes`、`@font-face`

prefers-reduced-motion 削弱动画成果

prefers-color-scheme 适配明暗主题

prefers-contrast 调整内容色调对比度

什么是色调对比度

prefers-reduced-transparency 缩小通明元素

prefers-reduced-data 缩小数据传输

`@supports` 个性检测

语法：

`@supports not` && `@supports and` && `@supports or`

`@supports not` — 非

`@supports and` — 与

`@supports or` — 或

Can i use？

`@counter-style` CSS 计数器

`@counter-style` 的意义

`@property` CSS 自定义属性

CSS @property 的劣势

应用 CSS @property 进行革新

`@layer`

通过 @layer 级联层治理款式优先级

`@container` 容器查问

容器查问的能力

`@scroll-timeline`

总结一下

站内搜索

关于前端:现代-CSS-指南-atrule-规则扫盲

at-rule @规定

@charset、@import、@namespace

@media、@keyframes、@font-face

prefers-reduced-motion 削弱动画成果

prefers-color-scheme 适配明暗主题

prefers-contrast 调整内容色调对比度

什么是色调对比度

prefers-reduced-transparency 缩小通明元素

prefers-reduced-data 缩小数据传输

@supports 个性检测

语法：

@supports not && @supports and && @supports or

@supports not — 非

@supports and — 与

@supports or — 或

Can i use？

@counter-style CSS 计数器

@counter-style 的意义

@property CSS 自定义属性

CSS @property 的劣势

应用 CSS @property 进行革新

@layer

通过 @layer 级联层治理款式优先级

@container 容器查问

容器查问的能力

@scroll-timeline

总结一下

站内搜索

`@media`、`@keyframes`、`@font-face`

`@supports` 个性检测

`@supports not` && `@supports and` && `@supports or`

`@supports not` — 非

`@supports and` — 与

`@supports or` — 或

`@counter-style` CSS 计数器

`@counter-style` 的意义

`@property` CSS 自定义属性

`@layer`

`@container` 容器查问

`@scroll-timeline`