The Big CSS Media Query Mistake

Do you ever feel weird when everyone around you is doing something you would ordinarily think is wrong [or not quite ideal at the very least], but somehow no one seems to want to say anything for one reason or another? It’s a very strange feeling to see everyone doing their best impression of a hapless observer. It kind of reminds of me of that old fable, “The Emperor’s New Clothes.”

I’ve kind of always felt that way about CSS media queries. Why is everyone just so accepting of a technology that just doesn’t seem to be getting the job done? Why haven’t we as a community come together and improved it in a real and meaningful way? Why haven’t we come up with something better?

Today, CSS media queries just happens to be the functional cornerstone of responsive web design. But, it was never designed for what everyone’s using it for today, and the proof is in the practice. I still often stumble on websites when using a tablet device that at-first seem well-designed, but just happen to look and feel downright wonky when you put them through their paces.

There’s something fundamentally wrong with this approach to responsive web design that we just have not properly addressed yet, and I’d like to be one of the few voices to call the emperor out for his nakedness on this one. Thankfully though, in this day and age, I’m glad there’s almost zero chance of being burned at the stake for having this alternative viewpoint.

What’s Wrong With CSS Media Queries

CSS media queries were designed for something, but that thing isn’t responsive web design. Based on my experience, here are seven (7) big issues I’ve run into when trying to use them for working with websites:

1. Not intuitive:

“CSS media queries are intuitive”, said no web designer ever. The way you define a media query is pretty straightforward, but it’s not always exactly clear how things will play out on real browsers, on real devices, and in a myriad of scenarios.

  1. @media only screen and (min-width: 320px) and (max-width: 480px) {
  2. /** CSS rules go here **/
  3. }

The code above applies to the viewport when it is between 320 and 480 pixels. However, it’s not exactly definitive [or intuitive] when you want to do something more specific, like apply a style rule when the device is a tablet in landscape operation. It’s not impossible to [sort of] set a media query up to do this, but it’s definitely not intuitive – or definitive.

Read Full Article

Leave a Reply

Your email address will not be published.