新一代网页样式设置

了解现代 CSS 中一些令人兴奋的功能。

Adam Argyle
Una Kravets

目前，CSS 中发生了大量令人兴奋的事情，并且 目前的浏览器已支持其中很多功能！ 我们在 CDS 2019 上的演讲，您可以观看下面的视频： 涵盖我们认为值得关注的几个新功能和即将推出的功能。

这篇博文重点介绍您目前可以使用的功能 请务必观看本次讲座的 ，更深入地探讨 Houdini 等即将推出的功能。 您还可以找到我们讨论的所有功能的演示， CSS@CDS 页面。

目录

滚动条

滚动贴靠功能可让您定义在用户垂直和/或水平滚动内容时的贴靠点。它提供内置的滚动惯性和减速功能，并且支持触摸。

以下示例代码在 <section> 元素中设置水平滚动，并将吸附点与 <picture> 子元素的左侧对齐：

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

具体方法如下：

  • 在父 <section> 元素上， <ph type="x-smartling-placeholder">
      </ph>
    • 将 overflow-x 设置为 auto 以允许水平滚动。
    • 将 overscroll-behavior-x 设置为 contain，以防止当用户到达 <section> 元素的滚动区域的边界时滚动任何父元素。（这对于贴靠而言并不是绝对必要的，但通常是一种不错的选择）。
    • 将 scroll-snap-type 设置为 x（用于水平贴靠）和 mandatory（设置为 mandatory），以确保视口始终贴靠最近的贴靠点。
  • 在子 <picture> 元素上，scroll-snap-align 设为开始位置，这样可以设置每张照片左侧的贴靠点（假设 direction 设置为 ltr）。

以下是实时演示：

<ph type="x-smartling-placeholder">

您还可以查看垂直滚动贴靠和矩阵滚动贴靠演示。

:focus-within

:focus-within 解决了长期存在的无障碍功能问题：在很多情况下，聚焦子元素可能会影响父元素的呈现，以便使用辅助技术的用户可以访问界面。

例如，如果您的下拉菜单包含多个项目，则当任何项目获得焦点时，该菜单应保持可见状态。否则，键盘用户看到的菜单会消失。

:focus-within 告知浏览器当焦点位于指定元素的任何子元素上时应用样式。返回菜单示例，通过在菜单元素上设置 :focus-within，您可以确保它在菜单项获得焦点时保持可见：

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

一张显示“聚焦”与“聚焦于内”行为差异的插图。

请尝试在下方演示中使用 Tab 键在可聚焦元素之间切换。您会发现，当您聚焦于菜单项时，菜单仍可见：

<ph type="x-smartling-placeholder">

媒体查询级别 5

新媒体查询为我们提供了强大的方法，可以根据用户的设备偏好设置来调整应用的用户体验。基本上，浏览器充当系统级偏好设置的代理，我们可以使用媒体查询 prefers-* 组在 CSS 中响应系统级偏好设置：

展示解读系统级用户偏好的媒体查询的示意图。

以下是我们认为开发者最感兴趣的新查询：

这些查询在无障碍功能方面大有裨益。例如，以前我们无从得知用户将其操作系统设置为高对比度模式。如果您希望为始终忠于自己品牌的 Web 应用提供高对比度模式，则必须让用户从应用内的界面中选择该模式。现在，您可以使用 prefers-contrast 在操作系统中检测高对比度设置。

这些媒体查询的一个令人兴奋的意义是，我们可以设计系统级用户偏好的多种组合，以适应广泛的用户偏好和无障碍需求。如果用户想要在光线昏暗的环境中使用高对比度深色模式，您可以这样做！

Adam 必须知道“更喜欢活动减少”不能实现为“无动作”用户说他们更喜欢减少动作，而不是不想看到任何动画。他坚信，减少动作并不是没有动作。下例在用户更喜欢减少动作时使用淡入淡出动画：

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">

逻辑属性

随着越来越多的开发者开始进军国际化，逻辑属性解决了这一难题。margin 和 padding 等许多布局属性都采用从上到下和从左到右阅读的语言。

显示传统 CSS 布局属性的示意图。

在为具有不同书写模式的多种语言设计页面时，开发者不得不跨多个元素单独调整所有这些属性，这很快成为可维护性的难题。

逻辑属性可让您在不同翻译和书写模式下保持布局完整性。它们根据内容的语义排序（而不是其空间排列）动态更新。对于逻辑属性，每个元素都有两个维度：

  • 区块维度与一行中的文字流动垂直。（在英语中，block-size 等同于 height。）
  • “内嵌”维度与一行中的文字流平行。（在英语中，inline-size 等同于 width。）

这些维度名称适用于所有逻辑布局属性。举例来说，在英语中，block-start 等同于 top，inline-end 等同于 right。

展示新 CSS 逻辑布局属性的示意图。

借助逻辑属性，您只需更改页面的 writing-mode 和 direction 属性，而无需更新各个元素的数十个布局属性，即可自动更新其他语言的布局。

通过将 <body> 元素的 writing-mode 属性设置为不同的值，您可以在下面的演示中查看逻辑属性的工作原理：

