CSS `CSS Values and Units Module Level 5` 新单位与函数

各位观众老爷们，大家好！我是你们的老朋友，Bug终结者。今天咱们不聊Bug，聊点新鲜的——CSS Values and Units Module Level 5 里面那些让人眼前一亮的新东西，特别是新单位和新函数。保证让你的CSS功力更上一层楼！

预备知识：CSS单位和函数简史

在深入了解新玩意之前，咱们先简单回顾一下CSS单位和函数的发展史，也好有个上下文。

• 远古时代 (CSS1/2): 像素 (px) 是王道，em, %, pt 紧随其后。函数方面，rgb() 和 url() 基本满足需求。

• 青铜时代 (CSS3): 出现了 rem, vw, vh 这些响应式布局利器，函数也多了 rgba(), hsl()。

• 现在 (CSS4/5): CSS进入了百花齐放的时代，更多、更灵活的单位和函数涌现出来，让CSS编写更加强大。

新单位：更上一层楼的布局神器

CSS Values and Units Module Level 5 引入了一些令人兴奋的新单位，它们在响应式设计和动态布局方面提供了更大的灵活性。

1. Container Length Units (容器长度单位)

这些单位是相对于 查询容器 (query container) 的尺寸计算的。 简单说，就是相对于某个父容器的大小来计算。这对于组件化开发非常有用，因为组件可以根据其所在的容器大小自动调整。

• cqw: 容器查询宽度的 1%。
• cqh: 容器查询高度的 1%。
• cqi: 容器查询内联大小（inline size）的 1%。在水平书写模式下，等同于 cqw；在垂直书写模式下，等同于 cqh。
• cqb: 容器查询块大小（block size）的 1%。在水平书写模式下，等同于 cqh；在垂直书写模式下，等同于 cqw。
• cqmin: cqi 和 cqb 中较小的值。
• cqmax: cqi 和 cqb 中较大的值。

使用示例:

首先，我们需要定义一个 查询容器。 这可以通过 container-type 属性来实现。

.container {
  container-type: inline-size; /* 定义为查询容器 */
  width: 500px;
  height: 300px;
  background-color: lightblue;
}

.item {
  width: 50cqw; /* 宽度为容器宽度的 50% */
  height: 20cqh; /* 高度为容器高度的 20% */
  background-color: lightcoral;
}

<div class="container">
  <div class="item">
    我是容器内的元素
  </div>
</div>

在这个例子中，.item 的宽度将始终是 .container 宽度的50%，高度是 .container 高度的20%。 即使 .container 的尺寸发生变化，.item 也会相应地调整大小。

注意事项:

• 要使用容器查询单位，必须先使用 container-type 属性定义一个 查询容器。
• container-type 的可选值有 size, inline-size, 和 normal。
• size 表示同时查询宽度和高度。 inline-size 表示只查询内联大小。 normal 是默认值，表示不作为查询容器。

2. Math Functions 增强单位

CSS Math Functions 允许我们在CSS中进行简单的数学计算。 Level 5 对这些函数进行了增强，使其能够更好地与单位结合使用。

• min(value1, value2, ...): 返回一组值中的最小值。
• max(value1, value2, ...): 返回一组值中的最大值。
• clamp(min, preferred, max): 将一个值限制在给定的最小值和最大值之间。

使用示例:

.element {
  width: clamp(100px, 50vw, 500px); /* 宽度最小100px, 最大500px, 优先使用50vw */
  font-size: max(16px, 2vw); /* 字体大小最小16px, 优先使用2vw */
  padding: min(10px, 5%); /* 内边距取 10px 和 5% 中较小的值 */
}

在这个例子中，.element 的宽度将根据视口宽度 (vw) 动态调整，但始终保持在 100px 到 500px 之间。 字体大小也是类似，不会小于16px。

进阶用法：结合容器查询单位

Math Functions 也可以与容器查询单位结合使用，实现更复杂的动态布局。

.container {
  container-type: inline-size;
  width: 500px;
}

.item {
  width: clamp(100px, 50cqi, 300px); /* 宽度最小100px, 最大300px, 优先使用容器宽度的50% */
}

3. Trigonometric Functions (三角函数)

