CSS彻底变革了🤔：七个你需要知道的革命性新功能

作为 web 开发者，我们都有过在处理 CSS 时感到沮丧的时刻。从居中 div 到管理暗模式的过渡，CSS 一直以来都是无数开发者头疼的来源。但情况正在发生变化。随着最近的大更新和一个漂亮的以 Rebecca Purple 为背景的新标志，CSS 正进入一个功能强大且更友好的新时代。

💡 每周 CSS 小贴士，直接发送到您的邮箱，完全免费！

在介绍新功能之前，有一个关于新CSS标志颜色背后感人的故事值得一提。Rebecca Purple不仅仅是一种颜色的名字——它在网页开发界承载着深远的意义。这个颜色是以CSS先驱Eric Meyer的女儿的名字命名的，作为对她的一种永久纪念。Rebecca六岁时坚持要用她的全名来称呼她，不久之后她就离世了。她的记忆通过这个标准CSS颜色得以延续，这个颜色很可能会在未来几个世纪里成为网络基础的一部分。

还记得那些关于居中 div 的梗吗？这些梗现在都过时了。新的 align-content 属性可以直接在任何块级布局中使用，无需使用 flexbox 或 grid。花了 25 年才实现这样一个基本功能，这几乎令人惊讶，但还是晚做总比不做强。

    .centered-content {
        align-content: center;  /* 这就这么简单！根本不需要用到 flexbox 或 grid */
        block-size: 100vh;
    }

进入全屏，退出全屏

作为CSS Houdini的一部分，@property规则是处理变量的游戏规则改变者。之前，CSS变量被当作简单的字符串来处理，这限制了动画的潜力。现在，你可以指定变量类型，比如数字、颜色或百分比，从而实现更安全的代码并创建更复杂的动画。

    /* 以前的方法 - 有限的动画功能 */
    :root {
        --gradient-stop: 50%;
    }

    /* 现在的方法 - 完全可动画 */
    @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 ease;
    }

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

点击全屏/退出全屏

新的这种 @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;  /* 现在会平滑过渡。*/
    }

全屏显示 退出全屏

CSS继续作为一种强大的样式语言发展，引入了新的数学功能特性。

    .数学 {
        /* 数值取整（向下取整和向上取整）*/
        width: round(45.6px);           /* 46px */
        height: floor(45.6px);          /* 45px */
        margin: ceil(45.6px);           /* 46px */

        /* 计算余数 */
        padding: rem(17, 5);            /* 余数：2 */
        padding: mod(17, 5);            /* 相同于rem() */
    }

全屏模式 退出全屏

使用light-dark()函数可以让暗黑模式的实现变得更加简单。此功能允许你在不使用媒体查询的情况下为浅色和暗色方案指定不同的值。

表单验证的用户体验因新的 user-valid 和 user-invalid 伪类得到了提升。与它们的前辈 (:valid 和 :invalid) 不同，这些伪类仅在用户交互后才会被激活，从而避免了在用户尚未交互时错误消息过早出现。这防止了在用户尚未交互时错误信息过早出现。

    .input {
        border: 2px solid #ccc; /* 输入框边框样式 */
    }

    .input:user-invalid {
        border-color: #ff4444; /* 无效状态边框颜色 */
        animation: shake 0.3s; /* 摇晃动画 */
    }

    .input:user-valid {
        border-color: #44ff44; /* 有效状态边框颜色 */
    }

    .error-message {
        display: none; /* 错误消息默认隐藏 */
    }

    .input:user-invalid + .error-message {
        display: block; /* 无效状态下显示错误消息 */
    }

进入全屏/退出全屏

最令人兴奋的新功能可能是 interpolate-size 属性。它解决了长期以来动态高度元素动画化的难题，这些元素具有动态高度。

    .dropdown {
        overflow: hidden;
        height: auto;
        transition: height 0.3s;
        interpolate-size: allow-keywords;  /* 启用平滑的高度变化 */
    }

    .dropdown.collapsed {
        height: 0;
    }

全屏显示 (按 Esc 键退出全屏)

这些特性仅仅是冰山一角而已。随着包含容器查询、子网格和:has选择器等强大功能的加入，CSS不断变得更强大且更易于开发者使用。现代CSS的基础特性已被所有主流浏览器支持，证明了CSS不仅生存下来，还发展得越来越好。

曾经被视为网页开发中必要之恶的CSS时代已经过去了。这些新功能展示了对解决实际开发挑战的承诺，同时让CSS更加直观和强大。随着我们继续前进，很明显，CSS不仅在改变，它正在彻底改变我们处理网页样式的思维和方法。

本文灵感来源于Fireship的这个视频关于这个话题