英文:
How to hide css offset-path property in safari? CSS supports rule doesn't work as expected
问题
CSS动画路径在Safari中不受支持。我尝试使用CSS支持规则来定位偏移路径，但它不起作用。
if (CSS.supports("offset-path", "M0.5 1H1549.5")) {
console.log("支持");
// 动画路径不受支持，应用备用样式或其他操作
// element.style.transform = "translateX(100px)";
} else {
console.log("不支持");
}
我尝试了这个逻辑，但在Chromium浏览器中它不起作用。我做错了什么？
英文:
CSS motion path isn't supported in safari. I've tried using CSS supports rule to target offset-path but it isn't working.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
if (CSS.supports("offset-path", "M0.5 1H1549.5")) {
console.log("supported yay");
// Motion path is not supported, apply fallback styles or alternative actions
// element.style.transform = "translateX(100px)";
} else {
console.log("not supported");
}
<!-- end snippet -->
I try this logic and it doesn't work in chromium browsers. What am I doing wrong?
答案1
得分: 1
CSS.supports()的第二个参数必须是一个有效的值。您是否忘记将您的值包装在 path 中了？
// 返回 false，该值不是有效的值
console.log(CSS.supports("offset-path", "M0.5 1H1549.5"));
// 在Chromium浏览器上返回 true
console.log(CSS.supports("offset-path", "path('M0.5 1H1549.5')"));
英文:
The second parameter for CSS.supports() has to be a valid value. Did you perhaps forget to wrap your value in path?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Returns false, the value is not a valid value
console.log(CSS.supports("offset-path", "M0.5 1H1549.5"));
// Returns true on Chromium browsers
console.log(CSS.supports("offset-path", "path('M0.5 1H1549.5')"));
<!-- end snippet -->
答案2
得分: 1
Chromium浏览器支持使用path()值的offset-path属性。但是，CSS.supports()需要正确的值语法，否则它将返回false。没有中间选项，也就是说，没有结果会显示"它支持该值，但语法不正确"。所以，只需像这样使用正确的值：
if (CSS.supports("offset-path", `path("M0.5 1H1549.5")`)) {
...
英文:
Chromium browsers do support offset-path property with path() values.
But CSS.supports() requires the correct value syntax and otherwise, it'll return false. There's no in-between, i.e. a result that says "It supports the value but the syntax is incorrect".
So, just use the correct value like this:
if (CSS.supports("offset-path", `path("M0.5 1H1549.5")`)) {
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论