Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE hack issue #556

Closed
XhmikosR opened this issue Apr 28, 2015 · 16 comments
Closed

IE hack issue #556

XhmikosR opened this issue Apr 28, 2015 · 16 comments
Labels
Milestone

Comments

@XhmikosR
Copy link
Contributor

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.

@XhmikosR
Copy link
Contributor Author

/CC @cvrebert since it's apparently the reason for twbs/bootstrap@d0926f2

@XhmikosR XhmikosR changed the title IE hack change IE hack issue Apr 28, 2015
@cvrebert
Copy link

Interestingly, if you put a space before the backslash, clean-css leaves the 9 intact.

@XhmikosR
Copy link
Contributor Author

@cvrebert: I guess we could add the space until this is sorted then?

What I don't get is why we see the difference between the bot and my local tree. I mean, we do use the same clean-css version with the same settings and all.

cvrebert referenced this issue in twbs/bootstrap Apr 28, 2015
@jakubpawlowicz
Copy link
Collaborator

It's the styling any different when you use \0 instead of \9?

@XhmikosR
Copy link
Contributor Author

@jakubpawlowicz: IIRC \0 is not a valid IE property hack at all. What I don't know is if the space is required or not and if it changes the output and how.

http://browserhacks.com/

@XhmikosR
Copy link
Contributor Author

Yeah, \0 is for media queries hack as far as I can tell.

@jakubpawlowicz
Copy link
Collaborator

Oh, wow 🤦

@jakubpawlowicz
Copy link
Collaborator

Fixed in 3.2.6.

@XhmikosR
Copy link
Contributor Author

Thanks!

@vladimirsiljkovic
Copy link

vladimirsiljkovic commented Mar 9, 2017

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
Copy link
Collaborator

@vladimirsiljkovic I wasn't aware of this side effect. Let's fix it.

@jakubpawlowicz jakubpawlowicz added this to the 4.0.10 milestone Mar 20, 2017
jakubpawlowicz added a commit that referenced this issue Mar 20, 2017
Apparently turning all backslash hacks into `\9` hack is not desirable
strategy, as, for example, `\0` hack has a different meaning.
jakubpawlowicz added a commit that referenced this issue Mar 20, 2017
Apparently turning all backslash hacks into `\9` hack is not desirable
strategy, as, for example, `\0` hack has a different meaning.
jakubpawlowicz added a commit that referenced this issue Mar 22, 2017
Apparently turning all backslash hacks into `\9` hack is not desirable
strategy, as, for example, `\0` hack has a different meaning.
@jakubpawlowicz
Copy link
Collaborator

@vladimirsiljkovic it's fixed in 4.0.10.

@vladimirsiljkovic
Copy link

Great! Thank you, @jakubpawlowicz.

Just to confirm that it's working for me with these settings:

compatibility: { properties: { ieSuffixHack: true } }

@jakubpawlowicz
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants