Search code examples
cssinternet-explorermedia-queriesbootstrap-sass

css media query to target all browsers except for IE

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;
    }
}
Solution

  • 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