浏览器支持

这套组件不靠 JS 补丁解决样式和浮层问题，而是直接用了浏览器自带的现代能力。好处是代码小、无障碍好、没有额外依赖；代价是有一条底线：太老的浏览器上会掉东西。

先把底线说清楚：

浏览器	最低版本
Chrome、Edge	123
Safari（含 iOS）	17.5
Firefox	120

这个底线是 light-dark() 定的，因为几乎每个颜色变量都写成 light-dark(浅色, 深色)。比它老的浏览器看不懂这个函数，会把整条声明丢掉，页面就只剩黑白和无色状态。

我们实际用到的特性

下面每一条都在 packages/core/styles 里真实出现过，不是照抄原版清单。

特性	用在哪	Chrome	Safari	Firefox
`light-dark()`	所有主题颜色变量	123	17.5	120
`@layer` 分层	每份样式表的第一行，声明 `astryx.*` 五层顺序	99	15.4	97
`:has()`	表单状态、列表、聊天、Tab 的父子联动样式	105	15.4	121
`color-mix()`	计算悬停底色、滑杆、代码块等的过渡色	111	16.2	113
`@property`	注册按压动画用的自定义属性，让它能做数字动画	85	16.4	128
Popover API	下拉菜单、提示、命令面板、Toast 视口：用原生 `popover` 和 `popovertarget`	114	17	125
`<dialog>` + `showModal()`	对话框、底部抽屉、大图查看	37	15.4	98
`@starting-style`	浮层、抽屉、Toast 的入场动画起点	117	17.5	129
容器查询 `@container`	分页、步骤条、聊天的窄宽自适应	105	16	110
`text-wrap: balance` / `pretty`	标题平衡换行、正文避免孤字	114	17.5	121
`:dir()`	滑杆等少数地方的方向判断	120	16.4	49
逻辑属性	内外边距、圆角、定位大量用 `padding-inline-start` 这类写法	87	14.1	66

@property 和 @starting-style 属于「没有也不崩」：缺了它们，按压动画和入场动画直接不播，界面照常能用。真正决定底线的是 light-dark()。

版本号按 MDN 和 caniuse 的记录写成，写这份文档时的数据；拿不准就去 caniuse 搜一下特性名。

低于底线会怎样

颜色全丢。 light-dark() 认不出来，--astryx-color-* 拿不到值，文字可能变成默认的黑色。
浮层还在，但可能不贴着触发器。 原生 popover 不支持时，菜单和提示还能打开，位置靠 CSS 兜底，不会那么准。
对话框可能打不开。 <dialog> 的 showModal() 没有时，对话框组件没有降级路径。
动画不播。 入场、按压这类动效消失，内容照样显示。

没有一条会让页面白屏。但视觉按预期走不了，所以老浏览器不算支持。

想支持更老的浏览器怎么办

我们没有提供老浏览器专用的回退包，也没有内置 polyfill。可行的做法有三种。

1. 用户群很老，就守住底线。 内部工具通常能推浏览器升级，这是最省事的路径。

2. 用 @supports 探测，自己补一份颜色。 可以在应用入口检查 light-dark() 在不在，不在就给变量写死浅色值：

css

@supports not (color: light-dark(#fff, #000)) {
  :root {
    --astryx-color-text-primary: #000000;
    --astryx-color-background-surface: #ffffff;
  }
}

这只补回颜色，浮层定位和动画不会因此变好。

3. 需要老浏览器上也完整可用，就得自己改。 包括引入 popover 和 @starting-style 的降级写法，或者在项目里重写相关组件的浮层实现。这类改造不在组件库的范围内。

我们已经替你处理的兼容细节

iOS 输入框自动放大。 iOS 上输入框字号小于 16px 时，聚焦会自动放大页面。所有输入类组件在触摸设备上都把字号顶到至少 1rem，靠 @supports (-webkit-touch-callout: none) 只在 iOS 上生效。
减少动效。 全局有一条 prefers-reduced-motion: reduce 规则，把入场和退场的位移、缩放、透明度变化压成「没有」，各组件也有自己的关闭规则。系统开了「减弱动态效果」，动画就不播。
滚动条。 滚动条样式集中在 scrollbars.css，靠 overlayscrollbars 这个运行时依赖实现，配色用 color-mix() 从文字色混出来，所以深色模式也能跟着走。

自己验一遍

在浏览器控制台里粘这段，能查到你手上这台浏览器缺哪几项：

const checks = {
  'light-dark()': CSS.supports('color', 'light-dark(#fff, #000)'),
  '@layer': CSS.supports('at-rule', '@layer a, b;'),
  ':has()': CSS.supports('selector(:has(*))'),
  'color-mix()': CSS.supports('color', 'color-mix(in oklab, red, blue)'),
  'Popover API': typeof HTMLElement.prototype.showPopover === 'function',
  '@container': CSS.supports('container-type', 'inline-size'),
}
console.table(checks)

有一项是 false，就对照上面的表格看这一项影响什么。light-dark() 是 false 时，页面颜色基本不可用。

浏览器支持 ​

我们实际用到的特性 ​

低于底线会怎样 ​

想支持更老的浏览器怎么办 ​