CSS 永远改变了：你需要知道的进化特征

作为 Web 开发人员，我们在处理 CSS 时都经历过那些沮丧的时刻。从居中 div 到管理暗模式转换，CSS 一直是无数开发人员头疼的问题。但情况正在发生变化。凭借最近的重大更新和 Rebecca Purple 的漂亮新徽标，CSS 正在进入一个具有强大、开发人员友好功能的新时代。

？每周将 CSS 技巧、代码片段和教程直接发送到您的收件箱 - 100% 免费！

丽贝卡·紫色的意义

在深入了解新功能之前，值得注意的是新 CSS 徽标颜色背后的感人故事。 Rebecca Purple 不仅仅是另一个颜色名称 - 它在 Web 开发社区中具有深远的意义。这种颜色以 CSS 先驱埃里克·迈耶 (Eric Meyer) 的女儿丽贝卡·迈耶 (Rebecca Meyer) 的名字命名，是一种永恒的致敬。丽贝卡六岁时坚持要求别人称呼她的全名，不久后就去世了。她的记忆通过这种标准 CSS 颜色得以延续，这可能会成为未来几个世纪网络基础的一部分。

1. 不复杂地调整内容

还记得所有关于将 div 居中的模因吗？它们现在已经过时了。新的align-content属性可以直接在任何块布局中使用，不需要flexbox或网格。令人惊讶的是，花了 25 年时间才实现这样一个基本功能，但迟做总比不做好。

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

2. 使用 @property 类型化 CSS 变量

@property 规则是 CSS Houdini 的一部分，它改变了变量处理的游戏规则。以前，CSS 变量被解释为简单的字符串，限制了它们的动画潜力。现在，您可以指定数字、颜色或百分比等变量类型，从而实现更安全的代码和更复杂的动画。

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

3. 起始风格：更好的第一印象

新的@starting-style规则解决了常见的动画挑战。当使用 display:none 隐藏的元素变得可见时，它们的入口动画通常无法触发。此规则允许您在首次呈现元素时定义元素的初始样式，非常适合对话框、弹出窗口和其他动态内容。

.dialog {
    display: none;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
}

@starting-style {
    .dialog {
        transform: translateY(20px);
        opacity: 0;
    }
}

.dialog.open {
    display: block;  /* Will now animate smoothly from the starting style */
}

4. 增强数学能力

CSS 不断发展成为一种具有新数学函数的强大样式语言：

.mathematical {
    /* Rounding numbers */
    width: round(45.6px);           /* 46px */
    height: round(down, 45.6px);    /* 45px */
    margin: round(up, 45.6px);      /* 46px */

    /* Remainder operations */
    padding: rem(17, 5);            /* 2 (remainder of 17÷5) */
    gap: mod(17, 5);               /* Same as rem() */
}

5. 使用 light-dark() 简化深色模式

使用 light-dark() 函数，深色模式的实现变得更加简单。此功能允许您为浅色和深色配色方案指定不同的值，而无需媒体查询。

6.更智能的表单验证样式

表单验证用户体验通过新的用户有效和用户无效伪类得到改进。与它们的前辈（:valid 和 :invalid）不同，它们仅在用户交互后触发，从而防止过早出现错误消息。

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

7. interpolate-size 的动画突破

也许最令人兴奋的添加是插值大小属性。它解决了动态高度动画元素的长期挑战。

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

期待

这些功能仅代表冰山一角。凭借容器查询、子网格和 :has 选择器等其他强大的附加功能，CSS 不断发展成为一种功能更强大且对开发人员友好的语言。所有主要浏览器都支持的现代 CSS 基线证明 CSS 不仅能够生存，而且还在蓬勃发展。

CSS 被视为 Web 开发中不可避免的邪恶的日子已经一去不复返了。这些新功能表明我们致力于解决现实世界的开发人员挑战，同时使语言更加直观和强大。随着我们不断前进，很明显 CSS 不仅仅在发生变化，它正在彻底改变我们处理 Web 样式的方式。

以上是CSS 永远改变了：你需要知道的进化特征的详细内容。更多信息请关注PHP中文网其他相关文章！