「趣学前端」@layer，你好，CSS的新特性

前言

之前开发者大会上，大佬分享@layer这个新特性的时候，就想着要研究一下它的具体用法。

在开始freestyle之前，先来看一下规范：

这是一个实验中的功能。
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSS规则

MDN中对CSS规则的定义如下

At-rules是指导 CSS 如何表现的CSS 语句。它们以 at 符号 ' @' ( U+0040 COMMERCIAL AT) 开头，后跟一个标识符，包括直到下一个分号 ' ;' ( U+003B SEMICOLON) 或下一个CSS 块（以先到者为准）的所有内容。

先来看几个眼熟的CSS规则：@media、@font-face、@keyframes、@viewport、@import。

@layer

知识点

@layer声明了一个 级联层， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。

创建级联层的方式有以下三种，支持级联层嵌套和匿名。以下知识点来自MDN。

语法	含义
块级创建方式	创建了一个块级的 @规则，其中包含作用于该层内部的 CSS 规则。
通过 @import 来创建	一个级联层同样可以通过 @import 来创建，规则存在于被引入的样式表内。
命名创建方式	可以创建带命名的级联层，但不指定任何样式。 或者，多个命名层也可以被同时定义。
嵌套层	级联层允许嵌套
匿名层	如果创建了一个级联层但并未指定名字，那么则称为创建了一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。

使用试验

类型	效果展示	实现方案
通过 @import 来创建		级联层样式写在了外部的css文件中，通过@import 引入。
多个命名层		如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。
非@layer与@layer的优先级		非@layer与@layer拥有相同的属性时，非@layer的优先级更高。
嵌套优先级		嵌套优先级 @layer common 大于 @layer layer3。 把@layer common这个遮住，其实就是非@layer与@layer的优先级，这样是不是好理解了。
匿名优先级		匿名的优先级取决于匿名层所在的位置 1、匿名层在@layer common和@layer layer1 前面时，优先级是@layer common > @layer layer1 > @layer 匿名。 2、匿名层在@layer common和@layer layer1 后面时，优先级是@layer 匿名 > @layer common > @layer layer1 。 3、@layer common > @layer layer1的原因是，多个命名层时，最后一层中的将优先于其他层。

总结

@layer目前还是非标准特性，正式生产不建议使用。

不过试验使用起来，还挺有趣的，今天也特别有收获的一天。

CSS样式真有趣，光写样式我感觉自己能写一天。

偶尔翻出来珍藏的技术书，读几章，有了新想法的感觉真不赖。