@supports 检测必须写在规则块内，且条件需浏览器真实可解析，如 gap 需与 display: grid 联合检测；position: sticky 在 safari 有 overflow 和 transform 限制；line-clamp 兼容需区分引擎；字体渲染差异需靠 font-feature-settings 和系统回退链控制。
@supports 检测必须写在规则块内部，不能只靠 autoprefixer
autoprefixer 只补前缀，不解决语法是否被识别的问题。比如 gap 在 Safari 14.1 以下、IE 11 完全无效，加了 -webkit-gap 也没用——因为这个属性压根没被实现过。
- 错误写法：
.grid { display: grid; gap: 1rem; }→ Safari 14.0 直接忽略整条规则，布局崩塌 - 正确写法：用
@supports (display: grid) and (gap: 1rem)包裹 Grid + gap 组合，否则 fallback 到 Flex 布局 - 注意：
@supports的条件必须是浏览器**真实能解析并判断真假**的表达式，不能写@supports (gap: 1rem)单独检测（旧 Safari 会直接报语法错误） - 验证方式：在目标浏览器 DevTools 的 Styles 面板里，看该规则是否显示为灰色带
invalid—— 如果是，说明@supports条件没生效或写错了
position: sticky 在 Safari 中失效不是加前缀能解决的
Safari 12–15.6 对 position: sticky 有两处硬性限制：父容器不能设 overflow: hidden，且元素自身不能是 transform 或 will-change 的后代。Chrome 和 Firefox 没这问题，所以开发时看着正常，上线后 Safari 用户就“粘不住”。
- 先检查计算样式里
position是否真的生效（不是显示为static） - 降级方案别用
position: fixed简单替代——它脱离文档流，会撑不开父容器高度；改用 JS 监听滚动 + 动态切position: relative/fixed - 如果必须纯 CSS，可用
@supports not (position: sticky)+position: -webkit-sticky（仅对 Safari ≤15.6 有效），但 iOS WebView 仍可能失效
line-clamp 和 ::first-letter 在 Chrome/Firefox/Safari 渲染逻辑不同
display: -webkit-box + -webkit-line-clamp 是 WebKit 专属 hack，Firefox 自 73+ 支持标准 line-clamp，但 Safari 16.4 才开始支持，且三者对 ::first-letter 的层叠顺序处理不一致——常导致省略号盖不住首字母，或首字母变小。
- 不要混用
-webkit-line-clamp和标准line-clamp，否则部分 Safari 版本会同时触发两次截断 - 若需兼容 Firefox + Safari ≥16.4，写
@supports (line-clamp: 2)分支；否则坚持用 WebKit 方案，并手动给::first-letter加z-index: 1和position: relative - 注意：Chrome 120+ 已废弃
-webkit-line-clamp的某些行为（比如和flex容器嵌套时），建议用text-overflow: ellipsis+ 固定行高 +max-height替代
字体渲染差异不是 CSS 能统一的，得靠 font-feature-settings 和系统回退链
Chrome（Windows）默认用 DirectWrite 渲染，Safari（macOS）用 Core Text，Firefox 各平台策略还不一样——同一 font-family 在不同环境里字重、字宽、连字表现都可能不同，font-smoothing 已被 Chrome 119+ 废弃，-webkit-font-smoothing 在 macOS Safari 17+ 也失效。
- 关键控制点是
font-feature-settings：比如启用"liga"（连字）、"kern"（字距微调），但 Chrome 和 Firefox 对同一值的支持程度不同，必须用@supports (font-feature-settings: "liga")包裹 - font-family 回退链要写全：比如
font-family: "SF Pro Display", "Helvetica Neue", system-ui, sans-serif，其中system-ui在各平台自动匹配本地 UI 字体（San Francisco / Roboto / Segoe UI），比硬写Helvetica更可靠 - 避免用
font-weight: bolder或lighter，不同浏览器对同一文字的“更粗/更细”映射关系不一致，固定用font-weight: 500/600等数值
@supports 条件是否真被目标浏览器执行——不是写了就生效，得打开真机或对应版本模拟器，看 Styles 面板里规则有没有灰掉、有没有 fallback 被启用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