CSS Level 5 引入了三角函数，例如 sin(), cos(), tan(), asin(), acos(), atan(), atan2()。 这些函数可以让我们在CSS中进行更复杂的几何计算，从而实现更高级的动画和布局效果。

使用示例:

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(calc(45deg + atan(1))); /* 旋转 45 度 + 45 度 (atan(1) = 45deg) */
}

在这个例子中，.element 将被旋转 90 度。

高级用法：创建圆形布局

三角函数可以用来创建圆形布局。

<div class="circle-container">
  <div class="circle-item" style="--i: 0;"></div>
  <div class="circle-item" style="--i: 1;"></div>
  <div class="circle-item" style="--i: 2;"></div>
  <div class="circle-item" style="--i: 3;"></div>
  <div class="circle-item" style="--i: 4;"></div>
  <div class="circle-item" style="--i: 5;"></div>
</div>

.circle-container {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: lightgray;
}

.circle-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: blue;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * (360deg / 6))) translate(80px); /* 6个元素，每个元素旋转 360/6 度 */
}

在这个例子中，我们创建了一个包含 6 个蓝色圆圈的圆形布局。 每个圆圈都围绕中心旋转不同的角度，并沿半径方向平移。

注意事项:

• 三角函数的参数通常以弧度表示。 可以使用 deg 单位将角度转换为弧度，例如 calc(sin(30deg))。
• atan2(y, x) 函数返回点 (x, y) 的反正切值，可以用来计算两点之间的角度。

4. Rounding Functions (舍入函数)

CSS Level 5 引入了舍入函数，例如 round(), floor(), ceil(), trunc()。 这些函数可以用来对数值进行舍入，从而实现更精确的布局和动画效果。

• round(value, step): 将 value 舍入到最接近 step 的倍数。
• floor(value): 将 value 向下舍入到最接近的整数。
• ceil(value): 将 value 向上舍入到最接近的整数。
• trunc(value): 将 value 截断为整数。

使用示例:

.element {
  width: round(123.45px, 10px); /* 宽度舍入到最接近 10px 的倍数 (120px) */
  height: floor(45.67px); /* 高度向下舍入到最接近的整数 (45px) */
  margin-left: ceil(10.1px); /* 左边距向上舍入到最接近的整数 (11px) */
  font-size: trunc(18.9px); /* 字体大小截断为整数 (18px) */
}

高级用法：创建网格布局

舍入函数可以用来创建精确的网格布局。

.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}

.grid-item {
  width: calc(round(100% / 3, 1px)); /* 宽度舍入到最接近 1px 的 1/3 */
  height: 100px;
  background-color: lightgreen;
  margin: 1px;
}

在这个例子中，我们创建了一个包含 3 个列的网格布局。 每个列的宽度都是容器宽度的 1/3，并舍入到最接近的 1px。 这可以确保网格布局在各种屏幕尺寸下都保持一致。

5. Exponential Functions (指数函数)

CSS Level 5 引入了指数函数，例如 pow(), sqrt(), log(), exp()。 这些函数可以用来进行更复杂的数学计算，从而实现更高级的动画和布局效果。

• pow(base, exponent): 返回 base 的 exponent 次方。
• sqrt(value): 返回 value 的平方根。
• log(value): 返回 value 的自然对数。
• exp(value): 返回 e 的 value 次方。

使用示例:

.element {
  width: calc(pow(2, 8) * 1px); /* 宽度为 2 的 8 次方 (256px) */
  height: calc(sqrt(144) * 1px); /* 高度为 144 的平方根 (12px) */
}

高级用法：创建动态缩放效果

指数函数可以用来创建动态缩放效果。

.element {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: transform 0.5s ease-in-out;
}

.element:hover {
  transform: scale(calc(exp(0.1))); /* 鼠标悬停时缩放 */
}

在这个例子中，当鼠标悬停在 .element 上时，它会轻微地放大。 缩放比例由 exp(0.1) 计算得出。

新函数：色彩世界的更多可能性

CSS Level 5 不仅引入了新的单位，还增加了一些与色彩相关的函数，让我们可以更好地控制颜色。

1. color-mix()

color-mix() 函数允许我们混合两种颜色。 它可以指定每种颜色的权重，从而创建各种各样的颜色组合。

语法:

