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

随着一些浏览器开始引入CSS Houdini API,我想知道是否有任何方法来确定CSS Properties and Values API是否仅支持 CSS?

随着一些浏览器开始引入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; }
}
☝️CodePen Example
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/的浏览器的当前状态,使用此建议应该是安全的:

ishoudinireadyyet.com table showing that all browsers supporting the Paint API also supports CSS Typed OM

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

0

您还可以使用window.CSS.paintWorklet检查是否支持 houdini api。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(591)
实体框架核心:DbContextOptionsBuilder不包含“usesqlserver”的定义 也没有扩展方法“usesq
上一篇
(.OFX/.QFX/.QIF/.QBO/.OFC)文件转换器
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(32条)