CSS一直在不断进化，带来了新的功能，让我们的工作变得更加快速、简洁和强大。得益于最新的浏览器技术进步（Baseline 2024），许多新特性现在可以在所有主要的浏览器引擎上正常使用。以下是你现在就可以开始使用的十大亮点。

你想要更多吗？ 我们来看看我的项目 CSSToday 吧： csstoday.dev/

浏览器显示滚动条时，布局可能会因滚动条占用空间而变化。使用scrollbar-gutter可以在滚动开始前就预留滚动条所需的空间。

    .scrollable {  /* 可滚动元素的样式 */
      scrollbar-gutter: stable both-edges;  /* 滚动条固定在两端 */
    }

你也可以用 scrollbar-color 来美化滚动条，

.scrollable 样式设置滚动条的颜色为 #444，滚动条轨道的颜色为 #ccc。

这确保了外观的一致性，防止布局突然变化。

它的用處 ✅

• scrollbar-gutter 通过为滚动条预留空间来保持布局稳定，防止滚动条突然出现时的恼人位移。
• scrollbar-color 可以让你自定义滚动条的轨道和滑块的颜色，增强界面设计的一致性，尤其是在暗色模式或主题界面中。

::target-text 突出显示内部链接所指向的文本（比如，当你在同一页面点击一个链接时）：

    ::target-text {  
      background: yellow;  
      color: black;  
    }

读者会立即看到他们导航到的文本的精确部分。

它有什么好处✅

• 高亮显示链接指向的具体文本，让用户立即知道他们在长文档或文章中的位置。

对于某些语言及注释，ruby-align 和 ruby-position 是必不可少的。它们让你控制简短的注释（即ruby文本）相对于主文本的位置来放置。

ruby {  
  ruby-align: center;  
  ruby-position: before;  
}

它有什么好处✅

• 对东亚的排版而言至关重要，允许对主文字上方或旁边的注释（ruby注释）进行精确控制。
• 对教育或参考材料中的内嵌注释也很有用。

