Kilian Valkhof

I want my own media queries in browsers

We’re on the verge of a whole lot of new CSS media queries becoming available. But if you’re a developer that wants to get a head start and try them out, you’re out of luck. Browsers are prototyping them one by one before making them available and we as developers have to wait.

Prefers-reduced-data is an upcoming media query that lets you know a user would like to use as little data as possible. Maybe their connection is slow or unstable or they’re on a capped data plan. (Read more about it in the complete guide to css media queries)

I’m excited about it, because it can really make a difference to your users. It remind me of the time YouTube ruthlessly improved their load time and then found out their average load time had gone up, the opposite of what they were trying to achieve. Turns out, due to the improvements YouTube was now fast enough to use in new places that had much slower connections. Prefers-reduced-data could do that for your site.

Since Chrome 86+ web developers can now preview and test with this feature. Turning prefers-reduced-data on is simple:

• Go to chrome://flags.
• Search for “experimental web platform features” and turn that on.
• Go to your site and open dev tools.
• Then click the three dots in the top right.
• Go to “more tools”.
• Then pick “rendering”.
• now scroll down and you can use the dropdown to emulate the prefers-reduced-data media feature.

…except that’s not quite such a straightforward set of steps.

Not only did we as developers have to wait for Chromium to implement it because we could do any useful testing, it’s also pretty hidden.

Testing new media queries earlier

Wouldn’t it be great if testing such a potentially important media query was easier? What if browsers could just “pretend” to support new media features so us developers can already implement them in our stylesheets and test them, even if browsers did nothing to implement them themselves?

Quick aside: Don’t custom media queries solve this? Not really: they let you create a named media query that maps to one or more existing media queries, not define entirely arbitrary ones.

I want to go one step further even. I would love to be able to tell Chrome and other browsers to support any media query I define that I can then set to different values in the developer tools and test against.

A while ago I filed a Chromium bug to do exactly that: Feature: emulate arbitrary media features

If the Chrome dev tools supported arbitrary media features, we as developers could:

• Play around with upcoming media queries (like prefers-contrast) before they land to see how we could adapt our CSS to it ahead of actual support.
• Try out our CSS for media queries only supported in other browsers.
• Build our own domain-specific media queries for development.

The benefit of getting ahead of browser support for media queries your stylesheets is self-explanatory, and checking e.g. Safari-specific media queries in another browser is just convenient, but it’s the last category that is really exciting to me.

It has the potential to simplify a lot of development.

You might include debug CSS and then comment that in or out in your stylesheet, or toggle it with a class on the html element, like Pesticide, styles that show the currently active breakpoint or a11y.css.

Imagine instead of dealing with that in your own CSS and JS, with all the potential for mistakes ending up in production, your debug CSS was just wrapped in something like this:

@media (!--debug-styles: on) { 
  ... 
}

(The !-- notation is just an idea to mirror the -- notation for custom properties and <!-- notation for HTML comments)

It’s not a “valid” or existing media query, so browser in normal mode would just evaluate it to “@media not all {}” and any CSS in it will be ignored. (ideally you’d also remove it from your CSS before it goes to production).

In the dev tools you would then add the !--debug-styles media feature and set its value to “on” and that would activate your CSS. You could have just one custom media query, or a whole set to test different parts of your CSS. Up to you.

Suddenly without effort you could have all sorts of debug CSS active during development (making sure you purge that for production) and use the dev tools to toggle them on, off, or any arbitrary value.

Interesting idea? #

If that sounds interesting, please consider starring the chromium bug or Web we want request to indicate interest, and I’d love to hear your thoughts via Twitter.