css media query to target all browsers except for IE

Question

I'm looking for a mediaquery to target all browsers except for IE.

For example:

    @media (........) {

    }

Is there a way to do this?

I'm using sass-bootstrap, so maybe there's a option in there.

Thanks!

Here's the code that doesn't work in IE:

.animations {
    .legend {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: internetmarketing 3s linear forwards;
    }
    .line {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: internetmarketing 3s linear forwards;
        animation-delay: 2s;
    }
}

@keyframes internetmarketing {
    to {
        stroke-dashoffset: 0;
    }
}

Media queries cannot target browsers. What exactly are you trying to accomplish and why must you block IE regardless of its version? — BoltClock, Aug 06 '14 at 10:03
I've made some keyframes, but they don't work in IE. I thought about using a media query to disable them. Maybe it's a good practice to add a class in the other browsers through javascript that trigger the animation. I'll post the keyframes below. — Jacob Francke, Aug 06 '14 at 11:00
If the keyframes don't work, why do you need to disable them? Are they doing any harm? — Danield, Aug 06 '14 at 11:22
There are some display="none" attributes in the polylines because the animation starts when the user scrolls down. In IE there's nothing visible. Maybe I should add those attributes when not in IE. — Jacob Francke, Aug 07 '14 at 06:37
I fixed it with adding the animations with javascript, with an axception for IE. Thank all! — Jacob Francke, Aug 07 '14 at 09:44

score -1 · Accepted Answer · answered Aug 23 '14 at 10:05

There is a good trick in Html5 Boilerplate, you should try it :)

In the top of HTML you should insert the following code:

<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie ie8 ie7"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie ie8 no-ie7"> <![endif]-->
<!--[if gt IE 8]>    <html class="no-js ie no-ie8 no-ie7"> <![endif]-->
<!--[if !IE]><!--> <html class="no-js no-ie"> <!--<![endif]-->
<head>

And now you can hide or stylize your page for no-IE browser:

.no-ie {
   .animations {
      .legend {
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: internetmarketing 3s linear forwards;
      }
     .line {
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: internetmarketing 3s linear forwards;
          animation-delay: 2s;
      }
  }

It works well in all browsers as I know

This does not work for IE 11 as this conditions are no more supported! — Stefan, Dec 27 '17 at 08:19

css media query to target all browsers except for IE

1 Answers1