Prefixed :fullscreen psuedo selector on Firefox

Question

I'm trying to use the CSS pseudo selector for fullscreen, to hide an element when the page is in fullscreen mode.

:-moz-full-screen section.instructions,
:-webkit-full-screen section.instructions,
:-ms-fullscreen section.instructions,
:fullscreen section.instructions {
  display: none;
}

In Firefox, this rule is ignored. If I try to use document.querySelector(), it says it's not a valid selector.

If I reduce it just to the Mozilla prefix:

:-moz-full-screen section.instructions {
  display: none;
}

... this works fine.

For any other prefixed sort of selectors, I've always been able to separate them by commas. What makes this one different? Is this just a Firefox bug? Do I really have to write all my rules out separately for each browser now?

Prefixed :fullscreen psuedo selector on Firefox

0 Answers