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
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    Introducing LazyLoad 2.0

    While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code.  With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading -- the images were loading regardless of...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

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!