使用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。

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

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

相关推荐

  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 25 12
  • css超出隐藏省略:爱上海,一个充满活力的城市!

    css超出隐藏省略,可以使用CSS的text-属性来实现,具体代码如下:…

    2023-06-26 11:29:04
    0 13 78
  • css怎么让图片居中显示:使用CSS实现图片居中显示

    示例示例可以使用CSS的margin属性来实现图片居中显示,代码示例如下:上面的代码中,我们使用了 `margin: 0 auto;` 来让图片居中显示,其中`0`表示上下边距,`auto`表示左右边距自动调整,这样就可以让图片居中显示。…

    2023-06-26 00:45:20
    0 20 50
  • css 背景铺满:欢迎来到我的世界

    CSS 代码如下:上面的代码可以使背景图片填充整个浏览器窗口,并且保持图片的原始比例。…

    2023-10-11 10:49:49
    0 26 99
  • css 子样式:标题

    CSS 子样式是指在父样式的基础上,对其子元素进行单独定义的样式。它可以使用类选择器、ID 选择器或者属性选择器来定义,如下所示:…

    2023-04-13 14:42:51
    0 49 77
  • css 间隔:如何利用 CSS 进行间隔调整

    示例示例CSS 间隔是指在 CSS 中使用的间距属性,它可以用来设置元素之间的距离。有几种常用的 CSS 间隔属性,包括:…

    2023-06-05 02:47:09
    0 34 80
  • css导入字体:标题

    示例示例CSS导入字体可以通过@font-face规则来实现,代码示例如下:…

    2023-04-22 12:42:42
    0 96 57
  • cssci与sci的区别比较两者在科学研究中的作用

    CSSCI(中国社会科学引文索引)是中国社会科学院出版社编辑的中国社会科学文献引文索引,收录中国社会科学领域的期刊文献及其他文献,主要收录中国社会科学领域的期刊文献,也收录部分论文集、学位论文及其他文献。…

    2023-11-15 05:05:39
    0 60 29

发表评论

登录 后才能评论

评论列表(68条)