Environment Blending Media Query

CSS media queries allow a page to respond to characteristics of the accessing device and screen type.

Additive displays, such as the Magic Leap device, can display content more legibly if you specify a different color scheme instead of using the default display.

CSS Media Query

To select a different CSS style, you can use a new feature from the CSS Media Query spec: environment-blending.

###Example Here's an example of how you can use an environment-blending media query to change the display of your site when viewing it on a Magic Leap device:

body { background-color: white; }
p { color: black; }

@media (environment-blending: additive) {
  body { background-color: black; }
  p { color: white;}
}

This media query detects an additive display, such as a Magic Leap device, and inverts the colors on the body and paragraph tags to display better in mixed reality.