判断CSS属性值是否有效需分场景：CSS.supports()仅验证规范支持性，getComputedStyle()比对计算值可确认实际生效；自定义属性有效性取决于使用处（如var()）是否触发回退；属性名错误会抛SyntaxError，须严格匹配标准名。
怎么判断一个CSS属性值是否有效
浏览器不会主动告诉你某个 color: tomato; 是合法的、而 color: fuchsiaish; 是无效的——它只是静默丢弃。真正有效的判断方式，是查 CSS.supports() 的返回值，或者用 getComputedStyle() 看最终计算值是否被覆盖。
注意：CSS.supports() 只能检查「属性名 + 值」的组合是否被当前浏览器支持（比如 CSS.supports('display', 'grid')），但它不校验语法错误（如 color: #gg00ff;）或运行时上下文限制（如 contain: paint 在非定位元素上无效）。
-
CSS.supports()返回true仅表示该组合在规范中被定义且浏览器实现了它，不代表一定能生效 - 写死的值（如
font-size: 2em）可用getComputedStyle(el).fontSize对比原始声明，若不一致，大概率被忽略或降级 - 动态插入的样式（
el.style.color = 'invalid'）会直接失败，但不会报错，el.style.color读出来仍是空字符串
CSS自定义属性（--foo）的值有效性怎么验
自定义属性本身没有类型约束，--gap: 12px 和 --gap: banana 都算“有效”——直到你在 gap: var(--gap) 中使用它。这时才触发真实校验。
所以关键不是“存的时候验”，而是“用的时候看是否 fallback 或被丢弃”。常见陷阱是：写了 var(--size, 1rem) 却误以为 --size 有默认值，其实只要 --size 被设为 initial 或空字符串，1rem 就不会生效（因为 var() 只在变量未定义或完全缺失时才用 fallback）。
立即学习“前端免费学习笔记（深入）”；
- 检查是否被定义：
getComputedStyle(el).getPropertyValue('--foo')返回空字符串 ≠ 未定义，可能是显式设了空值 - 想确认是否被成功消费，得看目标属性的计算值，比如
margin: var(--m);→ 查getComputedStyle(el).margin - 不要依赖
el.style.getPropertyValue('--foo')判断有效性——它只读内联样式，漏掉 CSSOM 注入或继承来的值
遇到 Invalid property name 错误怎么办
这个错误几乎只出现在调用 CSSStyleDeclaration.setProperty() 时传了非法字符串，比如 el.style.setProperty('background-colour', 'red')（拼错 color）或 el.style.setProperty('123abc', 'x')（以数字开头）。
它和属性值无效无关，纯粹是属性名不符合 CSS 语法（必须是 ASCII 字母开头，可含连字符和数字）。Chrome 会抛 SyntaxError: Failed to execute 'setProperty' on 'CSSStyleDeclaration': '123abc' is not a valid property name.，Firefox 表述略有不同但指向一致。
- 属性名要严格匹配标准名，不能大小写混用（
BackgroundColor❌，background-color✅） - 驼峰式写法（
el.style.backgroundColor）是 JS 属性映射，和setProperty()的字符串参数无关 - 不确定时，先查 MDN 上该属性的「CSS 属性名」栏，别抄 JS 接口名
PostCSS 或构建时做静态校验靠谱吗
静态工具（如 stylelint、postcss-reporter）能抓出明显拼写错误或已知废弃属性（如 text-shadow: 0 0 5px #000; 合法，但 filter: blur(2px) contrast(1.2) 在旧 Safari 中会被整条丢弃），但无法覆盖运行时环境差异。
比如 aspect-ratio 在 Chrome 88+ 有效，在 Firefox 89+ 才支持，而静态检查默认当它“存在”；又比如 color-mix() 在部分版本中只接受特定颜色空间，写 color-mix(in lch, red 50%, blue) 可能被忽略，但 lint 工具根本不知道 lch 是否启用。
- 构建时校验适合拦截低级错误（拼写、过时属性），别指望它发现兼容性断层
- 真要保底，得在关键样式后加 fallback：比如
display: flex; display: grid;（后者覆盖前者）或用@supports块隔离 - 最易被忽略的是「值虽合法，但组合失效」：例如
position: sticky; top: 0;在父容器overflow: hidden下就完全不 sticky —— 这种没法靠任何静态工具发现
