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

b1uwtaje  于 5个月前  发布在  其他
关注(0)|答案(3)|浏览(50)

随着一些浏览器开始引入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; }
}

型
电子邮件：info@jsx.com

css

3条答案

按热度按时间
mepcadol

mepcadol1#

显然，在这一点上，我们能做的最好的事情就是假设对paint worklet的支持表示对样式表中CSS 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] */
}

字符串
她还指出，这是（是）不可靠的 chrome 从版本78到v84。
根据https://ishoudinireadyyet.com/浏览器的当前状态，使用此建议应该是安全的：
x1c 0d1x的数据
新采用Houdini的UA将在样式表中发布对paint API和CSS OM的支持，这似乎是合理的，即Chromium v84场景不会再次发生。（如果会，我打赌Typed OM将在paint worklet之前发布，因此该条件将在该版本中被（不必要地）忽略。）

赞(0）分享  回复(0）举报  5个月前
chhqkbe1

chhqkbe12#

Firefox的支持=待定实验

我猜paint(...)将远离Firefox的支持，但Firefox已经通过layout.css.property-and-value-api.enabled和layout.css.properties-and-values.enabled做了一些experimental supports on CSS Properties and Values。

layout.css.property-and-value-api.enabled

layout.css.properties-and-values.enabled

  • 它可以在about:config中转换为true以获得window.CSS.registerProperty的支持。
  • 这并不意味着你可以使用@property。
  • 使用typeof window.CSS.registerProperty !== 'undefined'并不能保证在@property上得到支持。

x1c 0d1x的数据

*注意：从Firefox 120开始，真正支持

CSS检测

@property没有@supports

没有@supports (@property) {...}。
您可以使用纯CSS或JavaScript来检测是否支持此功能。（对于纯CSS，它可以只显示文本来告诉您不支持。）

通过伪元素的内容进行纯CSS检测

  • 设置一个数值属性--num，初始值大于0。（数字3）
  • 使用counter和counter-style生成编号为3的支持消息和编号为0的不支持消息。
@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

@property --num {
  syntax: "<integer>";
  initial-value: 3;
  inherits: false;
}

@counter-style my-style-fallback {
  system: cyclic;
  symbols: 'Not Supported''Not Supported';
}

@counter-style my-style {
  system: cyclic;
  symbols: 'Supported''Supported';
  range: 2 4;
  fallback: my-style-fallback;
}

#result-css {
  counter-set: num var(--num);
}

#result-css::after {
  content: 'Not Supported';
  content: counter(num, my-style);
}

字符串

JavaScript检测

CSS.registerProperty没有try catch块

  • 注意：在我写这篇文章的时候，它仍然没有在Chrome中正确处理。

下面的代码

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

型
如果你通过CSS而不是通过JavaScript定义属性，* 可能不会引发任何错误。
注意事项：如果你使用registerProperty来注册在CSS中定义的属性名，那么错误可能会出现，同时该属性被覆盖。


的

getComputedStyle检测

由于每个CSS属性都定义了类型和初始值，因此您可以使用getComputedStyle API来检查它。

window.getComputedStyle(document.documentElement).getPropertyValue('--my-color');

型
在你的例子中，结果应该是"#c0ffee"。如果没有定义，结果将是""。

组合编码Demo参考

jsFiddle version

const resultByJs = window.getComputedStyle(document.documentElement).getPropertyValue('--my-color');

document.getElementById('result-js').textContent = resultByJs === '' ? 'Not Supported' : 'Supported'

x

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

@property --num {
  syntax: "<integer>";
  initial-value: 3;
  inherits: false;
}

@counter-style my-style-fallback {
  system: cyclic;
  symbols: 'Not Supported''Not Supported';
}

@counter-style my-style {
  system: cyclic;
  symbols: 'Supported''Supported';
  range: 2 4;
  fallback: my-style-fallback;
}

#result-css {
  counter-set: num var(--num);
}

#result-css::after {
  content: 'Not Supported';
  content: counter(num, my-style);
}
<html>

<div>
  <h3>`@property` checking by CSS</h3>
  Result: <span id="result-css"></span>
</div>

<div>
  <h3>`@property` checking by JS</h3>
  Result: <span id="result-js"></span>
</div>

</html>

的一个字符串

2023/12/15添加备注

经过测试，Firefox 120（稳定版）可以使用layout.css.properties-and-values.enabled = true启用CSS Houdini
但是，动画API仍然不支持它。
进一步说明：支持从Firefox Nightly 123.0a1（2023-12-30）（64位）开始

jsFiddle version

const resultByJs = window.getComputedStyle(document.documentElement).getPropertyValue('--my-color');

document.getElementById('result-js').textContent = resultByJs === '' ? 'Not Supported' : 'Supported'

document.documentElement.animate(
  [
    { '--num': '100' },
    { '--num': '0' }
  ],
  {
    fill: "forwards",
    duration: 1000*30,
    easing: 'linear'
  }
);

let resultByJsA = window.getComputedStyle(document.documentElement).getPropertyValue('--num');

document.getElementById('result-jsa').textContent = `${resultByJsA}`.length > 1 ? 'Supported' : 'Not Supported';
@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

@property --num {
  syntax: "<integer>";
  initial-value: 3;
  inherits: false;
}

@counter-style my-style-fallback {
  system: cyclic;
  symbols: 'Not Supported''Not Supported';
}

@counter-style my-style {
  system: cyclic;
  symbols: 'Supported''Supported';
  range: 2 4;
  fallback: my-style-fallback;
}

#result-css {
  counter-set: num var(--num);
}

#result-css::after {
  content: 'Not Supported';
  content: counter(num, my-style);
}

h3 {
  display: inline-block; width: 18em;
}
<html>

  <div>
    <h3>`@property` checking by CSS</h3>
    Result: <span id="result-css"></span>
  </div>

  <div>
    <h3>`@property` checking by JS</h3>
    Result: <span id="result-js"></span>
  </div>
  
  
  <div>
    <h3> Animating `@property` checking by JS</h3>
    Result: <span id="result-jsa"></span>
  </div>

</html>
赞(0）分享  回复(0）举报  5个月前
nkhmeac6

nkhmeac63#

您也可以使用window.CSS.paintWorklet来检查houdini API是否受支持。

赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com