Conditional CSS rule targeting Firefox Quantum
We are having issues targeting Firefox Quantum when it comes to CSS. We know that the following:
@-moz-document url-prefix() {
.my-style{
}
}
...will target all Firefox browsers, but we just want to target Firefox Quantum, since there are some differences between Firefox Quantum and older versions of Firefox when it comes to CSS interpretation. Does anyone know how to do that?
Perusing the release notes for Fx Quantum 57, specifically Quantum CSS notes, a number of differences between Gecko and Stylo are listed, and a few hacks come to mind.
Here's one:
calc() is supported everywhere that the spec explains it should be (bug 1350857). In Gecko it is not. You can use @supports with a calc(0s) expression in conjunction with @-moz-document to test for Stylo — Gecko does not support time values in calc() expressions but Stylo does:
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
}
}
Here's a proof-of-concept:
body::before {
content: 'Not Fx';
}
@-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
@supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}No. There is no reliable way to do this. Some may suggest user agent string but this, too, has been shown to be unreliable.
I suggest you use feature queries or detection through javascript or @supports in CSS.
链接地址: http://www.djcxy.com/p/29468.html