快速开始

兼容性

为新 CSS 功能保留可用的回退方案、验证浏览器行为，并安排第三方样式在层叠中的位置。

本页内容

Master CSS 生成 CSS；浏览器决定能够应用哪些属性、值和选择器。先建立可用的基础，再在有助改善体验时加入较新的功能，并检查现有样式如何参与层叠。

这些示例假设已完成安装，且应用已加载 @import '@master/css';。

#确认浏览器基础要求

默认预设使用层叠层、OKLCH 颜色和 light-dark() 生成自适应值。为增强功能提供回退方案不会免除这些基础要求。请按需要支持的浏览器确认浏览器基础要求和厂商前缀。

类名被识别并不保证浏览器兼容。Master 只会为部分属性输出兼容前缀，不会为每项新功能提供 polyfill。同样，工具返回 unknown 表示该检查尚未验证此 CSS，并非证明它无效或可以安全发布。

#添加功能，保留回退方案

#原生声明

即使无法自动调整大小，笔记字段也应保持可编辑。先设置普通 textarea 尺寸并允许垂直调整，再加入 field-sizing: content 作为增强。此原生属性可根据内容调整控件大小；最小和最大高度将其限制在实用范围内。

field-sizing: content 检查中……

具有回退方案的笔记字段

<div class="w-full (max-width:28rem) mx-auto">  <label for="project-note" class="block mb-xs text-sm fg-text-strong">Project notes</label>  <textarea id="project-note" name="note" rows="3" class="block w-full p-sm r-md b(1) b-solid b-line-divider bg-surface-inset text-sm fg-text-strong (resize:vertical) (min-height:6rem) (max-height:12rem) outline(2):focus-visible outline-solid:focus-visible outline-offset(3) (field-sizing:content)@supports(field-sizing:content)">Plan the next release. Review the draft. Check the examples. Test with a keyboard. Verify the small screen. Publish when ready.</textarea></div>

生成的 CSS

@layer theme {  :root,  :host {    --color-zinc-5: oklch(96.5% .0011 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-inset {    background-color: var(--color-surface-inset)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .block {    display: block  }  .mx-auto {    margin-inline: auto  }  .mb-xs {    margin-bottom: var(--spacing-xs)  }  .outline-offset\(3\) {    outline-offset: calc(3 * 1px)  }  .p-sm {    padding: var(--spacing-sm)  }  .w-full {    width: 100%  }  .\(max-height\:12rem\) {    max-height: 12rem  }  .\(max-width\:28rem\) {    max-width: 28rem  }  .\(min-height\:6rem\) {    min-height: 6rem  }  .\(resize\:vertical\) {    resize: vertical  }  .outline-solid\:focus-visible:focus-visible {    outline-style: solid  }  .outline\(2\)\:focus-visible:focus-visible {    outline-width: calc(2 * 1px)  }  @supports (field-sizing:content) {    .\(field-sizing\:content\)\@supports\(field-sizing\:content\) {      field-sizing: content    }  }}

增加或删除行数。支持的浏览器会让字段增高，最高到 12rem；否则保持初始大小。两种情况下都能滚动和调整大小。

(field-sizing:content) 提供原生声明。其 @supports(field-sizing:content) 后缀会将声明放入 CSS 功能查询。查询不匹配时，基础样式和普通 textarea 行为仍会保留。

预览会检查当前浏览器的语法支持，也请在目标浏览器测试实际编辑行为。要在支持的浏览器检查回退方案，可暂时移除条件类名：字段应停止自动增高，但仍能通过滚动访问所有文本。这是在隔离增强功能，并非模拟旧浏览器。

使用生成的 CSS 检查输出条件。条件记录了类名语法；原生 CSS 可表达更复杂的功能查询。

#新的选择器

基于选择器的增强也适用相同方法。这里 :has(:checked) 会在复选框选中时让标签显示蓝色边框。即使不支持此选择器，原生复选框仍会记录选择：

选中状态与可选的强调效果

<label class="flex items-center gap-sm w-fit mx-auto p-sm r-md b(1) b-solid b-line-divider bg-surface-raised text-sm fg-text-strong b-blue-60:has(:checked)">  <input type="checkbox" name="updates" class="m(0) shrink(0) (accent-color:currentColor)">  <span>Send me release notes</span></label>

生成的 CSS

@layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265);    --color-blue-60: oklch(51.83% .2687 266.1)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .items-center {    align-items: center  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .flex {    display: flex  }  .shrink\(0\) {    flex-shrink: 0  }  .gap-sm {    gap: var(--spacing-sm)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mx-auto {    margin-inline: auto  }  .p-sm {    padding: var(--spacing-sm)  }  .w-fit {    width: fit-content  }  .\(accent-color\:currentColor\) {    accent-color: currentColor  }  .b-blue-60\:has\(\:checked\):has(:checked) {    border-color: var(--color-blue-60)  }}

选中复选框。支持的浏览器还会改变标签边框；勾选标记是选择状态的主要提示。

让基础样式独立于新选择器。不要让必要控件或内容依赖增强功能。选择器拼写和组合方式请参阅选择器。

#将第三方 CSS 纳入层叠

如果普通工具类应覆盖库的普通样式，请将其 CSS 导入较早的 defaults 层。在 Master 集成处理的应用 CSS 入口中，于这些导入之前声明层叠层顺序。

如果项目已使用 Swiper 核心、导航和分页样式，请通过此入口加载，不要再从其他地方导入未分层副本：

app.css

@layer theme, base, defaults, components, utilities;@import 'swiper/css' layer(defaults);@import 'swiper/css/navigation' layer(defaults);@import 'swiper/css/pagination' layer(defaults);@import '@master/css';@layer components {  .swiper-slide {    background-color: var(--color-surface-raised);  }}

在轮播现有标记中，一张幻灯片可保留组件表面，另一张则加入局部工具类：

<div class="swiper-slide">Default surface</div><div class="swiper-slide bg-blue-60 fg-white">Featured slide</div>

utilities 中的普通背景声明优先于 components，后者又高于 defaults。调整 HTML 类名顺序不会改变结果。

添加更强覆盖前，请先在浏览器开发者工具检查竞争声明。同一作者来源和上下文中，普通未分层样式优先于普通已分层样式。厂商 CSS 的 !important 声明也会优先于普通工具类；重要声明会反转层叠层顺序。这些是原生层叠规则，不是 Master 专属的优先级系统。层叠层提供逐步诊断方法。

Master 管理的样式表默认保留原生选择器。如果启用原生裁剪，请在你能控制的样式表中通过 @preserve native 保护厂商、CMS 和外部注入的选择器，或将这些来源排除在裁剪范围之外。第三方小组件使用的选择器未必出现在应用扫描的标记中。