css does not minify/concat correctly when using default main.css

[stalsma]

I am using a single css file in my index.html file:
<link rel="stylesheet" href="css/style.css">
This links out to a file that consists only of imports:
@import url(normalize.css); @import url(main.css); @import url(site.css);

The main.css is the default css that is packaged w/Boilerplate. However, all the parens on one of the media queries seems to be breaking the minification routine. It looks like the 5/4 expression is causing issues; maybe the slash is escaping something?

The problematic section is bolded below, with its result (unminified for readability):

Before

.clearfix {
*zoom: 1;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}

*@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices /
}

/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== /
@media print {
* {
background: transparent !important;
color: #000 !important; / Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
} <snip ...>

After

`
.clearfix {
*zoom: 1
}

@media print,(-o-min-device-pixel-ratio: 5 / @media print { *{background:transparent
!important;color:#000
!important;box-shadow:none
!important;text-shadow:none
!important
}

a, a:visited {
text-decoration: underline
}
`

[OwenEdwards]

FWIW, I've been tracing back a problem with Safari 7 and 6.1 which doesn't show up with Safari 6.0 or 5.1, nor with Chrome, Firefox or IE. It turns out that it is exactly related to this issue; the minified CSS script causes Safari 7/6.1 to render my pages in print mode (with URLs following the links, and with color removed). Using the unminified version of main.css does not cause the problem.

So it seems like the badly minified main.css hits some feature of Safari 7/6.1's errror handling which isn't activated in earlier versions of Safari, or in other browser.

If it helps, I'm using c579981, and HTML5 Boilerplate v4.3.0

[roblarsen]

Hey guys... I'll have to research this a bit. I remember that opera specific rule being a problem somwhere, but the way the project is structured it's sometimes hard to trace problems back to their original source or original repo where it was reported.

[OwenEdwards]

Thanks! It looks like it's Update HiDPI CSS @media rule · 1987e5a · h5bp/html5-boilerplate. But the main question is, is that CSS valid and the minification tool is choking, or is it invalid CSS? Based on Changeset 22629 – WordPress Trac it seems like it ought to be valid.

[roblarsen]

I think it's a minification bug, but I don't remember exactly.

There may be an existing issue in the repo.

[roblarsen]

THERE IS. It's a bug in YUI Compressor that was fixed, but I can't update to the latest YUI Compressor because they've given up on fixing this bug yui/yuicompressor#78

[stalsma]

There is already a bug against boilerplate itself (h5bp/html5-boilerplate#1315) for exactly this issue. But since it doesn't affect boilerplate w/o the ANT scripts, it was closed, as apparently Opera wants to see 5/4 instead of 1.25.

It just makes figuring out how the scripts play together really difficult if the resulting minified output is broken by default.

Maybe add something in the documentation?

[roblarsen]

The original hope was to have the YUI bugs fixed, but they're not interested in providing cross platform support. I think we need to solve it some way. I'd hate to go through the trouble of looking for another minification tool, but I think that's the best solution.

I wonder if opera (blink derived) still needs the 5/4.