2022 CSS新特性之抛砖引玉

[作者]：新语

本文只简单介绍了几种重要的CSS新特性，其他新特性可以去 这里 进行阅读学习。
虽然部分特性还处在实验阶段，但并不妨碍咱们前端君提前预习一波，毕竟前端学无止境！

@Layer

兼容性

目前还是一个实验中的功能，Chromium 99、Firefox 97 和 Safari 15.4 Beta 已支持该特性，所以可以先简单了解下~

为什么会有它

在我们写样式的时候，常常需要对已有的样式进行覆盖操作：

.sub-btn { 
  color: red; 
}
.sub-btn { 
  color: blue; 
}
复制代码

在这样的情况下，后面的就是实际被使用的规则。最终生效的规则是按照如下的优先级进行排序的：

• 第一优先级：!important会覆盖页面内任何位置的元素样式
• 内联样式，如style="color: green"，权值为1000
• ID选择器，如#app，权值为0100
• 类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
• 标签、伪元素选择器，如div::first-line，权值为0001
• 通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
• 继承的样式没有权值

假设我们在覆盖别人的样式时，总是用最高优先级 !important，最终会越写越乱难以维护，为了更好的管理，@layer 出现了。

概念

@layer 是 @规则 中的一个新特性，声明了一个级联层，同一个级联层内的规则将会在一起。

语法

可以通过三种方式创建级联层。 第一种，直接创建，其中包含该级联层内的CSS：

@layer utilities {
  .padding-sm {
    padding: .5rem;
  }

  .padding-lg {
    padding: .8rem;
  }
}
复制代码

第二种，通过 @import 创建，CSS规则存在于引入的样式表：

@import(utilities.css) layer(utilities);
复制代码

第三种，你可以先创建带有命名的级联层，但不指定任何样式，后面可以再去定义CSS：

@layer theme, layout, utilities
  
// other style
    
@layer theme {
  .class1 {
    color: blue;
  }
}
@layer layout {
  .class1 {
    color: green;
  }
}
@layer utilities {
  .class1 {
    color: red;
  }
}
复制代码

这样的好处是级联层最初的定义顺序决定了它的优先级。在同一声明中的多个级联层被指定，那么最后一层的将优先于其他层，上面的优先级就是： utilities > layout > theme 后面定义的级联层样式会叠加到对应的级联层当中。上面的例子中 utilities中的颜色会被应用。

匿名层

除了上面三种创建，我们还可以创建匿名级联层，除创建后无法向其添加规则外，该层和其他命名层功能一致。

@layer {
  p {
    margin-block: 1rem;
  }
}
复制代码

优先级

加上级联层后，我们的优先顺序变成了这样：

• User Agent normal (最低优先级)
• Local User @layer
• Local User normal
• Author @layers
• Author normal
• Author !important
• Author @layer !important
• Local User !important
• User Agent !important (最高优先级)

这里有一个有趣的地方，正常情况下 Author normal > Author @layers，但是在 !important时两者优先级是反过来的：Author @layer !important > Author !important 。 因为 !important 破坏了样式表中的正常级联并反转了正常的层级优先级。

场景

我们在组件库覆盖样式时，可以通过预先规定层级顺序来决定样式表的优先级，可参考chrome dev例子： codepen.io/web-dot-dev…

/* Base */
@import '../styles/base/normalize.css' layer(base); /* normalize or rest file */
@import '../styles/base/base.css' layer(base); /* body and base styles */
@import '../styles/base/theme.css' layer(theme); /* theme variables */
@import '../styles/base/typography.css' layer(theme); /* theme typography */
@import '../styles/base/utilities.css' layer(utilities); /* base utilities */

/* Layouts */
@import '../styles/components/post.css' layer(layouts); /* post layout */

/* Components */
@import '../styles/components/cards.css' layer(components); /* imports card */
@import '../styles/components/footer.css' layer(components); /* footer component */
复制代码

更多参考

有关级联层还有其他知识可以学习，比如级联层的嵌套相关、兼容性等，可以在以下网站找到：

• developer.chrome.com/blog/cascad…
• developer.mozilla.org/zh-CN/docs/…
• caniuse.com/?search=%40…

overscroll-behavior

兼容性

概念

控制浏览器过渡滚动的表现，也就是滚动到边界的一种表现。

使用

什么意思呢，举个例子：下面的文本框由于文字过多，是可以滚动的。在滚动到顶部或者底部时，你会发现你继续滚动会带着外层的页面滚动，这就是一种滚动链。

我们勾选 overscroll-behavior: contain;后，你会发现，在滚动文本框到边界时，不会再触发外层页面的滚动 ~

参考资料

developer.mozilla.org/zh-CN/docs/…

accent-color

兼容性

概念

可以在不改变浏览器默认表单组件基本样式的前提下重置组件的颜色。 目前支持以下几种这些 HTML 控件元素：

• checkbox
• radio
• range
• progress

每个都有浅色和深色配色方案，可在 accent-color.glitch.me 处预览。

使用

参考资料

• web.dev/accent-colo…
• www.zhangxinxu.com/wordpress/2…