color-mix(in <colorspace>, <color> <percentage>?, <color> <percentage>?)

• <colorspace>: 可选参数，指定颜色空间。 默认值为 lch。 其他可选值包括 srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65。
• <color>: 要混合的颜色。
• <percentage>: 可选参数，指定颜色的权重。 如果省略，则默认为 50%。

使用示例:

.element {
  background-color: color-mix(in srgb, red 50%, blue 50%); /* 红色和蓝色混合，各占 50% (紫色) */
  color: color-mix(in lch, white 80%, black 20%); /* 白色和黑色混合，白色占 80% (浅灰色) */
}

高级用法：创建渐变效果

color-mix() 函数可以用来创建更复杂的渐变效果。

.gradient {
  background: linear-gradient(to right, color-mix(in srgb, red, white 50%), color-mix(in srgb, blue, white 50%));
}

2. Relative Color Syntax (相对颜色语法)

相对颜色语法允许我们基于现有的颜色创建新的颜色。 我们可以修改颜色的各个分量，例如红色、绿色、蓝色、透明度等。

语法:

color(from <color> r g b[/ <alpha>])

• <color>: 要基于的颜色。
• r, g, b: 红色、绿色、蓝色分量。 可以使用 calc() 函数进行修改。
• <alpha>: 透明度分量。

使用示例:

.element {
  background-color: color(from red r g b(g + 0.2) b(b * 0.5)); /* 基于红色，增加绿色分量 0.2，减少蓝色分量 50% */
  color: color(from rgba(0, 0, 255, 0.5) r g b/ a(a * 0.8)); /* 基于半透明蓝色，降低透明度 20% */
}

在这个例子中，第一个颜色是基于红色创建的，但绿色分量增加了 0.2，蓝色分量减少了 50%。 第二个颜色是基于半透明蓝色创建的，但透明度降低了 20%。

高级用法：创建主题色

相对颜色语法可以用来创建主题色，并根据主题色生成其他颜色。

:root {
  --primary-color: #007bff; /* 主题色 */
  --secondary-color: color(from var(--primary-color) r g b(b * 0.8)); /* 基于主题色，降低蓝色分量 */
  --text-color: color(from var(--primary-color) r(r * 0.2) g(g * 0.2) b(b * 0.2)); /* 基于主题色，降低所有分量 */
}

.element {
  background-color: var(--primary-color);
  color: var(--text-color);
}

在这个例子中，我们定义了一个主题色 --primary-color，并使用相对颜色语法基于主题色生成了两个其他颜色：--secondary-color 和 --text-color。 这使得我们可以轻松地修改主题色，并自动更新所有相关的颜色。

总结

CSS Values and Units Module Level 5 引入了许多令人兴奋的新单位和函数，它们可以让我们在CSS中实现更复杂、更灵活的布局和动画效果。 掌握这些新特性，可以大大提高我们的CSS编写效率和代码质量。

特性	描述	示例
Container Length Units	相对于查询容器的尺寸计算的单位，用于组件化开发。	cqw, cqh, cqi, cqb, cqmin, cqmax
Math Functions	增强的数学函数，可以与单位结合使用，实现更复杂的动态布局。	min(), max(), clamp()
Trigonometric Functions	三角函数，例如 sin(), cos(), tan(), asin(), acos(), atan(), atan2()，用于创建更高级的动画和布局效果。	创建圆形布局
Rounding Functions	舍入函数，例如 round(), floor(), ceil(), trunc()，用于对数值进行舍入，实现更精确的布局和动画效果。	创建网格布局
Exponential Functions	指数函数，例如 pow(), sqrt(), log(), exp()，用于进行更复杂的数学计算，实现更高级的动画和布局效果。	创建动态缩放效果
color-mix()	混合两种颜色，可以指定每种颜色的权重，创建各种各样的颜色组合。	color-mix(in srgb, red 50%, blue 50%)
Relative Color Syntax	基于现有的颜色创建新的颜色，可以修改颜色的各个分量，例如红色、绿色、蓝色、透明度等。	color(from red r g b(g + 0.2) b(b * 0.5))

希望今天的讲座对大家有所帮助。 记住，多练习，多尝试，才能真正掌握这些新特性。 咱们下期再见！