1

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

使用 Javascript，我可以检查 API 是否存在：✅</p> 

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

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

@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 示例

4

1 回答 1

2

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

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

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

她还指出，从版本 78 到 v84，这在 Chromiums 中（曾经）不可靠。

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

ishoudinireadyyet.com 表格显示所有支持 Paint API 的浏览器也支持 CSS Typed OM

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

于 2021-10-18T12:00:32.973 回答