使用 CSS 我可以检查浏览器是否支持 "CSS Properties and Values API" (Houdini) @属性规则

Question

一些浏览器开始引入 CSS Houdini API, I was wondering if there were any ways to identify if the CSS Properties and Values API 是否仅支持 CSS？

使用 Javascript 我可以检查 API 是否存在：✅

typeof window.CSS.registerProperty !== 'undefined'

CSS 是否有任何等价物？我正在试验 @support 规则，但这只接受属性和值——而不是 'at-rules'。因此可以理解，以下内容不有效。 ❌

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

@supports ( @property : --my-color ) {
  body { background:DarkSeaGreen ; }
}

@supports not ( @property : --my-color ) {
  body { background:Crimson; }
}

☝️ CodePen Example

Answer 1

显然我们此时能做的最好的事情就是假装 paint worklet 的支持表示样式表中 CSS Typed OM @property 的支持：不像 @property , <property-accepting-image>: paint(<ident>) 可用于 @supports 块。

Una Kravets 在她的 @property dev.to article:

中使用了这个

@supports (background: paint(something)) {
  /* [Typed OM `@property` should be supported here] */
}

她还指出，从版本 78 到 v84，这在（过去）Chromiums 中是不可靠的。

根据https://ishoudinireadyyet.com/浏览器的当前状态，使用此建议应该是安全的：

新采用Houdini的UA似乎有可能在样式表中释放对paint API和CSS OM的支持，即Chromium v84场景不会再次发生。（如果会的话，我敢打赌 Typed OM 将在 paint worklet 之前发布，因此在该版本中将（不必要地）忽略该条件。）

使用 CSS 我可以检查浏览器是否支持 "CSS Properties and Values API" (Houdini) @属性规则

Using CSS can I check if a browser supports the "CSS Properties and Values API" (Houdini) @property rule

css

browser-support

css-houdini

使用 CSS 我可以检查浏览器是否支持 "CSS Properties and Values API" (Houdini) @属性 规则

Using CSS can I check if a browser supports the "CSS Properties and Values API" (Houdini) @property rule

css

browser-support

css-houdini

使用 CSS 我可以检查浏览器是否支持 "CSS Properties and Values API" (Houdini) @属性规则