使用CSS我可以检查浏览器是否支持“CSS属性和值API”（Houdini）@property规则

Question

随着一些浏览器开始引入CSS Houdini API，我想知道是否有任何方法可以确定CSS 属性和值 API是否仅由 CSS 支持？

\n

使用 Javascript，我可以检查 API 是否存在：\xe2\x9c\x85

\n

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

\n

CSS 是否有原生的等价物？我正在尝试@support规则，但这只接受属性和值——而不是“at-rules”。所以下面的内容是行不通的，这是可以理解的。\xe2\x9d\x8c

\n

@property --my-color {\n  syntax: \'<color>\';\n  inherits: false;\n  initial-value: #c0ffee;\n}\n\n@supports ( @property : --my-color ) {\n  body { background:DarkSeaGreen ; }\n}\n\n@supports not ( @property : --my-color ) {\n  body { background:Crimson; }\n}\n

\n

\xe2\x98\x9d\xef\xb8\x8f CodePen 示例

\n

Answer 1

显然，我们此时能做的最好的事情就是假装对 worklet 的支持表示对样式表中paintCSS Typed OM 的支持：与 不同的是，可以在块中使用。@property@property<property-accepting-image>: paint(<ident>)@supports

Una Kravets 在她的@property dev.to 文章中使用了这一点：

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

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

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

新采用Houdini的UA将在样式表中发布对paint API和CSS OM的支持似乎是合理的，即Chromium v​​84的情况不会再次发生。（如果会的话，我打赌 Typed OM 将在绘制工作集之前发布，因此在该版本中该条件将被（不必要地）忽略。）