IE hack issue

Using clean-css v3.2.5, node.js 0.12.2 on Windows 7 64-bit:

cleancss --s0 --keep-line-breaks --compatibility ie8 1.css -o 2.css

source:

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

output:

.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\0;border-right:4px solid transparent;border-left:4px solid transparent}

\9 becomes \0.

[vladimirsiljkovic]

Hi, thanks for the great library!

I think this fix has caused a side effect.

Both \0 and \9 can be used as a CSS hack to target different IE versions:

display: block\9; /* IE6-10 */
display: block\0; /* IE8-11 */

\0 in fact is a valid and working IE11 hack (it also affects IE8, IE9, and IE10), even if it’s not documented on BrowserHacks and it’s hardly documented anywhere. I don’t know any other CSS hack to target IE(11) without targeting Edge browser. I use it often, like so:

display: flex;
display: block\0; /* IE8-11 */

This is the output:

display:flex;display:block\9

As you can see \0 is replaced with \9, but display: block\9; won’t target IE11. Is there a reason why this is happening? Should this be fixed? Should I create a new issue for this?

Also, is there an option that I can turn off to stop replacing \0 with \9? For now, I’ve downgraded the version.

I’ve made a test case here http://jsbin.com/vowalixoku and you can test it in different IE version by pasting that URL here http://netrenderer.com/index.php

Thanks

[jakubpawlowicz]

Thanks for rechecking @vladimirsiljkovic - you can also turn on all IE8+ compatibility with compatibility: 'ie8'.