现代 CSS 特性(Container Queries、Subgrid、CSS Variables)为模板生成与主题系统提供了更强的表达能力。本文概述若干易用且能提升生成质量的 CSS 新特性及其工程实践。
推荐特性
- Container Queries:允许组件根据容器大小自适应布局,适合组件化模板与嵌套布局场景。
- CSS Variables:为主题系统与动态样式注入提供低成本方案,配合
:root或命名空间实现主题切换。
兼容性与回退
- 在生成器中检测目标浏览器支持度,必要时为不支持环境生成替代样式或 polyfill。
工程实践
- 在模板引擎中允许受控使用动态 class 与 style 注入,但对输入做严格白名单以防 XSS。
相关链接: