NativeScript 8.8 brings CSS media query support

NativeScript 8.8 brings support for the most awaited CSS Media Queries along with MediaQueryList API and matchMedia() method, and you can use them all with any JavaScript framework flavor.

Media queries will allow you to apply CSS styles conditionally depending on a device's features or characteristics such as screen orientation, theme, or viewport width and height.

More specifically, the new version comes with Media Queries Level 3 specification and the following features:

• orientation
• prefers-color-scheme (Even though this one is part of Media Queries Level 5, it was added along with current implementation to make theme styling possible)
• width
• height
• device-width (same as width)
• device-height (same as height)

Viewport features like width and height support ranged values by using the min- or max- prefix.

Basic Usage

Here are few examples of how to declare media queries in NativeScript:

@media only screen and (orientation: landscape) {
  Label {
    color: yellow;
    font-size: 24;
  }
}

@media only screen and (prefers-color-scheme: dark) {
  Label {
    background-color: #fff;
    color: #000;
  }
}

@media only screen and (max-width: 400) {
  Label {
    font-size: 10;
  }
}

@media only screen and (min-height: 800) {
  Page {
    background-color: red;
  }
}

Just like style properties, length feature values (e.g. width) can also accept DIP or device pixel (px) units.

Advanced Usage

The not operator

The not operator is used to negate a media query, returning true if the query would otherwise return false.

@media screen and not (orientation: portrait) {
  Label {
    color: yellow;
    font-size: 24;
  }
}

Nested Media Queries

@media only screen and (orientation: landscape) {
  Label {
    color: yellow;
    font-size: 24;
  }

  @media only screen and (max-width: 400) {
    Label {
      font-size: 10;
    }
  }
}

Nesting Keyframes inside Media Queries

Apart from CSS selectors, keyframes can also be conditional using Media Queries.

@keyframes slidein {
  from {
    background-color: yellow;
  }

  to {
    background-color: pink;
  }
}

/** This one will apply if condition is truthy **/
@media only screen and (orientation: landscape) {
  @keyframes slidein {
    from {
      background-color: red;
    }

    to {
      background-color: green;
    }
  }
}

The matchMedia method

Conditional Navigation with Media Queries

Sometimes, there's the need for an application to navigate to a completely different Page based on device screen size or orientation. Right now, that should be possible using NativeScript's Screen Size Qualifiers API.
Unfortunately, this feature is limited to plain JS/TS apps and not available to the rest of JavaScript flavors.

Method matchMedia() joins the game and gives us as many possibilities and more on any JavaScript flavor.
The example below demonstrates how to navigate to an alternate Page if screen width is larger than 600 DIP:

const mql = matchMedia('only screen and (max-width: 600)');

Frame.topmost().navigate({
  // Navigate to another page if screen is too big
  moduleName: mql.matches ? './pages/phone' : './pages/tablet',
});

Using listeners to track Media Query changes

The matchMedia() method returns a NativeScript observable instance, giving you the chance to track Media Query changes using event listeners.

const mql = matchMedia('only screen and (orientation: portrait)');
mql.addEventListener('change', (event) => {
  console.log('Is screen orientation still portrait? ' + event.matches);
});

Conclusion

And this is just the beginning. Media Queries are expected to open up more new possibilities for styling our NativeScript apps and provide users with an amazing experience.

Embark with us on a new CSS styling adventure! 🛸