2022 CSS新特性之抛砖引玉
最新回答
与可爱私奔
2024-10-02 04:19:34
目前，@Layer功能还处于实验阶段，Chromium 99、Firefox 97 和 Safari 15.4 Beta 已开始支持这一特性，以下是对其的简要介绍。
在编写样式时，我们经常需要覆盖已有的样式。在这种情况下，后面的规则将实际被使用。最终生效的规则会根据以下优先级排序：
为了避免因使用最高优先级!important而导致样式难以维护，@layer特性应运而生。
@layer是@规则中的新特性，用于声明级联层，同一级联层内的规则将聚集在一起。
创建级联层有三种方式：直接创建、通过@import创建、先创建带有命名的级联层但不指定样式。
级联层的定义顺序决定了其优先级，在同一声明中的多个级联层，最后一层的优先级最高，优先级顺序为：utilities > layout > theme。
定义的级联层样式会叠加到对应的级联层中。例如，在上面的例子中，utilities中的颜色会被应用。
除了上述三种创建方式，还可以创建匿名级联层，该层与其他命名层功能一致，但创建后无法添加规则。
添加级联层后，优先顺序变为：Author normal > Author @layers，但在使用!important时，优先级相反：Author @layer !important > Author !important。
在组件库覆盖样式时，可以通过预先规定层级顺序来决定样式表的优先级。
overscroll-behavior功能用于控制浏览器过渡滚动的表现，即滚动到边界时的表现。
例如，在滚动文本框到边界时，如果不使用overscroll-behavior属性，继续滚动会触发外层页面的滚动，但使用overscroll-behavior: contain;后，这种情况将不再发生。
accent-color特性允许在不改变浏览器默认表单组件基本样式的前提下重置组件的颜色。
目前支持以下HTML控件元素，每个都有浅色和深色配色方案，可预览。
热门标签
