What's new in CSS
System & Services 进阶 20m

CSS 的新功能

What's new in CSS

2023年6月5日

在 Apple 官方观看视频

一句话判断

Safari 今年在 CSS 上做了大量投入——Masonry Layout 终于有了原生方案，新的颜色函数让 P3 色域在 Web 上可用，margin-trim 和新伪类解决了多年痛点。做 Web 开发的人值得花时间看完这场 Session。

这场 Session 讲了什么

Session 聚焦 Safari/WebKit 在 CSS 方面的四大更新领域：

布局（Layout）：

  • Masonry Layout：在 Safari Technology Preview 中预览。作为 CSS Grid 的扩展实现——grid-template-rows: masonry 一行代码就能实现瀑布流。可以和 Grid 的所有能力（fr 单位、minmax、不同列宽）自由组合。
  • margin-trim：Safari 16.4 已支持。自动移除容器边缘子元素的溢出 margin。margin-trim: block 处理垂直方向，margin-trim: inline 处理水平方向。比手动移除第一个/最后一个元素的 margin 更稳健。

颜色（Color）：

  • sRGB 色域只能表示人类可见颜色的约 35%，Display P3 能多显示 50% 的颜色。
  • 四个新颜色函数突破 sRGB 限制：lch()、oklch()、lab()、oklab()。这些基于感知均匀的颜色模型可以表示任何色域的颜色。
  • color-mix() 函数可以在任何颜色空间中混合两个颜色。
  • color() 函数支持自定义颜色空间，包括 Display P3：color(display-p3 1 0 0 1)。
  • relative color 语法允许基于一个颜色派生新颜色：rgb(from red calc(r * 0.8) g b)。
  • @media (color-gamut: p3) 媒体查询用于条件性应用 P3 颜色。

伪类（Pseudo-classes）：

  • :has() 选择器被称为”父选择器”——可以根据子元素的状态选择父元素。Safari 15.4 已支持。
  • :user-valid 和 :user-invalid：只在用户实际交互后才应用验证样式，比 :valid/:invalid 更符合用户预期。

排版（Typography）：

  • 新的字体特性让你可以精细控制 OpenType 字体的各种特性。
  • CSS 支持更多排版相关的属性。

值得深挖的点

Masonry 作为 Grid 的扩展而非独立布局是个明智的设计决策。瀑布流本质上是”一维自由排列 + 一维网格控制”——用 Grid 控制列（或行），用 Masonry 自动排列另一个维度。这种组合比独立的 Masonry 布局灵活得多。目前还在 CSS Working Group 讨论中，Safari Technology Preview 已经可以试用。

:has() 选择器的威力远超”父选择器”。它不仅能根据子元素选择父元素，还能根据后续兄弟元素选择前面的元素（h2:has(+ p) 选择后面紧跟着 p 的 h2），根据表单状态改变整体布局（form:has(:invalid) 给整个表单加样式）。Safari 15.4 第一个支持，Chrome 和 Firefox 已经跟进。

OKLCH 相比 HSL 的感知均匀性是关键区别。HSL 中 hue=120（绿色）和 hue=240（蓝色）在视觉上的亮度差异很大，但 HSL 值暗示它们是”等亮的”。OKLCH 的 Lightness 是感知均匀的——相同 L 值的不同颜色在人眼中确实感觉一样亮。这对创建调和的色彩方案至关重要。

代码片段

Masonry Layout：

/* 瀑布流布局——Safari Technology Preview */
.masonry-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;  /* 一行代码实现瀑布流 */
    gap: 16px;
}

/* 可以和 Grid 能力自由组合 */
.custom-masonry {
    display: grid;
    grid-template-columns: 200px 1fr minmax(100px, 200px);
    grid-template-rows: masonry;
}

P3 颜色和新颜色函数：

/* 使用 Display P3 色域——比 sRGB 多 50% 的颜色 */
.vivid-red {
    background: color(display-p3 1 0 0);
}

/* OKLCH 颜色——感知均匀 */
.uniform-lightness {
    /* 这两个颜色的感知亮度相同 */
    --blue: oklch(50% 0.15 250);
    --green: oklch(50% 0.15 150);
}

/* 颜色混合 */
.gradient-text {
    background: linear-gradient(
        color-mix(in oklch, red, blue),
        color-mix(in oklch, red, green)
    );
}

/* 条件性应用 P3 颜色 */
@media (color-gamut: p3) {
    .hero {
        color: color(display-p3 0.9 0.2 0.1);
    }
}

margin-trim 和 :has()：

/* 自动移除容器边缘子元素的 margin */
.card {
    margin-trim: block;  /* 移除首尾子元素的垂直 margin */
}

/* :has() 选择器——根据子元素状态选择父元素 */
.card:has(img) {
    /* 只在有图片的卡片上应用特殊样式 */
    padding-top: 0;
}

/* 根据表单验证状态改变整体样式 */
form:has(:user-invalid) {
    border-color: red;
}

/* :user-valid 只在用户交互后生效 */
input:user-invalid {
    border-color: red;  /* 用户实际输入后才显示红色 */
}

最佳实践

  • Masonry Layout 在 Safari Technology Preview 中试用，生产环境暂时仍需 JavaScript 方案。
  • margin-trim 已在 Safari 16.4、Chrome 115+ 支持，可以在渐进增强策略中使用。
  • 用 OKLCH/LCH 替代 HSL 来定义设计系统的调色板——感知均匀的颜色在暗色模式和主题切换中表现更好。
  • :has() 已有主流浏览器支持，可以大胆使用，但注意性能——复杂的选择器在大型 DOM 中可能有开销。
  • 用 @media (color-gamut: p3) 做渐进增强——P3 设备看到更鲜艳的颜色，sRGB 设备看到常规颜色。
  • :user-valid/:user-invalid 比 :valid/:invalid 用户体验更好——后者在页面加载时就应用样式，会让用户困惑。

还有什么值得关注

  • Safari Technology Preview 是体验未来 CSS 功能的最佳渠道，包括 Masonry。
  • 140+ 项 Web 技术已在今年多个 Safari 版本中发布。
  • CSS Grid 自 2017 年发布以来已经彻底改变了 Web 布局，Masonry 是其重要扩展。
  • Apple 从 2015 年开始在硬件上支持 P3 色域，CSS 颜色能力的提升终于让 Web 设计能跟上硬件。
  • color-mix() 和 relative color 语法让 CSS 变量做颜色运算成为可能，不再需要预处理器。
WWDC 2023