出处：掘金

原作者：ErpanOmer

CSS 中的 @规则（At-rules） 是非常重要却常被忽略的部分。无论你是刚入门，还是在优化大型样式架构，这些“以 @ 开头”的规则都值得你系统了解

本文将一次性梳理所有 CSS 官方定义的 @规则，并为每个规则附上用法示例、兼容性信息、以及实用小贴士，适合整理到收藏夹或作为长期参考文档

什么是 @规则？

CSS 的 at-rules 是以 @ 开头的语句，它们通常用来：

• 引入其他样式表
• 条件性地应用样式（媒体查询、支持检测等）
• 定义动画、字体、层级等全局规则
• 在构建工具或框架中引导样式行为（如 @tailwind , @apply）

所有 CSS @规则完整清单

@import

作用：引入外部 CSS 文件

@import url("theme.css");

• 位置：必须放在样式表顶部，在其他规则之前
• 注意：同步阻塞加载，不推荐用于性能敏感的项目
• 冷知识：你可以使用媒体查询限定导入范围：

@import url("print.css") print;

@media

作用：响应式设计的核心，基于视口、屏幕、输入方式等条件有选择性地应用样式

@media (max-width: 768px) {
  body { font-size: 14px; }
}

• 支持的条件包括：min-width、hover、pointer、orientation 等
• 冷知识：可以多条件组合：

@media (min-width: 600px) and (orientation: landscape) { ... }

@supports

作用：检查浏览器是否支持某一 CSS 属性或语法

@supports (display: grid) {
  div { display: grid; }
}

• 非常适合渐进增强与兼容性处理
• 冷知识：支持 not 和多条件嵌套

@font-face

作用：引入自定义字体文件

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

• 提供 font-display 控制加载行为：swap、block、fallback
• 冷知识：你可以在 unicode-range 中指定支持的字符子集，加快加载速度

@keyframes

作用：定义动画关键帧序列

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

• 配合 animation-name 使用
• 冷知识：from 和 to 是 0% 和 100% 的语法糖

@page

作用：为打印样式定义页面边距、方向等

@page {
  margin: 2cm;
  size: A4 portrait;
}

• 仅适用于打印场景。
• 可以通过伪类定制首页、左页、右页：

@page :first { margin-top: 5cm; }

@namespace

作用：为 XML 或 SVG 设置命名空间，几乎只用于 XHTML 项目

@namespace svg url("http://www.w3.org/2000/svg");
svg|circle { fill: red; }

• 冷门但在处理复杂 XML/MathML/SVG 样式时可能需要

@layer（CSS Layers）

作用：定义样式层级，优雅控制样式优先级，CSS 的原生分层机制

@layer reset, base, theme, components, utilities;

@layer base {
  h1 { font-size: 24px; }
}

• 类似 z-index，但是样式优先级上的“层”
• 冷知识：它可以与 @import 结合使用：

@import url("reset.css") layer(reset);

• 浏览器支持：Chrome 99+, Safari 15.4+, Firefox 97+

layer

@scope（CSS Scoped Styles）

作用：创建局部样式作用域，只对特定 DOM 区块生效

@scope (.card) {
  h2 { color: red; }
}

• 可以像 <style scoped> 一样创建“局部样式表”，但原生支持
• 冷知识：还可以嵌套多个选择器范围：

@scope (.modal) to (.modal-footer) {
  button { background: green; }
}

• 支持：Chrome 117+，Firefox 115+

其他已废弃 / 非标准 / 仅限预处理器的 @规则

⛔ @charset

声明编码格式。只在 CSS 文件顶部用过，现代项目一般使用 UTF-8 默认值，不再常用

@charset "UTF-8";