AI 摘要：本文提出了一种通过扩展 CSS 解析器来改进 CSS 功能 polyfill 的新方案，旨在解决当前 CSS polyfill 开发中遇到的解析和样式应用难题。作者建议允许开发者通过 JavaScript 扩展 CSS 解析器，从而直接支持新语法、属性和函数，以减少 polyfill 的复杂性和性能开销。

Intro
• 问题背景：新 CSS 功能的采用因跨浏览器支持不足而受阻，开发者通常需等待功能广泛可用（约 4 年）才会使用。
• 现有方案限制：当前 CSS polyfill（如容器查询 polyfill）需自行解析 CSS，其中 65% 的代码仅用于解析和提取信息，效率低下。

How to (try to) polyfill CSS today
• 收集样式：需从多个来源（如 document.styleSheets、Shadow DOM）获取样式，并监听变动。
• 解析样式：需处理 CORS 限制，手动实现完整 CSS 语法解析（需持续跟进新语法如嵌套）。
• 应用样式：需自行实现级联逻辑、媒体查询和 Shadow DOM 兼容性，复杂度高。

Proposed Solution
• 核心思路：通过 CSS.parser API 让开发者注册新语法（如关键词、函数、属性），使解析器保留相关标记
• 示例 API：registerKeyword()、registerFunction()、registerProperty()
• 优势：减少重复解析工作，提升性能，支持 getComputedStyle 和 @supports 检测

Examples
1. 注册关键词 random：动态生成随机值。
2. 注册函数 light-dark()：根据 color-scheme 返回不同颜色。
3. 注册属性 size ：作为 width/height 的简写，自动展开为声明块。
4. 注册语法 <position-arg> ：扩展 position: fixed 支持附加参数（如 / visual）。

Outcome and considerations
• 收益：
• 降低 polyfill 开发难度，提升性能和鲁棒性。
• 加速新 CSS 功能的采用，允许浏览器厂商快速原型化。
• 风险：
• 需谨慎处理代码执行时机，避免阻塞渲染流程。
• 需浏览器厂商广泛支持，部分功能（如伪元素）可能难以 polyfill。

Next steps
• 撰写详细提案并提交至 CSS WG 征求意见。
• 预计需多年时间推进，但已获得部分 Google 工程师和社区成员的关注。

Bram.us

Polyfilling CSS with CSS Parser Extensions

In April I attended #BlinkOn, the conference for web platform contributors in the Chromium open source project. At the conference I gave a presentation about “CSS Parser Extensions”, a wild idea I have to fix CSS polyfilling once and for all.

If you didn’t…