Search code examples
cssmedia-queriesfullscreendisplaywindowed

CSS @media display NOT in FULLSCREEN doesn't work?

How can I set CSS rules for windowed mode?

@media all and (display-mode: fullscreen) {
  .testfullscreen {
      display: none; /*Works*/
  }
}

@media all and not (display-mode: fullscreen) {
  .testwindowed {
      display: none; /*Not working*/
  }
}

codepen

Solution

  • You were very close on this, you just needed to move the not to the begging.

    According to MDN's docs:

    Inverting a query's meaning

    The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

    @media not all and (display-mode: fullscreen) {
  .testwindowed {
    display: none; /*Is working*/
  }
}