A Call for CSS Media Type Support

By on

The other day I was working on a responsive loading screen for the Bulbstorm App, when it occurred to me that media queries are not a silver bullet. They mostly address resolution issues, but fall short when it comes to identifying the actual environment the user is coming from. This is absolutely maddening to me, for reasons I’ll try and outline below.

The three-fold nature of responsive design

In my opinion, responsive design is three-fold:

Layout is pretty straight forward. Design your breakpoints around the natural flow of your design, not your device or resolution-specific limitations.

Images are more difficult, but a lot of time and attention has been devoted to solving the problems surrounding them (picture, srcset, prefetching, etc.).

Typography seems to have had very little attention paid to it, however. Information Architects have put a lot of thought and effort into it and should be considered required reading on the topic.

The responsive typography use case

The main issue I have with responsive typography as it stands, is that it is typically packed in with layout, e.g. increase the font size based on the resolution of the screen. In reality that is a poor approach. Consider the following examples.

Imagine a user browsing your app on a standard desktop resolution of 1366×768. Then put your app inside a Facebook canvas. You are now nearing the same resolution as a 1st gen. iPad. The current approach says, “scale the text,” but the end user is still on a desktop. They haven’t changed the position of their screen, so why should the text get bigger?

Or what about the Kindle Fire HD? It has a massive resolution of 1920×1200—that’s the same size as my desktop! The user will fall outside of most tablet queries and get a tiny little font that would look great on a desktop, but is awful on a handheld device.

More succinctly, screen size is not a good indicator of how text should be rendered.

CSS media types, for the fail

I think the best solution to the problem is CSS media types. Media types have been around for a while, and they’ve got exactly what we need to address the typography use case, as well as other issues. The W3C sums it up so perfectly in the spec:

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Hell, they even outlined my whole thesis:

a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

I can imagine it now… slap in a little <link rel=“stylesheet” type=“text/css” media=“handheld” href=“handheld.css”> action, or throw in a little @media handheld {} and voila! Beautiful text perfectly scaled to the device the user is on.

Shitty support across the board

Unfortunately, this is not the current state of the web. A List Apart explained the problem way back in 2009 and it’s still largely the same. This is why we can’t have nice things:

Many mobile browsers have implemented this feature, but in different ways:

The work so far

There are a few solutions that can ease the pain regarding media types, but there isn’t anything solid yet. I put together the CSS Media Types project on GitHub that has a couple example solutions, a baseline for testing handheld support, and even a Browserscope test.

A call for support

  1. I want to make a call to those influential individuals who are shaping the future web: Media queries don’t go far enough without media types. We need media types and we need them to be reliably and consistently applied in all browsers.
  2. And to the community at large: we need a polyfill for CSS media types that forces browsers to load and apply stylesheets/media queries consistently, regardless of support. This will get us by until more browser vendors come on board with proper media type support.
  3. Lastly, I need more data. Please check out the Browserscope test page on as many random non-desktop devices as you can find. And if you have any resources that may be of help, please let me know. I’ll compile them here as a reference going forward. Thanks!

Continue the conversation on Google Plus or Twitter.