5

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
itoctopus
  • 4,133
  • 4
  • 32
  • 44
  • 4
    There are differences? How so? Not that I'm aware of. Targeting a browser version is rarely if ever necessary except when it comes to Microsoft browsers. You should look into @supports or (forgot the term for compatibility check) . – Rob Nov 30 '17 at 14:18
  • 2
    The question is not about whether there is or there is not a difference in the interpretation of CSS styles. The question is whether there is some CSS code to target specifically FireFox Quantum. – itoctopus Nov 30 '17 at 14:30
  • 3
    Anyone who has authored HTML/CSS for a reasonable amount of time knows that browsers are not perfect and specific versions of specific browsers can have bugs that otherwise break their claims of standards-compliance, and in turn feature detection. Yes, use feature detection where possible, but there are times when it doesn't work because some feature that a browser claims to support works correctly in version 60 but breaks in 61. Chrome is much, much worse for this sort of thing than any other browser, but that doesn't mean Firefox doesn't have its own bugs to speak of. – BoltClock Dec 14 '17 at 03:48
  • 3
    We had to deal with this once in the transition from WebKit to Blink, and a second time in the transition from Trident to EdgeHTML - is it so unreasonable to have to deal with the same thing transitioning from Gecko to Stylo? – BoltClock Dec 14 '17 at 03:49

2 Answers2

11

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:

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';
    }
  }
}

Note that Fx Quantum 59 and 60 disallowed the use of @-moz-document in public-facing documents, but version 61 restores functionality for the @-moz-document url-prefix() hack, allowing this to work as intended. Version 60 is an ESR release, however, so if you need to target that version, you'll need to change the @-moz-document at-rule to a media query:

@media (-moz-device-pixel-ratio) {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

Targeting only legacy versions of Firefox is a little tricky — if you're only interested in versions that support @supports, which is Fx 22 and up, @supports not (animation: calc(0s)) is all you need:

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    @itoctopus: No problem. I wasn't aware of your question until Rob commented on a different one - which I answered, so I merged both questions. Just in case you were wondering where my answer from 10 hours ago came from. – BoltClock Dec 14 '17 at 03:56
  • 1
    @itoctopus Somewhere, in the other question, I mentioned something about this being a slippery slope, though, and relying on legacy or unsupported parts of an older browser to make new markup work in a newer browser should make one feel as dirty as I do typing this comment right now. – Rob Dec 14 '17 at 11:18
  • Starting with Firefox 59 @-moz-document will unfortunately not work anymore in web-content. Assuming that I understand https://bugzilla.mozilla.org/show_bug.cgi?id=1035091 correctly. – Fencer Mar 20 '18 at 10:11
  • @Fencer: Yes, that's right. I'll have to research an alternative. (You could also choose not to take 57 and 58 into account, and simply use @-moz-document to distinguish legacy versions from 59+.) – BoltClock Mar 20 '18 at 10:16
  • This no longer works @BoltClock :( Firefox Quantum/Dev Edition no longer respects @-moz-document I believe – brandito May 23 '18 at 06:40
  • @Brandito: Looks like they restored this functionality in version 61 since the time of your comment. Let me know if it works for you again. – BoltClock Sep 25 '18 at 08:18
  • 2
    And here we are again, proving the point in my answer someone downvoted today. It's a slippery, unreliable slope. – Rob Sep 25 '18 at 10:09
  • @Rob: Of course it isn't reliable. *Browsers* themselves aren't reliable. The web is but a festering pile of band-aids and historical baggage. FWIW, my answer was upvoted a few seconds after yours was downvoted - considering my answer (ab?)uses feature queries *as suggested in your answer*, it's not clear to me why our answers were treated differently. – BoltClock Sep 25 '18 at 10:15
  • I'm using @supports (-moz-appearance:meterbar) and (all:initial) which I think I've found targets most the problematic versions I had/have. – brandito Sep 26 '18 at 00:07
2

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.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • Thanks for the tips. @supports may be the right path - the challenge here is finding a CSS feature that is only available in FireFox Quantum and not in previous versions of FireFox. – itoctopus Nov 30 '17 at 14:59