YUI Compressor Media Query Issues

By  on  

I've been coding out the redesign for a responsive website and it's been a lot of fun...and a lot of media queries. A few of the media queries have multiple conditions so I have `and` sprinkled into them quite a bit. Everything was going swimmingly until I found out that beta testers weren't able to see the layout move while resizing their browser, which was a totally confusing to me.

It turns out that my CSS was being incorrectly squashed by our older version of YUI Compressor. Basically a spacing issue was being created:

only screen and (min-width: 760px) and (max-width: 1000px)

/* ... becomes ... */

only screen and (min-width: 760px) and(max-width: 1000px) /* boo, doesn't work! */

Not cool, YUI -- not cool. Of course we should update our YUI compressor but sometimes you can't easily do that, especially if it's in a third party library you don't want to modify. Here's how I fixed the issue:

only screen and (min-width: 760px) and/* Screw YUI! */(max-width: 1000px)

Adding those comments to my CSS source code somehow prevented the space from being squelched and thus my responsive design was once again responsive. You do have to admit that sometimes you appreciate a hack more than your standard code, right?

Recent Features

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

Discussion

  1. Though you mentioned that this method is hacky, it just seems wrong too.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!