YUI Compressor Media Query Issues
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?
Though you mentioned that this method is hacky, it just seems wrong too.