随着一些浏览器开始引入CSS Houdini API，我想知道是否有任法来确定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; }
}
3
显然，此时我们可以做的最好的事情是假设paintworklet 的支持表示在样式表中支持 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] */
}
她还指出，这是不可靠的 Chromiums 从版本 78 到 v84。
对于根据https://ishoudinireadyyet.com/的浏览器的当前状态，使用此建议应该是安全的：
似乎合理的是，新采用 Houdini 的 UA 将在样式表中发布对 paint API 和 CSS OM 的支持，即 Chromium v84 场景不会再次发生。（如果会的话，我敢打赌，Typed OM 将在绘制工作表之前发布，因此在该版本中将（不必要地）忽略该条件。）
0
您还可以使用window.CSS.paintWorklet检查是否支持 houdini api。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（57条）