-
-
Save amirsuhail786/aeaa48432d51cad0eb1c to your computer and use it in GitHub Desktop.
| " Make IE Better Compatible " | |
| <!--[if IE]> | |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| ====================================================== | |
| IE6 Only | |
| ================== | |
| _selector {...} | |
| IE6 & IE7 | |
| ================== | |
| *html or { _property: } | |
| IE7 Only | |
| ================== | |
| *+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector. | |
| IE8 | |
| ================== | |
| .selector/*\**/ { color:#f00; } | |
| **NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/ | |
| IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY) | |
| ================== | |
| .selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector | |
| The above solution doesn't work with font-family, so instead you need to use "\0/ !important" | |
| Example: { font-family:Arial \0/ !important; } | |
| http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/ | |
| Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below. | |
| IE9 Only | |
| ================== | |
| :root .class/#id { property:value \0/IE9; } | |
| **NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/ | |
| http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx | |
| IE10 Only | |
| ================== | |
| Method 1: UA Sniffing, which isn't the most loved method to target browsers, but here it is anyway. | |
| http://css-tricks.com/ie-10-specific-styles/ | |
| Place this script in the <head>: | |
| <script> | |
| var doc = document.documentElement; | |
| doc.setAttribute('data-useragent', navigator.userAgent); | |
| </script> | |
| Usage: | |
| html[data-useragent*='MSIE 10.0'] .selector {...} | |
| Method 2: It used 'Conditional compilation' which is not UA sniffing. Also, it excludes IE11 as well. | |
| http://www.impressivewebs.com/ie10-css-hacks/ | |
| Conditional compilation: https://msdn.microsoft.com/en-us/library/8ka90k2e(v=vs.94).aspx | |
| Place this script in the <head>: | |
| <!--[if !IE]><!--> | |
| <script> | |
| if (/*@cc_on!@*/false && document.documentMode === 10) { | |
| document.documentElement.className+=' ie10'; | |
| } | |
| </script> | |
| <!--<![endif]--> | |
| Note: Seems the Conditional Comment is not necessary, but I like to include it for godo measure. | |
| Usage: | |
| .ie10 .selector {...} | |
| == More info here: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ | |
| --------------------------------- | |
| IE10 and IE11 (Method 1) | |
| ================== | |
| @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { | |
| .selector { property:value; } | |
| } | |
| --------------------------------- | |
| IE10 and IE11 (Method 2) | |
| ================== | |
| @media all and (-ms-high-contrast:none){ | |
| .foo { color: green } /* IE10 */ | |
| *::-ms-backdrop, .foo { color: red } /* IE11 */ | |
| } | |
| --------------------------------- | |
| /*----MS Edge Browser CSS Start----*/ | |
| @supports (-ms-accelerator:true) { | |
| .selector { property:value; } | |
| .edu_input_field{ width:15.1% !important; } | |
| } | |
| /*----MS Edge Browser CSS End----*/ | |
| --------------------------------- |
You just saved my life, thank you!
For me targeting only edge i use supports condition and checks if it supports position:-ms-page
Yes! Thank you all so much. I went with supports position:-ms-page too and it works perfectly. I do wish there was a more future-proof way to get the browser type.. hopefully microsoft will have fixed the bug I'm working around before this stops working!
Hello! Does the IE10-IE11 method 2 JUST cover those browser and NOT Edge? I need a hack to be effective just on IE11, not on Edge...
this is universal, or only until version 10?
@nothrem Works Perfectly. Thanks bud 💯
I have a css card that have a flip effect on hover and shows the text but it is not working on the edge?
edge hacks are not working on it
For the worst Edge versions (12-15), you can use @supports (-ms-ime-align:auto) and (not (display: grid)).
Nice post.Thanks
Edge hack is not working for the latest version anymore. Use the trick post by @nothrem and @fvonellerts instead.
@supports (-ms-accelerator:true) {works only for IE12 and IE13.@supports (-ms-ime-align:auto) {works for all Edge versions (currently up to IE15).Since Edge supports feature query, in many cases you don't need a general hack but you can directly ask for the feature you want to use.
e.g. to use Grid layout, use:
@supports (display:-ms-grid) { ... }