<ph type="x-smartling-placeholder">

position: sticky

具有 position: sticky 的元素将保持块流状态，直到它开始离开屏幕。 此时，它将停止与网页的其余部分一起滚动 并固定在元素的 top 值指定的位置上。 为相应元素分配的空间将保留在 flow 中， 并且当用户向上滚动屏幕时，该元素会返回至该元素。

使用固定定位功能，您可以制作很多以前需要 JavaScript 的实用效果。为了展示一些可能性，我们制作了几个演示。每个演示使用大致相同的 CSS，仅略微调整 HTML 标记以创建每种效果。

粘性堆栈

在此演示中，所有粘性元素都共用同一个容器。这意味着，当用户向下滚动时，每个粘性元素都会在前一个元素之上滑动。粘性元素具有相同的卡住位置。

粘性幻灯片

在此例中，粘滞元素是同级元素。（也就是说，它们的父母是兄弟姐妹）。当粘性元素到达其容器的下边界时，它会随容器一起向上移动，给人一种低层粘性元素会推高高粘性元素的印象。也就是说，它们似乎在竞争卡住的位置。

粘性 Desperado

与粘性幻灯片一样，此演示中的粘性元素也是同级元素。不过，它们已放置在采用两列网格布局的容器中。

backdrop-filter

借助 backdrop-filter 属性，您可以将图形效果应用于元素后面的区域，而不是元素本身。这带来了许多很酷的效果，而这些效果之前只有通过一行 CSS 才可以通过复杂的 CSS 和 JavaScript 技巧来实现。

例如，以下演示使用 backdrop-filter 来实现操作系统风格的模糊处理：

<ph type="x-smartling-placeholder">

我们已经有一篇关于backdrop-filter的精彩帖子，欢迎前往此页面了解详情。

:is()

虽然 :is() 伪类实际上已有十多年的历史，但其用途仍然达不到我们的预期。它接受逗号分隔的选择器列表作为其参数，并匹配该列表中的所有选择器。这种灵活性使其极为便利，并且可以显著减少您配送的 CSS 数量。

一个简单的示例：

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

CSS 网格布局使用 gap（之前为 grid-gap）已有一段时间。通过指定包含元素的内部间距，而不是子元素周围的间距，gap 解决了许多常见的布局问题。例如，借助间隙，您无需担心子元素的外边距会导致包含元素的边缘周围产生不必要的空白：

插图：gap 属性如何避免容器元素边缘意外的间距。

更好的消息：gap 即将在 Flexbox 中推出，提供与网格相同的间距福利：

  • 存在一个（而不是多个）间距声明。
  • 您无需为项目建立有关哪些子元素应该拥有间距的约定，包含的元素拥有间距。
  • 与小猫头鹰等旧策略相比，该代码更易于理解。

以下视频展示了为两个元素（一个具有网格布局，另一个具有弹性布局）使用单个 gap 属性的好处：

目前，只有 FireFox 在 Flex 布局中支持 gap，您可以尝试通过以下演示了解其工作方式：

<ph type="x-smartling-placeholder">

CSS Houdini

Houdini 是浏览器渲染引擎的一组低级 API，可让您告知浏览器如何解读自定义 CSS。换句话说，它让您可以访问 CSS 对象模型，从而通过 JavaScript 扩展 CSS。这样做有几个好处：

  • 它为您提供了更强大的功能来创建自定义 CSS 功能。
  • 更容易将渲染问题与应用逻辑分离。
  • 它比我们目前在 JavaScript 中使用的 CSS polyfill 的性能更出色，因为浏览器不再需要解析脚本并执行第二个渲染周期；Houdini 代码会在第一个呈现周期内解析。

插图：Houdini 与传统 JavaScript polyfill 相比的工作方式。

Houdini 是多个 API 的总称。如果您想详细了解它们及其现状，请参阅 Is Houdini Ready Yet?在演讲中，我们介绍了属性和值 API、绘制 API 以及动画 Worklet，因为它们目前是受支持的最强工具。我们可以轻松将每个激动人心的 API 专门撰写一篇博文，但现在，请观看我们的演讲，了解相关概览，并通过一些酷炫的演示开始了解您可以使用这些 API 做些什么。

溢出

我们还想讨论其他一些内容，但没时间深入讲解，所以我们快速进行了讲解。⚡ 如果您还没有听说过其中一些功能，请务必观看讲座的最后一部分！

  • size：用于同时设置高度和宽度的属性
  • aspect-ratio：用于为本身没有宽高比的元素设置宽高比的属性
  • min()、max() 和 clamp()：可让您对任何 CSS 属性（而不仅仅是宽度和高度）设置数字约束条件的函数
  • list-style-type 现有属性，但很快就会支持更广泛的值，包括表情符号和 SVG
  • display: outer inner：display 属性很快将接受两个参数，让您可以明确指定其外部和内部布局，而不是使用 inline-flex 等复合关键字。
  • CSS 区域：可让您填充指定的非矩形区域，以便内容流入和流出
  • CSS 模块：JavaScript 将能够请求 CSS 模块，并传回易于对操作的丰富对象