Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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?

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

  • By
    Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

Discussion

  1. Brandon Brown

    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!