首屏关键CSS是指影响首屏渲染视觉内容的样式，如.header、.hero-banner等；需保留媒体查询、内联时同步引入@font-face和自定义属性，并用media属性延迟非关键CSS加载。

怎么判断哪些CSS算“首屏关键CSS”

关键CSS不是按文件大小或选择器数量来定的，而是看它是否影响首屏渲染的视觉内容。比如一个.header、.hero-banner、.main-nav类在DOMContentLoaded前就被浏览器用来绘制首屏像素，它们就是关键的；而.modal-overlay或.pagination这类只在用户滚动/交互后才出现的样式，就不该塞进首屏。

• 用 Chrome DevTools 的 Rendering → Paint flashing 开启后滚动观察，亮色块覆盖区域对应的样式大概率是关键的
• 禁用 JavaScript 后仍显示的首屏结构（如 logo、标题、首张图容器），其样式必须内联或提前加载
• 媒体查询本身不决定“关键性”，但@media (max-width: 768px)在移动端访问时，其中匹配的规则可能比桌面版更关键

提取关键CSS时，media属性不能丢

很多工具（比如critters或手写脚本）默认只提取无媒体查询的规则，结果导致响应式断层：PC端正常，手机打开一片白或者布局错乱。这是因为@media不是装饰，而是条件开关——浏览器只在匹配时应用其中的声明。

• 提取工具必须开启includeMediaQueries: true（critters）或等效选项，否则@media (prefers-color-scheme: dark)这类规则直接消失
• 手动提取时，别只复制{...}，要连同@media整块保留，例如：

  @media (min-width: 640px) {
    .container { max-width: 640px; }
  }

• 注意嵌套媒体查询（如 Sass 中的@media screen and (min-width: ...)），编译后若被拆成多个@media块，每个都得单独识别和保留

link[rel="stylesheet"]里加media属性能延迟非关键CSS

把非关键CSS的<link>标签加上media属性（比如media="print"或media="(min-width: 992px) and (orientation: landscape)"），浏览器会把它标记为“不阻塞渲染”，直到条件满足才下载解析。这是原生、零构建成本的懒加载方式。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用media="not all"可彻底阻止初始加载，后续用 JS 切换回media="all"来按需激活（适合主题切换或夜间模式）
• 避免用media="screen"——它等价于不写media，依然阻塞渲染
• 注意兼容性：media属性在所有现代浏览器中生效，但 IE11 及更早版本会忽略带media的<link>，所以别把关键CSS放在这里

内联关键CSS后，media查询里的字体或变量可能失效

内联的<style></style>标签不支持@import，也**无法引用外部@font-face或 CSS 自定义属性（:root定义）**，除非这些定义也在同一处内联。否则你会看到文字回退成系统字体，或颜色值变成var(--primary, #000)未解析的原始字符串。

立即学习“前端免费学习笔记（深入）”；

• 如果用了@font-face，必须把整个声明块复制进内联<style></style>，且确保src路径在内联上下文中仍有效（推荐用 base64 或相对根路径）
• 自定义属性要提前内联定义，例如在最前面加：

  :root {
    --primary: #3b82f6;
    --spacing-sm: 0.5rem;
  }

• 不要指望内联 CSS 能“继承”HTML 文档外的变量作用域——它就是独立的一小段样式表，范围仅限自身

实际做下来，最难的不是提取，而是验证：不同设备、不同网络条件、不同用户偏好（深色模式、减少动画）下，首屏是否真没 FOUC、没布局跳动、没字体闪烁。这些边界场景，光靠本地测试容易漏。