css-non-blocking

用途：该技能用于审查与“无阻塞加载 CSS”相关的样式表、组件样式及响应式表现，目标是避免 CSS 阻塞 DOM 解析和渲染，改善首次内容绘制（FCP），防止用户在样式下载与解析期间看到空白屏幕。主要能力：检查 CSS 加载实现是否为非阻塞；审查样式表、组件样式与响应式状态，指出渲染界面中违反该规则的具体选择器、声明或断点。快速参考要点：使用 <link rel="preload" as="style"> 配合 onload 处理；内联关键 CSS，延迟非关键样式；用媒体查询按视口或特性拆分 CSS；Next.js/Vite 等现代框架会自动处理。使用方式：按 Check（分析 CSS 加载实现是否不阻塞 DOM 解析与渲染）、Fix（用 preload 技术配合 media 属性和 loadCSS polyfill 实现非阻塞加载）、Explain（解释无阻塞加载如何避免渲染阻塞资源延迟首屏绘制）、Code Review（审查样式表、组件样式与响应式状态，标记违反规则的选择器、声明或断点）四种模式使用。完整实现细节、代码示例与框架相关指导见 references/rule.md，规则页为 https://frontendchecklist.io/en/rules/css/css-non-blocking。限制：所给资料未提供具体代码示例、兼容性范围、性能基准或支持框架的完整列表；使用前需确认目标浏览器与构建工具是否适用。