现代 CSS 特性指南：掌握 OKLCH、容器查询和 :has()
CSS 领域的发展速度比以往任何时候都快。曾经需要复杂的 JavaScript 或预处理器才能实现的功能，现在浏览器已经原生支持，提供了更好的性能和开发体验。本指南探讨了最具影响力的现代 CSS 特性，以及它们如何改变我们构建网页的方式。
1. 下一代色彩：OKLCH 和 OKLAB
几十年来，开发人员一直使用 HEX、RGB 和 HSL。然而，这些色彩空间有一个主要缺陷：它们不是感知均匀的。例如，在 HSL 中，具有相同“亮度”值的两种颜色在人眼看来可能大不相同。
OKLCH 和 OKLAB
OKLCH（及其前身 OKLAB）通过使用感知均匀的色彩空间解决了这个问题。
- L (Lightness)：人眼感知的颜色亮度。
- C (Chroma)：颜色的强度或“纯度”。
- H (Hue)：色轮上的角度。
为什么要使用它？
- 一致性：更改色调不会改变感知的亮度。
- 更广的色域：支持 Display-P3 色彩（在现代 Mac 和 iPhone 上可用），它可以比 sRGB 多表示 50% 的颜色。
- 动态主题：非常适合以编程方式生成符合无障碍标准的调色板。
2. 高级布局：容器查询和子网格
容器查询 (@container)
多年来，我们依靠媒体查询根据视口大小来更改布局。容器查询允许我们根据父容器的大小来更改组件的布局。
- 用例：一个“卡片”组件，在宽侧边栏中显示为网格，在窄主列中显示为列表。
- 好处：真正的组件驱动设计。您的组件可以在不同的布局中真正实现移植。
CSS 子网格 (Subgrid)
子网格允许子元素继承其父元素定义的网格轨道。
- 解决的问题：跨不同网格单元对齐项目（例如，即使内容长度不同，也能对齐卡片页眉和页脚）。
3. “家族”选择器：:has() 和 :is()
:has() 选择器（“父级”选择器）
:has() 选择器通常被称为 CSS 的“圣杯”。它允许您根据元素的子元素或后续元素来为该元素设置样式。
- 示例：
card:has(img)仅在卡片包含图像时才为其设置样式。 - 示例：如果存在错误，
form:has(input:invalid)可以为整个表单背景设置样式。
:is() 和 :where() 选择器
这些允许您将多个选择器组合成一个，减少重复并保持代码整洁。
header :is(h1, h2, h3) { color: red; }
4. 组织力量：@layer 和 CSS 嵌套
级联层 (@layer)
随着 CSS 的增长，特异性冲突（“z-index/特异性战争”）变得越来越难以管理。@layer 允许您为 CSS 定义明确的优先级。
- 好处：您可以确保“主题”层始终覆盖您的“基础”层，无论选择器特异性如何。
原生 CSS 嵌套
您不再需要 Sass 或 Less 进行嵌套！浏览器现在原生支持如下语法：
.card {
background: white;
&:hover {
background: grey;
}
}
5. 视觉转换和定位
视图转换 API (View Transitions API)
允许在页面导航或状态更改时实现无缝动画，类似于移动应用的转换。
锚点定位 (Anchor Positioning)
一种将元素相对于页面上的“锚点”元素（例如，即使页面滚动也会跟随其按钮的工具提示或菜单）进行定位的新方法。
现代 CSS 好处总结
| 特性 | 最佳用途 | 状态 |
|---|---|---|
| OKLCH | 现代、无障碍的调色板 | 广泛支持 |
| 容器查询 | 真正的响应式组件驱动设计 | 广泛支持 |
| :has() | 根据状态/内容为父级设置样式 | 广泛支持 |
| @layer | 管理大规模 CSS 架构 | 广泛支持 |
| 嵌套 | 更整洁、更有组织的代码 | 广泛支持 |
结论
现代 CSS 使我们的代码更整洁、更快速、更强大。通过拥抱 OKLCH 处理色彩和容器查询处理布局等特性，您可以构建更具无障碍性且更易于维护的网站。
需要将您的旧 HEX 颜色转换为现代 OKLCH 吗？或者您正在构建新的布局？请关注我们即将推出的 CSS 生成器工具！与此同时，您可以使用我们的 颜色转换器 来处理 HEX、RGB 和 HSL 转换。