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

The \9 property hack isn't completely reliable #165

Open
cvrebert opened this issue Sep 5, 2015 · 7 comments
Open

The \9 property hack isn't completely reliable #165

cvrebert opened this issue Sep 5, 2015 · 7 comments
Labels

Comments

@cvrebert
Copy link

cvrebert commented Sep 5, 2015

This is in reference to http://browserhacks.com/#hack-ab1bcc7b3a6544c99260f7608f8e845e
Testcase: http://jsfiddle.net/cvrebert/56vjof5b/
If you open the testcase in IE11, you'll see that the box labeled "One" has a top border, indicating that IE11 didn't discard the invalid border-top: 4px solid\9; declaration.
But the "Two" box, whose CSS has a space before the \9, i.e. border-top: 4px solid \9;, does not have a border, so its declaration was properly discarded.
So perhaps the hack should advise
.selector { property: value \9; }
rather than
.selector { property: value\9; }
?

Refs twbs/bootstrap#17455

@jeffclayton
Copy link
Collaborator

Be careful with this - there are more than one thing to control for here, and also this test is not only for ie11. What you are showing here is that these are not the same. The person showing the test is ONLY testing in IE11, but also there are other differences.

These are not the same as you have pointed out:

.selector { property: value \9; }
rather than
.selector { property: value\9; }

more accurately, you are showing that THESE are not the same:

.selector { property: value value \9; }
rather than
.selector { property: value value\9; }

This second set covers the 'line' example you are referring to but also has more than one value parameter, which may (or may not) have different results. It requires more than one test, and finding other "property: value value" examples in CSS to see if the more-than-one-value parameter is different or if it is only the one 'line' example you are showing.

The first set has these (exact) stats, when property background-color:#F00 is chosen as the case to test:

.selector { property: value \9; } // msie 6-8
.selector { property: value\9; } // msie 6-10

These I just tested with that simple 'color' change, and they do not tag ie11 in either windows 7 or windows 10 which are on my testing machines here.

The second set must be tested in all versions of IE (6-11) before making an update to the site, but also realize that it is not the same hack, but a slightly different one. These next two do clearly have different results on ie11, but also they may only be referring to a 'line' in the example as well.

So depending on the results of other testing, this may be a second listing of differences for hacks:

.selector { property: value value \9; }
.selector { property: value value\9; }

@jeffclayton
Copy link
Collaborator

While the end result requires testing in all versions of MSIE, this in no way diminishes what you have found. It may end up being the only difference at all, but there may be others as well due to the odd nature of hacks.

@cvrebert
Copy link
Author

cvrebert commented Sep 5, 2015

.selector { property: value\9; } // msie 6-10

So the data for http://browserhacks.com/#hack-ab1bcc7b3a6544c99260f7608f8e845e is wrong then. It currently claims it only works in IE6-8.

@cvrebert
Copy link
Author

cvrebert commented Sep 5, 2015

For the record, after further testing:

.selector { border-top: 4px solid\9; } /* IE6-11 but not Edge*/
.selector { border-top: 4px solid \9; } /* IE6-10 */

@jeffclayton
Copy link
Collaborator

You are certainly correct in the fact the 'slash hacks' do not affect Edge - it is an entirely different animal than MSIE. Edge picks up some webkit hacks though (a decision by Microsoft) and they also pick up webkit hacks on Windows 10 Mobile.

The updated testing I have done over the last couple of years, and testing on IE6-11 and Edge I had not noticed were not updated on the site, so you are correct. (I tested Win10 before the Spartan project and after as Edge for Windows 10 Preview actually picked up MSIE 11 hacks as well but not the final version which is more streamlined.)

@jeffclayton
Copy link
Collaborator

I am very interested to see if more "property: value value" css hacks have differences in ie11 or if it is only the one border hack with more than one parameter. If anything, the results of hack differences like that are handy when needed.

@jeffclayton
Copy link
Collaborator

FYI: The information about ie 11 in edge mode is not the 'Edge' I am referring to. Microsoft Edge is a different browser entirely. The \9 hack has no effect at all on the Microsoft Edge browser.

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

3 participants