Is There a Version of Yui Compressor That Deals Correctly with Media Queries

Is there a version of YUI Compressor that deals correctly with media queries?

Yes — this issue is fixed in 2.4.4, which is downloadable from YUI Compressor’s git project:

• https://github.com/yui/yuicompressor/archives/yuicompressor-33

This version seems to work, at least on Mac OS X 10.6.4.

Instructions:

1. Download the zipped source from the page above, and unzip it.
2. In the Terminal, change into the unzipped source folder.
3. Type ant and hit return. This will create a folder called build, and put the built jar file in it. The built jar file is called yuicompressor-2.4.5pre.jar
4. Change into the build folder, and run chmod +x yuicompressor-2.4.5pre.jar to make the jar file executable.
5. Optionally, move the jar file into /usr/local/bin/
6. Optionally, create an alias in your .profile file to make it easier to run, e.g. alias yuic="java -jar /usr/local/bin/yuicompressor-2.4.5pre.jar"

Where can I find the latest version of yuicompressor to download

For anyone who is here seaching for it:
https://github.com/yui/yuicompressor/downloads (the jar is on the build folder)

Minify media query?

Post here which decribes the same problem and the solution is to download the latest version of the compression software:

http://www.456bereastreet.com/archive/201012/yui_compressor_and_css_media_queries/

@media query doesn't work when using only screen

Don't use only, try this syntax:

body{
    background-color:blue;
}

@media screen and (min-width: 500px){
    body{ background-color:red; }
}

http://jsfiddle.net/fPMSm/

What's the semantic of @media screen and (-webkit-min-device-pixel-ratio:0) ?

The media query itself is, like you say, used to filter WebKit because it uses a -webkit- property.

Chrome is simply a little strict when you say it can't recognize

@media screen and(-webkit-min-device-pixel-ratio:0)

because that is in fact invalid CSS. The space after the and keyword is significant. This is clearly stated in the CSS3 media query spec:

EXAMPLE 20

The following is an malformed media query because having no space between ‘and’ and the expression is not allowed. (That is reserved for the functional notation syntax.)

@media all and(color) { … }

The functional notation refers to things like url(), rgb() and rgba(). As you can see there is no space between the function name and the opening parenthesis in these examples.

and is not a function, but simply a keyword to say that the media query must match the medium you specify, and that the layout engine must satisfy the expression you place after it. The parentheses around -webkit-min-device-pixel-ratio:0 simply denote it as an expression.

Addendum: yes, that does mean your CSS optimizer has a bug ;)

---

Related Topics