应使用@supports检测css特性而非useragent嗅探，它在chrome28+等现代浏览器支持而ie完全不支持，需具体检测子特性、避免嵌套，并配合fallback值确保兼容性。
用 @supports 替代用户代理嗅探判断 CSS 特性可用性
靠 navigator.userAgent 判断浏览器版本再加载不同样式，既不可靠又难维护。现代做法是直接检测特性是否存在——@supports 就是为此而生。
比如你想用 aspect-ratio，但得给老浏览器 fallback：
@supports (aspect-ratio: 1/1) {
.card {
aspect-ratio: 4/3;
}
}
@supports not (aspect-ratio: 1/1) {
.card {
position: relative;
}
.card::before {
content: "";
display: block;
padding-top: 75%; /* 3/4 = 75% */
}
.card > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
}
-
@supports在 Chrome 28+、Firefox 22+、Safari 12.1+、Edge 79+ 均支持；IE 完全不支持，所以它天然被排除在外——这正是你想要的：不支持的浏览器直接跳过整块规则 - 不要写
@supports (display: grid)这种“半吊子”检测：旧版 Safari（10.1–11）虽声明支持display: grid，但不支持grid-template-areas或gap，应具体到你要用的子特性 - 避免嵌套
@supports，可读性会断崖式下降；复杂逻辑建议拆成独立类名 + JS 检测后加 class
Flexbox 布局中慎用 flex: 1 和 min-width: 0
在 IE10–11 和早期 Safari（≤9）里，flex: 1 行为和现代标准不一致：它可能忽略父容器约束、撑破容器，或让子项无法收缩。
典型症状是卡片列表横向溢出、表单控件错位、文字截断失效。
- 替代方案：显式写
flex-grow: 1; flex-shrink: 1; flex-basis: 0;，IE10–11 对这三个属性的支持更稳定 - 当 flex 子项含长文本或图片时，IE 和旧 Safari 默认不自动换行/缩放，必须加
min-width: 0（或overflow: hidden）触发 BFC，否则flex-basis: 0失效 - 不要依赖
flex-wrap: wrap在 IE 中精确控制换行位置——它的计算逻辑有偏差，建议用媒体查询 + 固定列数兜底
渐进增强下，CSS 自定义属性（--var）不能单独作为主样式源
自定义属性本身不被 IE 支持，且所有浏览器中，它都**不具备降级能力**：如果 color: var(--text-primary); 后面没跟 fallback，IE 和旧 Edge 直接忽略整条声明，导致文字变透明或继承错误颜色。
- 必须写成
color: #333; color: var(--text-primary);——注意顺序：fallback 在前，var()在后；CSS 解析器会跳过不认识的函数，保留前面有效值 - JS 注入的自定义属性（如
el.style.setProperty('--size', '16px')）在 IE 中完全无效，这类动态逻辑需用 class 切换或内联style属性代替 - 构建工具（如 PostCSS）可帮你自动补 fallback，但仅限静态变量；含 calc() 或 theme 函数的动态值仍需手动处理
伪元素兼容性陷阱：::before vs :before 和内容截断
双冒号 ::before 是 CSS3 规范写法，但 IE8 只认单冒号 :before；更麻烦的是，IE8–10 对 content 的支持极弱：不支持 attr()、不支持 Unicode 超出 BMP 平面（如 ?）、对空格和换行符渲染异常。
- 若需兼容 IE8–10，统一用
:before和:after；现代项目可只写双冒号，但构建流程中应通过 Autoprefixer 或 postcss-pseudo-class-any-link 补单冒号（仅针对 IE） - 用伪元素做图标时，避免
content: "?";，改用字体图标（content: "\f001";）或 SVG 背景图，确保字符集兼容 - 用伪元素实现“展开收起”箭头旋转动画时，IE10 不支持
transform在伪元素上生效，得把 transform 移到父元素并用overflow: hidden配合裁剪
真正棘手的从来不是“怎么写新特性”，而是当一个看似无害的 gap: 1rem 在 Safari 11.1 里变成 0、或 position: sticky 在 Firefox 58 前完全静默时，你是否在测试矩阵里覆盖了那个刚好卡在中间的版本。别信 caniuse 的绿色勾，要信你 CI 里跑着的真实设备截图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
