CODEWITHSUNDEEP
css
user3733648
user3733648

Reputation: 1333

defining styles only for non IE browsers

I am facing some blur effects problem in IE and would like to remove these blur effect if the page is opened in IE

These styles are defined in a stylesheet at different locations

What will be the best way to do this?

Upvotes: 1

Views: 1163

Answers (3)

3.1415926535897932384626433833
3.1415926535897932384626433833

Reputation: 135

Even though Edge is, in a sense, a rebranding/continuation of IE to make it look new and flashy, it is still fundamentally different in that it is updated more semi-automatically and seamlessly. So, with Edge you don't have to worry as much about someone using an older version of it, as opposed to IE where you do have to worry. So, assuming you want to target all non-IE browsers and Edge, then the following code will work fine.

@supports (top:0){
    /*CSS code put here will only run in non-IE*/
}

A working example:

#mytext:before {
  content: 'You are using IE < 11, or a REALLY outdate version of another browser'
}
@supports (top:0){
  #mytext:after {
    content: 'Horay! You are using A non-IE browser or Edge.'
  }
  #mytext:before {
    display: none;
  }
}
<div id="mytext"></div>

The way the above code works is by testing to see if the browser supports the @supports. I would assume that, in many cases, if you have CSS to be used on non-IE browsers, then the CSS will likely not work in browsers that don't even support the @supports at-rule. Thus, this method fulfills a dual role: browser vendor testing, and browser support testing. The reason for why I used top:0 is because it is likely the shortest CSS tag that is universally supported, with the added benefit of practically every web-programmer knowing that its universally supported. Other than that, there is absolutely nothing special about top:0: you can put whatever tag you want to test for in there.

Upvotes: 3

CreMedian
CreMedian

Reputation: 803

Paul Irish has a good, comprehensive list of browser-specific CSS hacks here: http://www.paulirish.com/2009/browser-specific-css-hacks/

Note his statement at the top of that page about using conditional comments, which I personally suggest if you can edit the markup and are not limited to the CSS.

Upvotes: 0

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2551

The not IE conditional comment is a bit of a hack, and is therefore written slightly differently from when you are targeting IE.

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

Non-IE browsers will read this as they ignore the conditional comments completely and the comment is considered closed with the added extras. IE will read this as a "not IE" conditional and avoid calling the stylesheet.

Upvotes: -1

Related Questions