Conditional CSS Rule Targeting Firefox Quantum

Conditional CSS rule targeting Firefox Quantum

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:

• In Quantum CSS, 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';

    }

  }

}

Why is my CSS rule not applied in Firefox Quantum? Does is have CSS rules limits?

I've figured this out. the problem was the spaces I used for attribute selectors like this: input[ type="text" ] instead of input[type="text"]. that was the wrong habit of the team. so, the new firefox quantum does not support these unnecessary spaces between css selectors. I removed all of these spaces and my problem was fixed.

For whom that may used this habit, do not do that. this may take a lot of your time to fix the issue like this one I had.

Targeting only Firefox with CSS

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

Firefox Quantum Developer Tools Theme

As far as I know there is no built-in option to add theme to Firefox dev tools (as of FF57), but you can change the style of Firefox dev tools using Browser Toolbox and userChrome.css.

Check my step by step answer at Change columns size in Firefox Developer Tools.

What is the most practical way to check for @supports support using only CSS?

@supports currently only tests property/value combinations, and nothing else. Your other options don't work because none of them are valid (including the last one with just the at-keyword followed by the opening brace!). The property/value pair requirement is dictated by the grammar for @supports, which you can find in the spec.

Simply test for a property/value pair that you know is guaranteed to work across all user agents whether or not @supports is implemented. This (sort of) eliminates the possibility that you'll run into a user agent that implements @supports but not that property/value combination, focusing on its support for @supports instead.

Your given example of display: block will suffice. Your use of the cascade to check if a browser does not implement @supports by overriding declarations within a @supports rule for browsers that do support it is also acceptable (being the only obvious way to do it anyway).

Firefox 57 / Quantum: emulate print styles

[UPD] this console has gone starting from v62. But after some time toggle button for switching into Print mode is available in DevTools again. Please check another answer below(unable to delete accepted answer)

I thought it's impossible. But suddenly have found answer in another topic:

1. press Shift + F2 to get special browser console
2. type "media emulate print"
3. hit "Enter"

That's it.

---

Related Topics