如果上次学习 CSS 还是在 CSS3 时代，现在应该学习哪些新特性？

html {
  --bgColor: #70f1d9;
  
  --font-size-base: 
    clamp(1.833rem, 2vw + 1rem, 3rem);
  --font-size-lrg:
    clamp(1.375rem, 2vw + 1rem, 2.25rem);
}

html.dark {
  --bgColor: #2d283e;
}

CSS 自定义属性

自定义属性 也是一件大事，原因有很多。 它们可以作为项目中设计令牌的存储位置，使项目更易于维护和保持一致性。 颜色主题是一个主要的用例，例如 深色模式。

你可以使用 自定义属性 设计整个网站。 沿着这条思路，你不能忽略如今的 Tailwind。 使用 HTML 中的类来为整个网站设置样式的方法，与许多人产生了共鸣（也与许多人产生了不和谐，所以如果它与你格格不入，也不要担心）。

@media 
  (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
  }
}

@media 
  (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

首选项查询

首选项查询通常是 @media 查询，多年来我们一直使用它来响应不同的浏览器大小，但现在还包括检测操作系统级别特定用户首选项的方法。 两个示例是 prefers-reduced-motion 和 prefers-color-scheme。 它们使我们能够构建更尊重用户理想体验的界面。 阅读 Una 的文章。

.block {
  background: 
    hsl(0 33% 53% / 0.5);

  background:
    rgb(255 0 0);

  background:
    /* can display colors 
       no other format can */
    color(display-p3 0.9176 0.2003 0.1386)

  background:
    lab(52.2345% 40.1645 59.9971 / .5);}

  background:
    hwb(194 0% 0% / .5);
}

颜色变化

颜色语法正在转向接受 alpha（透明度）的函数，而无需更改函数名称。 例如，如果你在 CSS3 时代想要纯蓝色，你可能会使用 rgb(0, 0, 255)。 然而，今天，你可以使用无逗号样式（两者都有效）：rgb(0 0 255)，然后在不使用不同函数的情况下添加 alpha：rgb(0 0 255 / 0.5)。 hsl() 的情况也一样。 这只是一个小的改进，也是未来颜色函数的唯一工作方式。

说到未来的颜色语法

• P3 颜色或“display-p3” 即将到来，通过 color() 函数。
• lab() 颜色是另一个新的颜色空间。 它“表示人类可以看到的整个颜色范围”。
• lch() 是另一个新的颜色空间。
• hwb() 是另一个新的颜色空间，专为人类设计。

body {
 font-family: 'Recursive', sans-serif;
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

可变字体

网页字体在 CSS3 中成为 一项重要功能。 现在有了 可变字体。 你不妨了解一下它们的存在。 它们既可以解锁一些很酷的设计可能性，有时也可以提高性能（例如，不再需要为同一字体的粗体和斜体版本加载不同的字体文件）。 还有 彩色字体，但尽管 有浏览器支持，但我认为它们在网络上并没有得到广泛应用。

.cut-out {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mask {
  mask: url(mask.png) right bottom / 100px repeat-y;
}

.move-me {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

路径

SVG 自 CSS3 以来也发展迅速。 你可以直接裁剪 任何元素为各种形状，通过 clip-path 为 CSS 带来了类似 SVG 的特性。 不仅如此，你还可以沿着路径动画元素，让元素沿着路径漂浮，甚至更新 SVG 元素的路径。

在我看来，这些都感觉有点精神上的关联

• clip-path——允许我们从字面上将元素裁剪成各种形状。
• 蒙版——类似于裁剪，但蒙版可以具有其他特性，例如基于蒙版的 alpha 通道。
• 偏移路径——提供一个元素可以放置在其上的路径，通常用于 沿着该路径进行动画。
• 形状外——在浮动元素上提供一个路径，其他元素围绕该路径环绕。
• d——<path> 上 SVG 的 d 属性可以通过 CSS 更新。

.disable {
  filter: 
    blur(1px)
    grayscale(1);
}

.site-header {
  backdrop-filter: 
    blur(10px);
}

.styled-quote {
  mix-blend-mode: 
    exclusion;
} 

CSS 滤镜

如今，可以直接在 CSS 中进行大量的图像处理（更不用说其他 DOM 元素了）。 确实存在 filter，但它还有朋友，它们都有不同的用途。

在我看来，这些都感觉有点精神上的关联

• filter——各种有用的 Photoshop 风格效果，如亮度、对比度、灰度、饱和度等。 模糊功能非常独特。
• background-blend-mode — 同样，它让人联想到 Photoshop 中如何混合图层的方式。将图层相乘以使其变暗并组合。叠加以混合背景和颜色。淡化和加深是经典效果，在网页设计中具有实际用途，并且你永远不知道何时更深奥的灯光效果会创造出酷炫的外观。
• backdrop-filter — 与 filter 具有相同的功能，但它们仅应用于背景，而不是整个元素。仅模糊背景是一个特别有用的效果。
• mix-blend-mode — 与 background-blend-mode 具有相同的功能，但适用于整个元素，而不是仅限于背景。

import "https://unpkg.com/extra.css/confetti.js";

body {
  background: paint(extra-confetti);
  height: 100vh;
  margin: 0;
}

Houdini

Houdini 实际上是一系列技术的集合，这些技术基本上都基于使用 JavaScript 扩展 CSS，或者至少位于 CSS 和 JavaScript 的交汇点。

• 绘制 API — 返回一个使用 <canvas> API 构建的图像，并且可以通过自定义属性进行控制。
• 属性和值 API/类型化 OM — 为值（例如 10px）提供类型，否则这些值将是字符串。
• 布局 API — 创建你自己的 display 属性。
• 动画 API

综合起来，这些功能可以创建一些非常棒的演示，尽管浏览器支持参差不齐。Houdini 的魔力部分在于它作为工作线程交付，非常易于导入和使用，因此它有可能模块化强大的功能，同时使其易于使用。

my-component {
  --bg: lightgreen;
}

:host(.dark) { 
  background: black; 
}

my-component:part(foo) {
  border-bottom: 2px solid black;
}

Shadow DOM

如果你玩过 <svg> 和 <use> 元素，那么你可能会遇到 Shadow DOM。传递过来的“克隆”元素有一个 Shadow DOM，它对如何“穿透”它进行选择有限制。然后，当你深入到 <web-components> 时，它也是同样的情况。

如果你发现需要为 Web Components 设置样式，请知道从“外部”基本上有四种选择。你可能也想知道关于原生 CSS 模块和可构造样式表。