截至 2025 年 11 月，CSS 标准（主要由 W3C 和 WHATWG 推进）在近年新增了多个实用且强大的 CSS 属性和功能。虽然这些并非全部在“2025 年当年”首次引入，但许多已在 2024–2025 年间进入主流浏览器稳定支持阶段，成为现代前端开发的常用工具。

以下是 2025 年开发者应重点关注的新增或广泛支持的 CSS 属性与特性，适合用于技术文章、教程或项目实践：

---

🎨 2025 年值得关注的 CSS 新属性与功能

1. :has() —— “父选择器”终于来了！

状态：Chrome 105+、Safari 15.4+、Firefox 121+（2024 年全面支持）

/* 当 .card 内包含 .image 时，为其添加阴影 */
.card:has(.image) {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 表单验证：输入无效时高亮标签 */
label:has(input:invalid) {
  color: red;
}

✅ 意义：打破“只能向下选择”的限制，实现基于子元素状态的父级样式控制。

---

2. @layer —— 样式层管理

解决痛点：第三方库（如 Bootstrap）与自定义样式的优先级冲突

@layer reset, base, components, utilities;

@layer base {
  body { font-family: sans-serif; }
}

@layer components {
  .button { padding: 8px; }
}

• 层内规则遵循正常优先级；
• 层之间按 @layer 声明顺序决定优先级（后声明 > 先声明）；
• 未命名的样式默认在最高优先级层。

✅ 适用场景：大型项目、设计系统、组件库开发。

---

3. container-type + 容器查询（Container Queries）

替代媒体查询的局部响应式方案

<div class="card">
  <h2>标题</h2>
  <p>内容...</p>
</div>

.card {
  container-type: inline-size; /* 创建容器上下文 */
}

/* 当卡片宽度 < 400px 时隐藏标题 */
@container (max-width: 400px) {
  .card h2 { display: none; }
}

✅ 优势：组件可独立响应自身尺寸，不再依赖视口宽度，真正实现“组件级响应式”。

---

4. scrollbar-gutter —— 预留滚动条空间

解决页面因滚动条显示/隐藏导致的布局抖动

html {
  scrollbar-gutter: stable;
}

• stable：始终预留滚动条位置；
• stable both-edges：双侧预留（适用于双向滚动）。

✅ 用户体验提升：避免内容在 macOS（自动隐藏滚动条）与 Windows 间跳动。

---

5. accent-color —— 统一表单控件主色

一键定制复选框、单选按钮、范围滑块等颜色

input[type="checkbox"] {
  accent-color: #6366f1; /* Tailwind indigo-500 */
}

input[type="range"] {
  accent-color: tomato;
}

✅ 无需复杂 hack，原生支持跨浏览器一致的 UI 主题色。

---

6. color-mix() —— 原生颜色混合函数

无需 Sass/PostCSS，直接在 CSS 中混合颜色

.button {
  background-color: color-mix(in srgb, blue 70%, white 30%);
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}

支持色彩空间：srgb、lch、oklch 等，配合现代调色更精准。

---

7. @property（CSS Houdini 自定义属性类型）

让 CSS 自定义属性具备类型、初始值和继承性

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

.gradient {
  --gradient-angle: 45deg;
  background: linear-gradient(var(--gradient-angle), blue, purple);
  transition: --gradient-angle 0.3s; /* ✅ 现在可以动画了！ */
}

✅ 突破限制：以前 transition: --my-var 无效，现在可对自定义属性做插值动画！

---

8. font-palette —— 控制彩色字体调色板

适用于支持 COLRv1 的彩色字体（如 Emoji、图标字体）

.icon {
  font-family: "ColorFont";
  font-palette: --my-palette;
}

@font-palette-values --my-palette {
  font-family: "ColorFont";
  base-palette: 1;
  override-colors:
    0 #ff6b6b,
    1 #4ecdc4;
}

✅ 设计师友好：动态切换图标主题色，无需多套 SVG。

---

9. view-timeline 与 animation-timeline（滚动驱动动画）

用滚动代替时间轴触发动画

.hero {
  animation: fadeUp linear;
  animation-timeline: view();
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

• view()：基于元素在视口中的可见比例；
• 还支持 scroll() 时间线。

✅ 无需 JS 实现视差、渐显、进度条等交互动效。

---

10. :popover-open 伪类 + <dialog> 增强

原生弹窗交互更强大

<div popover id="tooltip">提示内容</div>
<button popovertarget="tooltip">悬停</button>

[popover]:not(:popover-open) {
  display: none;
}

[popover]:popover-open {
  animation: fadeIn 0.2s;
}

✅ 语义化 + 可访问性：浏览器自动处理焦点管理、ESC 关闭、点击外部关闭。

---

🌐 浏览器支持速查（2025 年 11 月）

特性	Chrome	Firefox	Safari	Edge
:has()	✅ 105+	✅ 121+	✅ 15.4+	✅
容器查询	✅ 105+	✅ 110+	✅ 16+	✅
@layer	✅ 99+	✅ 97+	✅ 15.4+	✅
scrollbar-gutter	✅ 94+	✅ 97+	✅ 15.4+	✅
accent-color	✅ 93+	✅ 92+	✅ 15.4+	✅
color-mix()	✅ 111+	✅ 113+	✅ 16.4+	✅
@property	✅ 78+	⚠️ 部分	✅ 16.4+	✅
滚动驱动动画	✅ 115+	✅ 118+	✅ 16.4+	✅

💡 大部分特性已进入 Can I Use 的“安全使用”区间，生产环境可放心采用。

---

✅ 结语

2025 年的 CSS 不再只是“装饰语言”，而是具备逻辑能力、响应能力、动画能力和工程化能力的现代样式系统。从 :has() 到容器查询，从 @layer 到滚动驱动动画，这些新特性正在重塑我们构建 Web 界面的方式。

---

🚀 ECMAScript 2025 正式发布：10 个让你眼前一亮的 JavaScript 新特性！

2025 年 6 月 26 日，ECMA 国际正式批准 ECMAScript 2025（第 16 版） 规范。作为 JavaScript 演进的重要里程碑，ES2025 引入了多项实用且强大的新特性，涵盖异步处理、集合操作、模块加载、正则表达式等多个核心领域。

本文将带你快速掌握 ES2025 最值得关注的 10 个新 API 和语法特性，助你写出更简洁、高效、可维护的现代 JavaScript 代码！

---

1️⃣ Promise.try()：统一同步与异步错误处理

问题背景

以往封装一个可能抛错的同步函数时，常需用 Promise.resolve().then(fn)，但这会引入不必要的微任务延迟，且异常捕获逻辑割裂。

新方案

function mightThrow() {
  if (Math.random() > 0.5) throw new Error("Oops");
  return "Success";
}

Promise.try(mightThrow)
  .then(console.log)
  .catch(console.error);

优势

• 同步错误自动转为 Promise reject；
• 避免微任务延迟，执行更及时；
• 统一 .catch 处理所有异常。

✅ 适用于封装第三方同步 API，提升错误调试效率。

---

2️⃣ Set 集合运算方法：告别手写交并差！

ES2025 为 Set 新增 7 个原生方法，支持标准集合论操作：

const A = new Set([1, 2, 3]);
const B = new Set([3, 4, 5]);

console.log(A.union(B));              // Set {1, 2, 3, 4, 5}
console.log(A.intersection(B));       // Set {3}
console.log(A.difference(B));         // Set {1, 2}
console.log(A.symmetricDifference(B)); // Set {1, 2, 4, 5}

console.log(A.isSubsetOf(B));         // false
console.log(A.isSupersetOf(B));       // false
console.log(A.isDisjointFrom(B));     // false

💡 这些方法让 JS 的集合操作终于媲美 Python！适用于权限管理、标签筛选、数据去重等场景。

---

3️⃣ 原生 JSON 模块导入（Import Attributes）

无需 fetch，直接把 .json 文件当作模块导入！

静态导入

import config from './config.json' with { type: 'json' };
console.log(config.apiKey);

动态导入

const { default: data } = await import('./data.json', {
  with: { type: 'json' }
});

🔒 浏览器通过 with { type: 'json' } 显式声明资源类型，提升安全性与可读性。

---

4️⃣ 同步迭代器链式操作（Iterator Helpers）

现在所有可迭代对象（如数组、Set、Map、字符串）的迭代器都支持链式方法：

const arr = ['a', '', 'b', '', 'c', 'd'];
const result = arr.values()
  .filter(x => x)
  .map(x => x.toUpperCase())
  .toArray();

console.log(result); // ['A', 'B', 'C', 'D']

支持的方法包括：

• .filter(), .map(), .flatMap()
• .some(), .every(), .find()
• .reduce(), .forEach()
• .drop(n), .take(n), .toArray()

⚡ 惰性求值 + 内存友好，特别适合处理大型数据流或生成器。

---

5️⃣ RegExp.escape()：安全转义正则字符串

动态构建正则时，再也不用手动转义特殊字符！

const raw = "(foo)*+?";
const escaped = RegExp.escape(raw);
console.log(escaped); // "\(foo\)\*\+\?"

🛡️ 有效防止正则注入漏洞，替代自定义 escapeRegExp 函数。

---

6️⃣ 正则表达式内联标志（局部修饰符）

可在正则内部局部启用/禁用标志，如 i（忽略大小写）：

const re = /^x(?i:HELLO)x$/;
console.log(re.test('xHELLOx')); // true
console.log(re.test('xhellox')); // true
console.log(re.test('XhelloX')); // false ← 外围仍区分大小写

🎯 精准控制匹配行为，避免全局标志污染。

---

7️⃣ 重复命名捕获组

不同分支可复用相同捕获组名，简化日期、ID 等多格式解析：

const DATE_REGEX = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})
  |(?<month>\d{2})/(?<day>\d{2})/(?<year>\d{4})$/;