现代的 CSS 颜色处理包括 相对颜色调整语法，这允许你基于现有颜色调整属性，比如明度或饱和度。此外，light-dark() 函数允许你轻松地在浅色和深色之间切换：

    .element {  
      background: light-dark(#ffffff, #000000);  /* Custom light-dark function */
    }

你可以使用 <color-interpolation-method> 来在不同的颜色空间中创建更平滑的色彩过渡。

它有什么用 ✅

• 相对颜色语法支持根据参考颜色动态调整饱和度和亮度。
• light-dark() 简化了在浅色和深色值之间切换，这是主题切换或暗模式时常见的需求。

通常，手风琴布局需要使用 JavaScript 来确保同一时间只打开一个面板，但 HTML 的 <details> 元素可以帮助简化这一点。这里有一个简短的代码片段以帮助实现保持面板互不干扰（https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/name）。

    <details name="exclusive">  
      <summary>详情如下</summary>  
      这些细节小到不易被注意到。  
    </details>

    details {  
      border: 1px solid #aaa;  
      border-radius: 4px;  
      padding: 0.5em 0.5em 0;  /* 给details元素添加边框、圆角和内边距 */
    }  

    summary {  
      font-weight: bold;  
      margin: -0.5em -0.5em 0;  
      padding: 0.5em;  /* 给summary元素添加加粗文字、负外边距和内边距 */
    }  

    details[open] {  
      padding: 0.5em;  /* 当details元素打开时，设置内边距 */
    }  

    details[open] summary {  
      border-bottom: 1px solid #aaa;  
      margin-bottom: 0.5em;  /* 当details元素打开时，给summary元素添加下边框和底部外边距 */
    }

它有什么好处 ✅

• 允许你一次只显示一个面板的内容，而无需复杂的JavaScript代码。
• 非常适合FAQ、菜单或任何只需一次展开一个项目的场景。

content-visibility 这个特性会跳过对不在屏幕上的元素的渲染，直到这些元素滚动到屏幕上。

    .lazy-load-section {  
      content-visibility: auto;  /* 懒加载部分的内容可见性设置为自动 */
    }

这降低了初始渲染成本，提升了长页面的表现。

它有什么用？

• 延迟渲染屏幕外的元素，以提高长页面和复杂布局的性能。
• 提高速度并减少内存占用，尤其是在移动设备上。

当自定义字体不可用时，浏览器会退回到另一个字体，这往往会破坏布局。font-size-adjust（文本大小调整）有助于保持文本的大小和可读性一致。

/* 设置文本样式 */
.text {  
  font-family: "CustomFont", Arial, sans-serif;  
  font-size-adjust: 0.5;  
}

这样在字体替换成其他的时候，x 高度和可读性也能保持一致。

它有什么好处 ✅

• 当自定义字体不可用或加载缓慢时，确保文本外观的一致性。
• 通过匹配备用字体的x高度来保持阅读的舒适性和设计的一致性。

虽然 transition-timing-function 一直很好用，但是 transition-behavior 提供了更多对动画的控制，例如，可以通过它来轻松反转或暂停过渡，而无需复杂的 JavaScript。这为更加流畅的用户界面交互和更复杂的动画效果铺平了道路。

    .card {  
      transition-property: opacity, display;  
      transition-duration: 0.25s;  
      transition-behavior: 允许离散;  
    }  

    .card.fade-out {  
      opacity: 0;  
      display: none;  
    }

Note: The term "allow-discrete" for transition-behavior is not standard in CSS. In CSS, the closest property that might be relevant to a discrete transition is transition-timing-function: step-end;. However, since the original text specified "allow-discrete", which does not exist in standard CSS, the translation retains the closest matching property for fluency in context. In the translation, "allow-discrete" is represented as "允许离散" to better convey the original intent.

它有什么用 ✅

• 提供更多可逆或更复杂的过渡效果，无需复杂脚本。
• 适用于精细的UI效果、互动元素和独特动画。

@property 可以用来声明具有初始值、预设语法和继承规则的自定义的属性。

    @property --animation-progress {  
      语法："<number>";  
      继承：不;  
      初始值：0;  
    }

你也直接在 CSS 中使用新的分段值函数，如 round()、mod() 和 rem()，这减少了使用 JavaScript 或预处理器技巧的需要。

它有什么用处 ✅

• @property 将自定义属性转换为完全声明的变量，具有类型、默认值和继承规则。
• 例如 round()、mod() 和 rem() 这些函数使得在 CSS 中进行简单的数学运算更加简单，减少了对预处理器或 JavaScript 的依赖性。

（注：这里的“偏移位置”指的是元素相对于其正常位置的偏移，“偏移路径”则指元素沿特定路径移动的过程。）

对于更复杂的动画设计，offset-position 和 offset-path 可以让你沿自定义路径动画元素，而无需借助繁重的 JavaScript 框架：

以下是CSS代码，用于定义一个移动动画路径和过渡效果。
    .move {  
      offset-path: path("M10,80 Q95,10 180,80");  
      /* 定义了元素移动的路径 */
      offset-position: 0%;  
      /* 定义了元素在路径上的起始位置 */
      transition: offset-position 2s ease;  
      /* 定义了元素变化时的过渡效果 */
    }

有了这些属性，你可以创建沿着SVG路径或简单曲线的平滑动画。

它有什么好处 ✅

• 支持仅使用 CSS 的基于路径的运动和动画。
• 非常适合用于交互元素，如运动图形效果、引导用户注意力沿曲线路径流动等。

每个这些特性已经在所有主要的浏览器中得到了支持。它们消除了许多JavaScript临时解决方案的需要，让你能够构建更简洁、更快速、更易维护的布局和交互。尝试一下，看看它们如何将你的项目提升到一个新的高度。尽情享受实验的乐趣吧！

还想更多吗？ 看来我的项目 CSSToday 吧：csstoday.dev/(点击这里)