「趣学前端」@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样式真有趣,光写样式我感觉自己能写一天。
偶尔翻出来珍藏的技术书,读几章,有了新想法的感觉真不赖。
关于作者
转载自:https://juejin.cn/post/7135250840809373726