Print media queries incompatible with ant-build-script

[ademey]

The example print media queries are not compatible with the css compressor in ant-build-script. Setting a pixel ratio as a fraction instead of decimal will cause the css to become malformed. For example:

  @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 */
  }

  @media print {
      * {
          background: transparent !important;
          color: #000 !important; /* Black prints faster: h5bp.com/s */
          box-shadow: none !important;
          text-shadow: none !important;
      }
  }

becomes:

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

Changing (-o-min-device-pixel-ratio: 5/4) to 1.25 seems to fix the problem.

[necolas]

Good spot. Please can you open this as an issue on the https://github.com/h5bp/ant-build-script repo, then close this one as it's not a bug in the HTML5 Boilerplate code. Thanks

[roblarsen]

I was just going to suggest opening a ticket with YUI Compressor :) Then I realized I'm a point release on YUI Compressor so I should probably see if that fixes it before passing the buck to them.

[ademey]

I understand that this is an issue with YUI compressor, but I feel like something should be done with that media query being default in this project. It took a while to find that issue and anyone using ant-build-script with the default boilerplate files will have the same problem.

Basically everything in the second @media print { } gets treated as though it isn't in a media query (transparent backgrounds for everything, URL printed after links).

Updating ant-build-script to the latest YUI compressor didn't fix it.

[roblarsen]

I understand your concern and there's probably something I can do as a hack to stop the issue from bothering people (and will as soon as I get a chance to look at it please open an issue in that repo) It's just that the real issue is with YUI Compressor so that's where it should be sorted out. The core H5BP project and associated CSS files are used in a variety of ways so there's no sense in limiting the coding style there to make up for a deficiency in a tool that may or may not show up later on down the workflow. As for the ant build script, I've worked around issues in tools before and will continue to do so, but I'm much happier when the tools themselves are fixed.

[ademey]

According to this ticket Opera requires a fraction instead of decimal. Filed a ticket with YUI Compressor.

[roblarsen]

Since this is now going to come up all the time unless I fix it.... What's the best interim solution for this? Break opera?

[ademey]

Looking in to this more it seems it is only an issue if the @media block is empty. Add any property and the compressor works fine. I've also done some digging in to the compressor script and should have a fix for this soon.

[jhebb]

You may already be aware of this, but other css compressors like those in some LESS compilers I've used (Less.app, WinLess) cause the same issue, so this is breaking out of the box for people using those as well.

[roblarsen]

Awesome.

I'll put in a fix today. If there's no property in there but the media block still exists I'll just delete it before doing anything else.

[roblarsen]

Can people test this real quick? It looks good to me. I'd like to merge this (horrifying) code (that is a total regexy hack) in as soon as possible.

https://github.com/h5bp/ant-build-script/tree/css-parse-hack

[jhebb]

I was commenting on this as it relates to the core h5bp templates as I got bumped here from another thread, and didn't see this one was talking about the ant build script specifically.

Is there another thread going on somewhere about that or is that being discussed here as well?

[roblarsen]

Well, this one started off by talking about the CSS file and then moved onto other things so it's as good a place as any to discuss this causing issues in the various CSS processing tools.

I'm just keeping my domain in order while the rest of the world works out what they want to do with this issue.

[jhebb]

@roblarsen Fair enough!

And now that I'm aware of it, I don't mind commenting it out on any new projects, but I'm wondering if anything should be done to the core template so that new downloaders that are using pre-processors don't run into the same issue right off the bat.