const match = '2025-11-25'.match(DATE_REGEX);
const { year, month, day } = match.groups; // 直接解构，无需判断分支

🧩 极大简化多格式文本解析逻辑。

---

8️⃣ 延迟模块加载（defer import）

预加载但延迟执行，优化首屏性能：

defer import { heavyModule } from './heavy.js';

button.onclick = async () => {
  await heavyModule.run(); // 此时模块已加载完毕，仅执行代码
};

vs 动态 import()

特性	defer import	import()
加载时机	声明时并行加载	调用时加载
执行时机	首次访问导出时	加载后立即执行
适用场景	高频交互模块（弹窗、编辑器）	路由级懒加载

🚀 实现“预加载 + 按需执行”的完美平衡。

---

9️⃣ BigInt 增强支持

虽然 BigInt 在 ES2020 已引入，但 ES2025 进一步优化其与标准库的兼容性，例如：

• 支持 BigInt 作为 Array.prototype.sort 的比较值；
• 更完善的 JSON.stringify 行为（需配合 reviver 使用）。

---

🔟 其他改进

• Symbol.prototype.description 属性更稳定；
• 更严格的模块解析错误提示；
• 性能优化：减少闭包内存占用、提升 Promise 链执行效率。

---

🌐 浏览器支持情况（截至 2025 年 11 月）

特性	Chrome 128+	Firefox 130+	Safari 18+	Node.js 22+
Promise.try()	✅	✅	✅	✅
Set 方法	✅	✅	✅	✅
JSON 模块导入	✅	⚠️（实验）	✅	✅（需 flag）
Iterator Helpers	✅	✅	✅	✅
RegExp.escape()	✅	✅	✅	✅
defer import	✅	❌	⚠️	❌（暂未支持）

💡 建议搭配 Babel 或 TypeScript 编译以兼容旧环境。

---

✅ 结语

ECMAScript 2025 不仅延续了 JavaScript “渐进增强” 的设计哲学，更在开发体验、性能、安全性上迈出坚实一步。无论是简化日常编码，还是优化大型应用架构，这些新特性都值得你立即尝试！