6个 最新 CSS 特性整理

CSS 更新速度以肉眼可见的方式，越来越快，这期视频整理了 6 个已经可以在最新版的 Chrome 中体验的新特性。

Style Queries

第一个是 style quries，它可以查询父元素有哪些 CSS 样式，然后子元素可以根据这些样式来有不同的表现，一般用于设计组件的变体，例如按钮，包含主要按钮和次要按钮两种变体。

不过，现在 style queries 只支持查询 CSS 变量。

我们可以在父元素的 style 属性中，指定用于区分样式的 CSS 变量，然后在样式中，使用 @container 指令和 style 函数，去查询父元素的变量，然后在里边设置对应的子元素样式。

<style>
  @container style(--primary: true) {
    .btn {
      background-color: hsl(200deg, 80%, 80%);
    }
  }

  @container style(--secondary: true) {
    .btn {
      background-color: hsl(0deg, 80%, 80%);
    }
  }
</style>

<div class="buttons" style="--primary: true">
  <button class="btn">按钮</button>
</div>

<div class="buttons" style="--secondary: true">
  <button class="btn">按钮</button>
</div>

预览：

nth-of

第二个是 nth-of，在以前的 nth-child 基础上做了改动，nth-child 在选择子元素时，必须同时满足选择器和位置，而新的 of 语法，则是先过滤满足选择器的元素，再从中选择对应位置的元素。

<style>
  /* 选择 class 为 text 元素，并且是父元素的第 2 个子元素，如果第二个元素没有 text class 就不会选择到 */
  .text:nth-child(2) {
    color: red;
  }

  /* 先选择父元素中所有含有 class 为 text 的子元素，然后再选择其中第 2 个 */
  :nth-child(2 of .text) {
    color: blue;
  }
</style>

<div class="texts">
  <p class="text">段落 1</p>
  <p>段落 2</p>
  <p class="text">段落 3</p>
  <p class="text">段落 4</p>
</div>

预览：

text-wrap

第三个是 text-wrap 属性，可以设置文本的排列方式，当取值为 balance 的时候，可以让多段文本在容器中的排列更美观，这个可能在英文中会有更好的体现：

<style>
  .text-container {
    width: 300px;
    margin: 0 auto;
    text-align: center;
  }

  h1 {
    text-wrap: balance;
  }
</style>


<div class="text-container">
  <h1>欢迎观看峰华前端工程师的视频！更多精彩请访问...</h1>
</div>

预览：

Dynamic Viewport Unit

第四个是动态视口单位，viewport 单位现在支持 dvw，和 dvh，当视口被其他组件占用时，例如移动设备的导航栏，那使用 dvh 可以根据导航栏是否展示，来自动减去或加上这部分宽度。

color()

第五个是 color function，现在 CSS 支持更广泛的色域了，之前默认使用的是 sRGB，会有一部分颜色显示不出来，而使用 color() 函数指定颜色时，可以指定更广的色域，例如 display-p3，这样颜色可选择的范围就更多，当使用最准的颜色时，例如红色，可以得到更艳丽的红：

<style>
  .colorBox {
    width: 300px;
    height: 300px;
    display: inline-block;
    margin-right: 50px;
  }

  .sRGB {
    background-color: rgb(255, 0, 0);
  }

  .display-p3 {
    background-color: color(display-p3, 1, 0, 0);
  }
</style>

<div class="colorBox sRGB"></div>
<div class="colorBox display-p3"></div>

预览：

color-mix()

第六个是 color-mix() 函数，可以合并两个颜色生成新的颜色，或者和透明度进行结合，生成同一颜色的不同级别，用于更好的设计颜色系统，然后使用 CSS 变量进行实现：

<style>
  :root {
    --color-primary: rgb(0, 95, 212);
    --color-primary-10: color-mix(
      in srgb,
      var(--color-primary),
      transparent 10%
    );
    --color-primary-20: color-mix(
      in srgb,
      var(--color-primary),
      transparent 20%
    );
    --color-primary-30: color-mix(
      in srgb,
      var(--color-primary),
      transparent 30%
    );
    --color-primary-40: color-mix(
      in srgb,
      var(--color-primary),
      transparent 40%
    );
  }

  .colorBox {
    width: 300px;
    height: 100px;
  }

  .colorBox:nth-child(1) {
    background-color: var(--color-primary);
  }
  .colorBox:nth-child(2) {
    background-color: var(--color-primary-10);
  }
  .colorBox:nth-child(3) {
    background-color: var(--color-primary-20);
  }
  .colorBox:nth-child(4) {
    background-color: var(--color-primary-30);
  }
  .colorBox:nth-child(5) {
    background-color: var(--color-primary-40);
  }
</style>

<div class="colorBox"></div>
<div class="colorBox"></div>
<div class="colorBox"></div>
<div class="colorBox"></div>
<div class="colorBox"></div>

预览：

兼容性

以上这些新特性可以在 chrome 最新版 115 使用，你可以自己体验一下。

小结

好了，这个就是 CSS 最新的 6 个特性，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！