CSS :fullscreen pseudo-class about fullscreen-api-polyfill HOT 1 CLOSED

Hi,

Thanks for the kind words.

The short answer will be: no.

Here is some reasons:

• I think trying to mess the CSS using JavaScript is a bad practice and should be avoided ;
• If you still consider doing this, the first solution is to create a new CSS rule based on the :fullscreen rule(s) present in your CSS (for instance, reading #interesting:fullscreen rule and add a #interesting:-webkit-full-screen rule with the same cssText). Unfortunately, browsers don't bother with invalid rules and don't create a CSSRule instance (you can try adding a #interesting:fullscreen rule and try to read it using document.styleSheets[0].cssRules, it won't appear). So, this solution is a dead end.
• Second solution, read the CSS using window.getComputedStyle. This method is inefficient since you have to provide an element where to read the styles. In other words, with this solution you can only handle the :fullscreen pseudo-selector on the element going fullscreen ; there is some cases where your selector won't be directly on this element.

So, you still have to add the three CSS rules:

#interesting:-webkit-full-screen { background: red; }
   #interesting:-moz-full-screen { background: red; }
         #interesting:fullscreen { background: red; }

Note that you cannot group these selectors due to browser limitation.

An alternative will be to listen for the fullscreenchange event:

document.addEventListener("fullscreenchange", function() {
    document.body.classList.toggle("fullscreen");
}, false);

And the associated CSS:

.fullscreen #interesting { background: green; }

from fullscreen-api-polyfill.