@
CSS @规则
CSS at-rule（@规则）速查，含用途与示例。
本地处理 · 不上传
加载工具中…
相关：CSS at-rule · @media · @keyframes · @supports
CSS @规则列出 @media、@supports、@import、@font-face、@keyframes 等规则的用法。
使用步骤
- 按用途定位需要的 @规则
- 对照示例确认它的书写位置与嵌套层级
- 注意部分 @规则必须写在样式表顶部
- 写完在目标浏览器实际验证支持情况
使用场景
- 查找 @规则的语法
- 做特性检测与渐进增强
- 引入自定义字体
- 定义动画与容器查询
小贴士
- @supports 做特性检测，能在支持新特性的浏览器上使用它、在不支持的浏览器上保持旧方案，是渐进增强的标准手段。
- @import 会阻塞并串行加载，影响首屏性能，生产环境应改用构建工具合并或用 link 标签并行加载。
- @font-face 应设置 font-display 属性，否则字体加载期间文字可能长时间不可见。
常见问题
@supports 怎么用？
写成 `@supports (display: grid) { ... }`，只有浏览器支持该属性时块内规则才生效。它让你能放心使用新特性，同时为旧浏览器保留回退方案，是渐进增强的标准做法。
@import 为什么不推荐？
因为它是串行加载的——浏览器必须先下载并解析外层 CSS，才发现里面还要再下载一个文件。这会延长关键渲染路径。生产环境应在构建时合并，或用多个 link 标签并行加载。
自定义字体加载时文字消失？
这是字体加载期间的不可见文本问题。在 @font-face 中设置 `font-display: swap` 让浏览器先用后备字体显示，字体加载完成后再替换，避免长时间的空白。
CSS @规则是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS @规则，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。