你不知道的 7 项 CSS 新功能

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

CSS 一直在进步，不断推出新的功能，让开发更加强大、简单、有趣。以下是一些最新的 CSS 更新，它们不仅能优化你的工作流程，还会改变你对 CSS 的使用方式。我们也会通过一些示例帮助你理解这些功能的应用场景。

---

1. 无需 Flexbox 或 Grid 的快速居中对齐

还记得以前用 CSS 居中元素的“痛苦”吗？
现在，有了 align-content 属性，居中对齐变得轻松无比，无需额外的容器。

.my-element {
  display: block;
  align-content: center;
}

再也不用纠结是选 flexbox 还是 grid 了。

---

2. 更智能的 CSS 变量：@property

CSS 变量非常灵活，但也存在缺陷，比如缺乏类型约束和默认值支持。
现在，@property 规则让你可以定义具有特定类型、继承规则和初始值的自定义属性。

传统做法：

:root {
  --rotation: 45deg;
}
div {
  transform: rotate(var(--rotation));
}

如果意外赋值 --rotation: blue;，代码可能会报错或行为异常。

新方法：

@property --rotation {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
div {
  transform: rotate(var(--rotation));
}

• syntax: 限定变量值类型，比如 <angle> 表示角度。
• inherits: 决定变量是否继承父级值。
• initial-value: 定义默认值（这里是 0deg）。

这不仅提升了代码的健壮性，也减少了意外错误。

---

3. @starting-style：解决页面加载时样式闪烁问题

开发者经常遇到页面加载时内容闪烁的问题（FOUC）。
@starting-style 提供了解决方案，可以为元素设置初始样式，避免布局错乱。

@starting-style {
  .modal {
    opacity: 0;
    visibility: hidden;
  }
}
.modal {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

这样，即使在页面加载时，也能保证模态框的显示效果流畅自然，无需繁琐的内联样式。

---

4. 数学功能升级：更多强大的计算方法

以前，calc() 是 CSS 唯一的数学函数，但功能有限。
现在，新增了 round()、mod() 和 rem() 等强大函数，大幅扩展了计算能力。

传统方式：

.element {
  width: calc(100% - 50px);
}

新功能：

.box {
  margin: round(2.5px); /* 四舍五入为 3px */
}
.stripe:nth-child(odd) {
  left: calc(var(--index) * 50px mod 200px);
}
.circle {
  width: rem(10px, 3px); /* 输出 1px */
}

这些新增函数让复杂的布局计算变得更加灵活且直观。

---

5. 光明与黑暗的完美切换：light-dark()

定义明暗主题的样式曾经需要依赖媒体查询，容易导致代码重复。
现在，light-dark() 函数简化了这一过程。

传统方法：

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

新方法：

body {
  background-color: light-dark(white, black);
  color: light-dark(black, white);
}

• 第一个值是浅色模式的样式。
• 第二个值是深色模式的样式。

再也不用重复代码，主题切换更加高效。

---

6. 表单验证新伪类：:user-valid 和 :user-invalid

以前，:valid 和 :invalid 的表单验证伪类会在页面加载时触发，导致样式误判。
新伪类 :user-valid 和 :user-invalid 专注于用户交互后的状态，大幅提升体验。

新方法：

input:user-valid {
  border-color: green;
}
input:user-invalid {
  border-color: red;
}

这避免了未交互前就出现错误提示的问题，让表单验证更贴合实际需求。

---

7. interpolate-size：更顺滑的尺寸动画

CSS 一直以来对高度、宽度等尺寸的动画支持不够友好。
现在，有了 interpolate-size 属性，尺寸动画变得更加平滑自然。

传统方法：

.collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
.collapsible.open {
  max-height: 500px;
}

新方法：

.panel {
  interpolate-size: height 0.5s ease;
}
.panel.open {
  height: auto;
}

浏览器会动态计算起始和结束尺寸，无论内容多少，动画都能流畅衔接。

---

总结

这些 CSS 新功能都得到了主流浏览器的支持，无论是 Chrome、Firefox 还是 Safari，都可以立即开始使用。掌握这些特性不仅能提升你的工作效率，还能让代码更加简洁优雅。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。