2022 年值得期待的新 CSS 功能

已发表: 2022-07-07

这里有一些您不想错过的级联样式表更新，从鲜为人知的滚动捕捉属性到令人惊叹的新调色板。

CSS（层叠样式表）于 1996 年首次亮相，并且仍然是 Web 开发堆栈中一个重要的、不断发展的组件。 CSS 与其他生活语言一样，总是在添加新功能以响应现实世界的实践。由于发展迅速，即使是专门的开发人员也可能会错过新功能。查看在不久的将来 CSS 中的一些最有用的特性。

子网格

CSS 从一开始就因许多严重的缺陷而受到批评。一些简单的任务，例如在 CSS 中居中某些东西，需要过于复杂的变通方法和麻烦。
另一个重要的问题是实现合理的网格布局，至少在 CSS 网格布局模块介入之前是这样。

网格布局由 display: grid 声明指示，与 Flexbox 类似，它允许您定义矩形布局，同时还可以控制二维网格。
根据研究，大多数 CSS 开发人员都知道网格布局，我们中的许多人都在使用它。（如果你还没有，别忘了尝试一下！）

子网格是网格布局模块的一个全新且非常有用的功能。子网格功能允许您创建将继承其父网格布局的子网格。

与将网格显示嵌套在另一个网格中相反，子网格定义了自己的尺寸和间隙。使用子网格时，父级的布局将应用于子网格，但子网格仍可以在必要时覆盖布局的各个方面。

Subgrid 目前仅在 Firefox 71 及更高版本中可用，但计划用于 Safari WebKit、Google Chrome 和 Microsoft Edge。子网格在未来将是一个非常有用的布局功能。

强调色

尽管它们很受欢迎，但众所周知，一些显示元素很难设计。例如，复选框和单选按钮经常被替换为自定义小部件，该小部件在隐藏浏览器实现的同时模仿其行为。您可以使用新的 CSS 强调色选项来定位这些元素。

例如，如清单 1 所示，您可以将洋红色应用到页面上的所有单选按钮（另请参见这个实时示例）。

清单 1：单选按钮的 CSS 颜色控制

<style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

滚动捕捉

CSS 提供了一组方便的属性来控制 Web 浏览器中的滚动快照动作。其中许多功能已经在最近的浏览器版本中可用，而其他功能仍在推出中。

值得注意的是，超过三分之一的 CSS 用户仍然没有意识到滚动捕捉。

scroll-snap-* 属性命令提供了几个选项来微调滚动位置在容器上的工作方式。开发人员受益于更高的精度，而最终用户则受益于更流畅、更可控的用户体验。

清单 2 显示了一个简单示例，说明如何控制 div 上的滚动捕捉（另请参见此实时示例）。

清单 2 是一个简单的滚动快照示例。

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

清单 3 中的 y 滚动位置会自动移动到子元素，无论您在何处释放滚动移动。这是由于滚动容器的 scroll-snap-type 属性设置为 y 并且子元素具有 scroll-snap-align: start 声明。

这种行为也可以改变。例如，您可以将 scroll-snap-type 属性设置为 y 接近度。这可以按预期工作，仅在滚动靠近元素时才捕捉。

此外，相关的 overscroll-behavior 属性控制嵌套滚动容器的行为方式。

逻辑 CSS 属性

如果您曾经想在左右或底部和底部设置容器边框，您可能已经经历过必须逐字写出border-left 和border-right 或border-top、border-bottom 属性的烦恼。最佳。问题是没有办法在不影响您不想更改的边框的情况下使用快捷方式属性。对于填充和边距等元素也是如此。

CSS 逻辑属性模块允许您使用 inline 和 block 关键字以抽象的方式引用事物。引用左右时，使用内联；当提到顶部和底部时，使用块。例如，要在 div 的左侧和右侧添加边框，请使用清单 3 中的代码。（另请参见此处的实时示例）。

清单 3：使用内联逻辑的左右填充

div { border- inline : 10px dashed seagreen; }

这些是有用的边框快捷方式，但 inline 和 block 逻辑关键字也可以在各种其他属性中找到。

大多数开发人员使用这些快捷方式来处理文本方向和书写模式问题。在这些情况下，像 padding-inline-end 这样的属性允许您定位尾随填充，而不管文本方向如何。

本质上，对内联和块的抽象允许创建可应用于各种情况的通用样式。更多信息可以在 CSS 逻辑属性和值中找到。

容器搜索

容器查询在 CSS 中尚未完全稳定，但很快就会稳定。它们将对我们思考响应式设计的方式产生重大影响。基本思想是您将能够根据父容器的大小设置断点，而不仅仅是视口和媒体。

语法没有明确的定义，但它可能类似于清单 4。

@container 清单 4。

 @container (max-width: 650px){ … }

考虑一下基于 UI 嵌套层中出现的各种容器的大小来微调布局的强大功能。这是一个相当重要的变化，几乎肯定会引发一波界面创新浪潮。

三种新配色方案

自古以来，CSS 从业者就使用 RGB、HEX 和命名颜色来美化和活跃设备显示。最近引入了 HSL 样式的颜色声明。 CSS 规范现在引入了新的颜色描述符，即 hwb、lab 和 lch。

HWB 是色调、白度和黑度的缩写。这是一种很好的触感，因其人类可读性而脱颖而出——您选择一种颜色，然后添加白色和黑色。它与最新版本的 Chrome、Firefox 和 Safari 兼容。（Microsoft Edge 功能参考在这个主题上出奇地震耳欲聋。）要了解有关 HWB 的更多信息，请参阅 hwb() - 人类的颜色符号？它与 RGB 和 HWL 一样，具有用于透明度的 alpha 通道。

LCH 代表亮度、色度和色调，以扩展可用的调色板而著称。什么、为什么以及如何在 CSS 中使用 LCH 颜色？这是一个很好的概述，其中包括对 CSS 中颜色理论的令人大开眼界的讨论。目前只有 Safari 支持 LCH。

新色彩空间中最具理论性的是 LAB，它源自 CIE LAB 色彩理论。实验室颜色描述符声称涵盖了人类可感知颜色的整个光谱，这是一个大胆的声明。它与 LCH 一样，目前仅受 Safari 支持。更多关于 LAB for CSS 的信息可以在 Mozilla CSS 文档中找到。