Last active
December 2, 2022 04:50
-
-
Save amirsuhail786/aeaa48432d51cad0eb1c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| " 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----*/ | |
| --------------------------------- |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!