All IE css hack

Question

Is there css hack for all IE browsers. Not specific IE versions.

I tried

@media \0screen\,screen\9 {
    body { background: green; }
}

but it doesn't work in IE7 and IE11.

Using only CSS? No. Even if you want to use a single property, many of them have different prefixes for different versions of IE or completely different methods of writing them out altogether. There are JavaScript libraries, however, which will do this: css3-mediaqueries-js and Respond.js — TylerH, Apr 29 '14 at 13:10

caramba · Answer 1 · 2014-04-29T13:26:00.723

5

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

more information can be found here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

UPDATE as ElKabong mentioned in the comments and you will read while following the link..

Note that IE 10 and up DO NOT support conditional comments at all so this seems to be a bit of a nightmare and I have no easy way solution right now for that. But you can find more information while following the link mentioned above and also read trough the comments.

edited Apr 29 '14 at 13:26

answered Apr 29 '14 at 13:07

caramba

21,963
19
86
127

This actually won't support all IE flavors, after IE 10 conditional comments are no longer supported: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx. A more thorough approach is to use feature detection to determine the browser's capabilities and respond accordingly. Check our modernizr - http://modernizr.com/ – El Kabong Apr 29 '14 at 13:11
@ElKabong thank you for your comment, I didn't know this (bluddy MS), as soon as I get a bit more time I'll update the answer cause also your link doesn't really tell me how to handle IE10 specific stylesheets... do you know how to solve that? – caramba Apr 29 '14 at 13:17
no worries - this is a good write up on the subject: http://msdn.microsoft.com/en-us/magazine/hh475813.aspx. This is another write up that gives suggestions for features and browser support: http://tanalin.com/en/articles/ie-version-js/, you can test using Modernizr for one of those features and load the appropriate assets. – El Kabong Apr 29 '14 at 13:58
I cant use conditional style sheet. Thats why looking for css hack – Praveen May 07 '14 at 10:51
@Praveen from what I know it is NOT possible to detect browser via CSS. You need conditional comments, JavaScript or some Server Side scripting language. – caramba May 07 '14 at 11:04

score 1 · Answer 2 · answered Apr 29 '14 at 13:09

1

I would just the HTML Conditional Comments

<!--[if IE]>
<style>
    body { background: green; }
</style>
<![endif]-->

answered Apr 29 '14 at 13:09

Drew Chapin

7,779
5
58
84

@Praveen, **+1** I didn't know this feature was removed in IE10. – Drew Chapin May 07 '14 at 23:12

score 1 · Answer 3 · edited May 23 '17 at 12:30

Maybe the following media-queries will help you:

    /* <= IE 7 */
    @media screen\9 {}

    /* IE 8 */
    @media \0screen {}

    /* >= IE10 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

Important: For IE9 and above Read this:

https://stackoverflow.com/a/15442638

In some cases it's better to enable certain features only for the following (other) browsers:

    /* WebKit */
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

    /* Opera >= 12 */
    @media (min-resolution: .001dpcm) { _:-o-prefocus, .selector {} }

    /* Firefox > 4 */
    @media screen and (min--moz-device-pixel-ratio:0) {}

I've had the same problem, when inplementing an svg-animation file. I wanted to exculde all IE versions and use a gif-animation for them instead, because no IE version does support animated SVG files. But look at this:

http://caniuse.com/#feat=svg-smil

As you can see in my case it is better to implement an animated gif as default and use the SVG only for the "other" browsers listed above.

I've found those media-queries on http://browserhacks.com/

score 0 · Answer 4 · answered Apr 29 '14 at 14:01

0

@media queries are supported by IE9+

http://caniuse.com/#search=@media

answered Apr 29 '14 at 14:01

hywak

890
1
14
27

Jeff Clayton · Answer 5 · 2014-09-22T19:28:40.117

No you cannot do all of IE in one media query as none have been found/created for all versions of Internet Explorer yet, but you can split it into two different CSS groups. Here is one method:

This one works in 8 and newer:

/* Internet Explorer 8+ (Media Query) */

@media screen\0 {
   body { background: green; } 
}

Like yours this really is a css hack. IE 9 officially supports media queries, but IE 8 and below are fooled into allowing them to work via hacks.

Here is one for IE 7 and below:

/* Internet Explorer 7- (Media Query) */

@media screen\9 {
   body { background: green; } 
}

If that doesnt work for you, try another IE 7 one here:

/* Internet Explorer 7- (Another Media Query) */

@media, {
   body { background: green; } 
}

There are many ways to do an IE 7 hack.

score 0 · Answer 6 · answered May 23 '16 at 15:31

0

Try this. It's a css hack tested from IE 7 to 10:

    @media all and (-ms-high-contrast:none)
         {
         .myClass { myProperty: myValues }
         *::-ms-backdrop, .myClass { myProperty: myValues }
         }

It works fine for me ;)

answered May 23 '16 at 15:31

Luca Di Bello

1

artnikpro · Answer 7 · 2016-12-01T12:36:48.910

0

If you need to target all non-ie (non <= ie11) browsers:

@media { @media {
    /* Your styles ... */
}}

It will work for modern browsers only since IE <= 11 doesn't support nester media queries.

edited Dec 01 '16 at 12:36

answered Dec 01 '16 at 12:26

artnikpro

5,487
4
38
40

All IE css hack

7 Answers7