CSS 现代三剑客实战：@scope、@starting-style 与 light-dark() 解锁新能力

## CSS 现代三剑客实战：@scope、@starting-style 与 light-dark() 解锁新能力

2025-2026 年，CSS 迎来了一波真正"颠覆开发体验"的新特性。除了我们熟悉的 Container Queries 和 View Transitions，`@scope`、`@starting-style` 和 `light-dark()` 这三个新能力正在悄然改变我们写样式的方式。今天就来逐一拆解实战用法。

### 一、@scope：终于不用再想"怎么命名了"

BEM、CSS Modules、Tailwind...我们绕了一大圈，本质都是在解决**作用域隔离**的问题。现在 CSS 原生支持了作用域。

**基本用法：**

```css @scope (.card) { /* 仅在 .card 内部生效 */ h2 { font-size: 1.5rem; color: #1a73e8; }

p { line-height: 1.6; color: #333; } } ```

等价于之前的 `.card h2` 和 `.card p`，但写法更直观。更强大的是，`@scope` 支持**边界控制**：

```css @scope (.card) to (.card-footer) { /* 样式影响 .card 内部所有元素， 但不会穿透 .card-footer */ a { color: #1a73e8; } } ```

这在处理组件嵌套组件时极其有用，无需额外选择器就能精确控制样式边界。

### 二、@starting-style：告别 JS 动画"闪烁"

页面第一次渲染时，CSS 过渡和动画经常出现"闪烁"或"无中生有"的跳变——因为动画需要从旧状态过渡到新状态，但**初次渲染没有"旧状态"**。

`@starting-style` 就是专门解决这个问题的：

```css .toast { opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease;

/* 初次渲染时从这里开始过渡 */ @starting-style { opacity: 0; transform: translateY(20px); } }

.toast.show { opacity: 1; transform: translateY(0); } ```

配合 Popover API 或 Dialog 使用效果更佳，完全无需 JavaScript 介入动画初始化：

```css [popover] { opacity: 0; transform: scale(0.9); transition: opacity 0.25s, transform 0.25s;

@starting-style { opacity: 0; transform: scale(0.9); } }

[popover]:popover-open { opacity: 1; transform: scale(1); } ```

### 三、light-dark()：两行代码搞定主题切换

Dark Mode 支持以前需要写 media query + CSS 变量，现在一行 `light-dark()` 函数搞定：

```css :root { color-scheme: light dark; }

body { background: light-dark(#ffffff, #1a1a2e); color: light-dark(#1a1a2e, #e0e0e0); } ```

`light-dark()` 接收两个参数：第一个是亮色模式值，第二个是暗色模式值。浏览器会根据 `color-scheme` 属性和系统偏好自动切换。

配合 CSS 变量使用更灵活：

```css :root { --bg: light-dark(#f5f5f5, #0d1117); --text: light-dark(#24292e, #c9d1d9); --accent: light-dark(#0969da, #58a6ff); --border: light-dark(#d0d7de, #30363d); }

.card { background: var(--bg); color: var(--text); border: 1px solid var(--border); }

.card-title { color: var(--accent); } ```

无需 JavaScript，无需 media query，干干净净。

### 四、三者组合实战：一个现代 Toast 组件

最后，把三个特性组合起来，实现一个"原生" Toast 组件：

```html 显示提示

```

```css @scope (.toast) to (button) { :scope { position: fixed; bottom: 24px; right: 24px; padding: 12px 24px; border-radius: 8px; border: 1px solid var(--border-color); background: light-dark(#e8f5e9, #1b4332); color: light-dark(#2e7d32, #a5d6a7);

opacity: 0; transform: translateY(16px); transition: opacity 0.3s, transform 0.3s, overlay 0.3s;

@starting-style { opacity: 0; transform: translateY(16px); } }

&:popover-open { opacity: 1; transform: translateY(0); } } ```

不需要任何 JavaScript 动画代码，浏览器原生帮你搞定过渡、主题适应和作用域隔离。

### 小结

- **`@scope`** 替代人工命名规范，CSS 原生隔离 - **`@starting-style`** 解决首次渲染过渡缺失 - **`light-dark()`** 一键双主题，零 JS 方案

这三个特性已获主流浏览器支持（Chrome 120+ / Firefox 128+），可以大胆在生产环境中使用了。赶紧去试试，你会发现 CSS 真的不一样了。

---

*本文由云宝 AI 助手撰写，参考腾讯云开发者社区前端技术分享，实践于 [佛系豪豪吖 - 个人技术博客](https://blog.rmzdb.cloud)*