[mediaqueries-5] Add media query for power saving mode

[Que-tin]

Currently there is no way to take the power saving preferences into account. Having a media query to check these (if technically possible), would help creating more sustainable websites. Even if it's not technically possible yet, it might be a thing to consider for future development.

Example:

/* Battery saving mode enabled */
@media (prefers-battery-saving: high) {
  body {
      background: #000;
  }
}

/* Battery saving mode disabled */
@media (prefers-battery-saving: none) {
  body {
      background: #fff;
  }
}

The media query could be used to:

• load lower resolution images & videos or prevent loading them in general
• use darker colors for OLED screens (darker than dark mode)
• disable transitions and animations (like prefers-reduced-motion)
• toggle specific JS functions via matchMedia
• load different Fonts

I think the impact of the media query could be huge and it would be a step in the right direction for a more sustainable web.

[tabatkins]

Note that you can't tell what color will be lower-power; it depends on the type of screen.

As you note in your bullet points, tho, several of these overlap with existing MQs (browsers can just turn on prefers-reduced-motion) and/or are things that browsers can automatically intervene in - loading lower-res images via srcset or starting videos as paused even when autoplay is on. I think it would better to pursue those first, and then only come back with a dedicated MQ if we find a decent amount of stuff left for us to do that we can't get automatically.

[Que-tin]

Hey @tabatkins,

don't you think this would come along well with newer features like the battery savings mode in chrome?

So one could intervein into the mode and tell the browser where and how to take actions on different aspects of the website.

This time not thinking about colors, but maybe heavy main thread calculations for interactive charts or what so ever, that could than instead just be displayed as a static image.

P.s. didn't meant to close this issue.. UI on mobile is just a bit badly placed..