The Thing About Those Media Types
After my last blog post about vertical media queries, I received an intriguing tweet from Sparkbox’s Ben Callahan. He asked:
“Curious, why do you use ‘only screen and…’ by default?”
When someone like Ben asks you a question like that, you may quickly realize that you do not have a great answer prepared.
A few weeks later and we were digging into the implications of media types on Skype. Here’s the deal:
At Bearded we’ve been specifying “only screen” in our media queries. At Sparkbox they’ve been specifying no media type, which results in all media types getting their media query-based styles.
We both agreed that we wanted all screen-ish devices to get our responsive styles. What makes the situation a little less clear is that most media types that we’d want to get our media queries, but are not actually screen (handheld, projection, tv), often identify themselves as screen because … well, because nobody ever uses those other media types.
But the idea with responsive design is that we don’t know what’s coming down the road, and we want our flexible designs to handle those unknowns as best they can. Which means in general, we want all media types to get our responsive styles.
That in mind, the Sparkbox approach seems more appropriate. Everybody getting the responsive layout is definitely better than “only screen.”
There are, however, some media types that we probably don’t want to get all of our extra styles. Print being the most obvious. Taking a whitelist approach of “screen, projection, handheld, tv” is not very future-friendly, as it would disallow future media types. So then we wondered: could we take a blacklist approach? Is there a “not” function?
Turns out there is. At first glance, this seemed pretty exciting. At first glance, this seemed pretty exciting. We both thought something like:
not print and (min-width: 60em)
… could be pretty useful – if the “not” only applied to “print.” Ben took the time to put together some tests to see how it worked, and unfortunately the results were a bit discouraging. It seems like the “not” keyword ends up applying to everything, media type and media query – which is less than helpful..
So now we’re back to the beginning. Is the best approach really just to not specify a media type (or specify “all”), and let everything get the responsive layout? Does this impact accessibility for types like braille, tty, or speech? We have no idea. And that, internet friends is where you come in. If you have any thoughts, please let us know on Twitter: @elefontpress & @bencallahan.
Update: Ben has written a follow-up with some great stuff on the Sparkbox Blog!
