likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 25

前言

之前开发者大会上,大佬分享@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 来创建「趣学前端」@layer,你好,CSS的新特性级联层样式写在了外部的css文件中,通过@import 引入。「趣学前端」@layer,你好,CSS的新特性
多个命名层「趣学前端」@layer,你好,CSS的新特性如果同一声明在多个级联层中被指定,最后一层中的将优先于其他层。「趣学前端」@layer,你好,CSS的新特性
非@layer与@layer的优先级「趣学前端」@layer,你好,CSS的新特性非@layer与@layer拥有相同的属性时,非@layer的优先级更高。「趣学前端」@layer,你好,CSS的新特性
嵌套优先级「趣学前端」@layer,你好,CSS的新特性嵌套优先级 @layer common 大于 @layer layer3。把@layer common这个遮住,其实就是非@layer与@layer的优先级,这样是不是好理解了。「趣学前端」@layer,你好,CSS的新特性
匿名优先级「趣学前端」@layer,你好,CSS的新特性「趣学前端」@layer,你好,CSS的新特性匿名的优先级取决于匿名层所在的位置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样式真有趣,光写样式我感觉自己能写一天。

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

关于作者