作者：Blend Visions
译者：前端宝哥
作为网页开发者，我们都有过这样的经历：熬夜加班，对着电脑屏幕，试图解读那些看起来像是拥有生命，难以捉摸的 CSS 代码。但好消息来了！CSS 几天前刚刚更新，让我们的工作轻松了不少！本文将深入探讨七个极具影响力的 CSS 新特性，它们旨在彻底改变网站的样式设计方法。无论你是初学者还是高级开发者，都能从中找到编写高效代码的实用技巧。
CSS 的全新面貌：不仅仅是 logo
在我们开始探讨新特性之前，先说些有趣的事：CSS 不仅仅是换了个 logo，它还换上了一个非常优雅的 logo——Rebecca 紫色，背后还藏着一个感人的故事。这个颜色是为了纪念 CSS 先驱 Eric Meyer 的女儿 Rebecca Meyer，她六岁时不幸去世。
然而，变化并不止于 logo——让我们更深入地了解这次品牌重塑的意义。现在，让我们仔细看看这七个将在 2024 年改变 CSS 的特性。
1. align-content：轻松搞定居中对齐
还记得那些关于如何居中 div 元素的各种 meme 吗？现在，它们正式过时了！全新的 align-content 属性闪亮登场，它能轻松解决这个问题：
- 适用于任何块级布局
- 无需使用 Flexbox 或 Grid
- 语法简洁明了
- 开箱即用
以前，居中元素需要使用各种方法，比如 Flexbox 属性、margin 甚至绝对定位。这意味着开发者需要花费大量时间进行调整和尝试，最终结果可能在某些屏幕尺寸或浏览器类型下失效。
align-content 属性的美妙之处在于它的简洁性。你无需手动将所有元素包裹在容器 div 中，也无需费力地解读复杂的 Flexbox 选项。只需要在你的元素上使用这个属性，它就能根据父容器的显示模式自动进行对齐。
这个新属性对于响应式设计来说是一场革命。它能在任何屏幕尺寸上实现完美的居中对齐，无需额外的媒体查询或布局调整。这意味着“更少的代码，更好的性能，以及更少的样式系统潜在故障点。”
/* 使用 Flexbox 的旧方法 */
.old-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* 新方法——更简洁！ */
.new-center {
align-content: center;
min-height: 100vh;
}
/* 适用于任何内容 */
.center-text {
align-content: center;
}
/* 甚至适用于多个元素 */
.center-group {
align-content: center;
gap: 1rem;
}
2. @property 的威力：类型安全的 CSS 变量
CSS 变量（自定义属性）已经存在一段时间了，但它们有一个局限性：浏览器总是将其值解释为字符串。新的 @property 规则（CSS Houdini 的一部分）解决了这个问题，使得可缩放矢量图形 (SVG) 更加强大。
在使用普通的 CSS 变量时，动画和过渡可能存在问题或根本无法实现，因为浏览器无法理解变量的类型。例如，我尝试动画化一个基于百分比的渐变，但这行不通，因为对于浏览器来说，它只是一个字符串，而不是一个数字。
@property 规则通过指定变量的类型来消除这个限制。这意味着你的网站将拥有更流畅的界面、更具响应性的功能，以及更少的样式表异常行为。想象一下，为你的 CSS 带来类型安全，就像你在 JavaScript 中使用 TypeScript 一样。
仅仅是构思一个主题系统，在不同模式之间切换时能够实现颜色混合，就令人兴奋不已。这样，你可以定义浏览器可以原生识别的颜色变量，从而获得必然的平滑过渡，而这在以前要么是不可能的，要么需要调用 JS。现在你可以：
- 为你的变量定义特定类型（数字、颜色、百分比）
- 创建更安全、更可预测的代码
- 使用类型化值实现流畅动画
- 通过更好的浏览器优化来提高性能
这个特性在处理以下情况时非常有用：
- 渐变
- 动画
- 动态配色方案
- 响应式布局
/* 旧方法——浏览器将所有内容视为字符串 */
:root {
--gradient-stop: 50%;
--theme-color: #ff0000;
}
/* 使用 @property 的新方法 */
@property --gradient-stop {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@property --theme-color {
syntax: '<color>';
inherits: true;
initial-value: #ffffff;
}
/* 现在你可以为这些属性添加动画了！ */
.gradient-background {
background: linear-gradient(
90deg,
blue var(--gradient-stop),
red var(--gradient-stop)
);
transition: --gradient-stop 0.3s ease;
}
.gradient-background:hover {
--gradient-stop: 75%;
}
3. @starting-style：为隐藏元素打造更好的动画
你有没有尝试过动画化一个初始 display: none 的元素？这曾经是开发者永恒的痛点之一。最终，本文介绍的全新 @starting-style 规则优雅地解决了这个问题。
一个可能的例子是模态对话框，它从顶部进入屏幕。以前，为了获得流畅的动画，你必须在 JavaScript 或 CSS 中进行大量的复杂操作。元素要么突然出现，要么需要额外的包装元素和状态来进行过渡。
使用 @starting-style，你可以设置元素加载并准备使用时的样式，以便从隐藏状态过渡平滑无缝。这使得 UI 更精细，但代码更少。浏览器负责处理动画的编程以及页面外观和行为方式的所有问题。
这个特性在构建适合残疾人士使用的应用程序界面方面尤其有用。这些过渡修复能够被屏幕阅读器和辅助技术理解，从而提高网站的可访问性，同时还能以视觉上更具吸引力的方式呈现它们。它提供以下功能：
- 定义元素出现之前的初始样式
- 创建从隐藏状态到显示状态的平滑过渡
- 非常适合对话框、弹出窗口和模态框
- 不再出现隐藏元素突然出现的现象
这个特性对于创建具有平滑过渡和动画效果的精致用户界面尤为重要。
/* 模态对话框示例 */
.modal {
display: none;
opacity: 1;
transform: translateY(0);
transition: transform 0.3s ease, opacity 0.3s ease;
}
@starting-style {
.modal {
opacity: 0;
transform: translateY(-20px);
}
}
/* 显示模态框时 */
.modal.show {
display: block;
}
/* 下拉菜单示例 */
.dropdown-menu {
display: none;
transform: scaleY(1);
transition: transform 0.2s ease;
}
@starting-style {
.dropdown-menu {
transform: scaleY(0);
}
}
.dropdown-menu.open {
display: block;
}
4. 增强的数学函数：CSS 变得更强大
有些人可能仍然认为 CSS 不是一门编程语言，但它正在变得越来越强大。新的数学函数证明了这一点。
这些函数意味着在普通的 HTML 中，通常可以省略预处理器或 JavaScript，尽管当然在许多情况下预处理器仍然有用。例如，使用原生数学函数可以更容易地管理诸如计算网格列宽度或设计响应式间距系统等任务。有了它，你就可以在 CSS 中进行复杂的数学运算。
round 类型（floor、ceiling、trunk）的存在允许设计以前似乎不可能实现的改进布局精度。在任何情况下，当你处理网格系统或难以用预设的基于像素的宽度管理的内容时，这些函数都能提供你所需的控制，而无需离开你的样式表。新的数学函数证明了这一点：
round()：选择不同的舍入策略（向下取整、向上取整、截断）rem()：处理余数运算mod()：模运算，类似于 JavaScript
这些函数为以下方面提供了新的可能性：
- 动态布局
- 响应式设计计算
- 复杂的动画
- 网格系统
/* 网格列计算 */
.grid {
--columns: 3;
--gap: 20px;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(
var(--columns),
calc(100% / var(--columns) - round(var(--gap) * (var(--columns) - 1) / var(--columns)))
);
}
/* 使用 mod 实现交替样式 */
.list-item {
padding: mod(var(--index), 2) * 1rem;
}
/* 舍入示例 */
.element {
/* 四舍五入到最接近的整数 */
width: round(calc(100vw / 3));
/* 向下取整 */
height: round(down, calc(100vh / 4));
/* 向上取整 */
margin: round(up, calc(2.1rem));
}
5. 使用 light-dark() 简化明/暗模式
管理明暗模式一直是一件比较麻烦的事情。新的 light-dark() 特性极大地简化了这个过程。
在真正的暗模式概念出现之前，只有两种创建它的方法，第一种是使用两种 CSS 样式，另一种是使用具有媒体查询的 CSS 变量。上述方法导致代码重复，从而导致代码重复和更高的维护成本。HTML5 的新 light-dark() 函数简化了同时设置这两者的过程。
此特性还增强了浏览器的性能，因为浏览器能够修改主题之间切换的性质。无需加载样式表或等待 JavaScript 更改那些变量，它根本不需要。它是无缝的并且快速发生，从而为用户提供比标准方法更好的体验。你可以：
- 并排编写明暗样式
- 根据系统偏好自动切换
- 减少代码重复
- 创建更易于维护的主题系统
示例用法：
/* 旧方法 */
:root {
--bg-color: white;
--text-color: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: black;
--text-color: white;
}
}
/* 使用 light-dark() 的新方法 */
.element {
background-color: light-dark(#ffffff, #121212);
color: light-dark(#121212, #ffffff);
border: 1px solid light-dark(#ddd, #333);
box-shadow: 0 2px 4px light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}
/* 与 CSS 变量结合使用 */
.button {
--button-bg: light-dark(#007bff, #0056b3);
--button-text: light-dark(white, #e1e1e1);
background-color: var(--button-bg);
color: var(--button-text);
padding: 0.5rem 1rem;
border-radius: 4px;
}
6. 使用用户伪类增强表单验证
借助 :user-valid 和 :user-invalid 伪类的引入，表单验证变得更加用户友好。
例如，登录表单，你需要仅在用户尝试提交表单或离开输入字段时显示错误消息。以前，这只能通过使用 Javascript 事件监听器或复杂的 CSS hacks 来实现。新的伪类自然地实现了这一点，增强了页面的可用性，而无需额外的代码。
此特性还方便了访问；很容易。以前，表单验证状态对于某些屏幕阅读器来说难以识别，而现在它们更改表单的方式对每个人都更有用。显示错误消息的时间变得更有逻辑，表单未完成的实例减少了。这些新特性：
- 仅在用户交互后触发
- 防止过早显示错误消息
- 改善用户体验
- 降低代码复杂度
这比传统的 :valid 和 :invalid 伪类有了显著的改进，传统的伪类会立即触发，通常会导致糟糕的用户体验。
/* 基本输入样式 */
.input-field {
border: 2px solid #ccc;
padding: 0.5rem;
border-radius: 4px;
}
/* 旧方法——立即显示 */
.input-field:invalid {
border-color: red;
}
/* 新方法——仅在用户交互后显示 */
.input-field:user-invalid {
border-color: red;
animation: shake 0.3s ease-in-out;
}
.input-field:user-valid {
border-color: green;
}
/* 错误消息样式 */
.error-message {
display: none;
color: red;
font-size: 0.875rem;
margin-top: 0.25rem;
}
.input-field:user-invalid + .error-message {
display: block;
}
/* 成功样式 */
.success-icon {
display: none;
}
.input-field:user-valid ~ .success-icon {
display: inline-block;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
7. interpolate-size：为自动高度实现流畅动画
最后，最后一个是 interpolate-size 属性，它消除了 CSS 动画中最令人恼火的问题之一。
想象一下，一个手风琴组件在展开时添加了内容。在此特性之前，动画高度的唯一方法是具有挑战性的，尤其是在处理动态内容时。主要问题在于开发者如何依赖 JavaScript 解决方案，或者使用固定高度动画，当内容较长时，这些动画就会停止工作。
因此，interpolate-size 属性可以轻松应对这些情况。浏览器会平滑地确定动画的正确路径，从而使过渡无缝，而不管内容的大小如何。即使你没有定义最终高度，它也能正常工作，这使得它更适合用于动态内容区域。现在你可以：
- 平滑地动画化
height: auto - 创建流畅的下拉菜单动画
- 优雅地处理动态内容变化
- 实现更平滑的 UI 过渡
这个特性特别适用于：
- 下拉菜单
- 可展开部分
- 手风琴组件
- 动态内容区域
/* 手风琴示例 */
.accordion {
overflow: hidden;
}
.accordion-content {
height: auto;
padding: 1rem;
background: #f5f5f5;
interpolate-size: allow;
transition: height 0.3s ease;
}
.accordion-content.closed {
height: 0;
padding: 0 1rem;
}
/* 下拉菜单示例 */
.dropdown {
overflow: hidden;
}
.dropdown-menu {
height: auto;
interpolate-size: allow;
transition: height 0.3s ease;
}
.dropdown-menu.collapsed {
height: 0;
}
/* 卡片展开示例 */
.card {
interpolate-size: allow;
transition: all 0.3s ease;
}
.card.expanded {
height: auto;
padding-bottom: 2rem;
}
CSS 的未来已来
这七个特性仅仅是冰山一角。其他值得一提的特性包括：
- 容器查询
- 子网格
:has()选择器
每一个特性都使得 CSS 变得比以往更加强大、直观和开发者友好。
这对开发者意味着什么
这些特性的引入标志着 Web 开发的一个重要里程碑。我们看到 CSS 从简单的样式语言发展成为一个更强大、更强大的工具，用于创建现代化的 Web 体验。这对你们开发者来说意味着：
- 更简单的代码：无需复杂的变通方案
- 更好的性能：更多的原生解决方案意味着更好的优化
- 更好的可维护性：更简洁、更合乎逻辑的代码结构
- 增强的用户体验：更平滑的动画和过渡
开始使用新特性
要开始使用这些特性，请确保你的目标是支持这些特性的现代浏览器。所有这些特性现在都在所有主流浏览器中可用，并且遵循现代基线路径。你应该：
- 了解每个特性的浏览器兼容性信息。
- 更新你的开发环境。
- 在新的项目中逐步实施这些特性。
- 对于现有项目，建议逐步进行调整。
结语
CSS 作为一种工具，正在不断发展，这些新特性无疑有助于创建美观、响应迅速且直观的网站。那些冗长而复杂的 hack 方法正在逐渐消失，取而代之的是美观流畅的原生方案。
展望未来，我们不禁要问，我们还能期待哪些 CSS 新特性？这些特性表明了一个明显的方向：在增强开发者体验的同时，保持语言的简洁性。
你还应该意识到，Web 开发世界是积极进取的，阅读这些特性将有助于你编写更高效的代码。这些特性不应被视为无关紧要的东西，而应尝试关注优化开发流程的新机会。
你最期待哪个 CSS 新特性？现在就开始在你的工作中引入这些特性，并有机会成为 Web 开发未来的参与者！
最后，如果这篇文章对你有所帮助请 “点赞 收藏+关注” ，感谢支持！！
