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 to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using jQuery

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

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!