CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer
Jitendra Vyas
Jitendra Vyas

Reputation: 152767

How to replace or remove any specific CSS property with css file for IE8 and lower only using javascript?

This is css code which I only want for IE8 and lower

background: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); / IE6-8 */

But if user is on IE9 I either want to remove this propert from CSS file or I want to replace with filter:none

is it possible using javascript, jquery? I know I can do with seperate style sheet for IE but just curious if it's possible with javascript.

Edit:

Is it possible like in javascript or jquery

// If browser is IE9

then replace

filter: progid:DXImageTransform.Microsoft.gradient(values)

to filter:none

Upvotes: 1

Views: 2807

Answers (5)

apnerve
apnerve

Reputation: 4829

Yes. It is "possible" in JavaScript. But it needs to be done both at the sever-side as well as client-side.

On the client-side, you need to detect if it is a IE9 and then send a request to the server for a script (server-side JavaScript) that parses the CSS files and replaces all occurrences of the filter properties and set it to filter:none and then serve the modified CSS file to the client.

PS: This, IMHO, would be the worst thing that you can ever do and I don't recommend it. This is just to answer your curious question if this is "possible in JavaScript".

Upvotes: 2

Raghav
Raghav

Reputation: 1064

I see that there are different answers out here but personally I will advise the following approach.

Have two CSS classes - one containing styling for IE9 and the other containing styling for all the other browsers.

As mentioned in one of the answers above, use jQuery.browser API to determine the browser type. I will advise that you add this string say "msie9" or "msie8" as a class to "body" or "html" element.

Once this is done, your styling for IE9 will be

body.msie9 .ie9specificclass{ }

For others, it will be

.specificClass{ }

This will be a clean approach.

Upvotes: 0

Parzifal
Parzifal

Reputation: 1076

$(document).ready(function(){
    if ($.browser.msie && $.browser.version < 9) {
         $("#element").css("filter", "progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );")
    }
})

Upvotes: 1

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

I think the easiest way is to put an "IE" class on your HTML element using conditional code... I think I got this originally from the HTML5 boilerplate http://html5boilerplate.com/

<!doctype html>

<!--[if lt IE 7 ]> <html class="no-js ie" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

.bg-gradient {background: filter: 0, #999}

.ie .bg-gradient {  
    background: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); / IE6-8 */
}

Then simply use add and remove class to remove the 'element' class

$(document).ready(function(){
    $('.element').addClass('bg-gradient');
})

Filter won't be rendered by non IE browsers so adding it or removing for all browsers except IE 6-8 will have the same effect as doing it just for IE9. Also I believe that ie9 supports multiple background properties so the other browsers should skip over the first comma separated value-- in theory-- I haven't tested it. If not, just use regular css2 syntax:

.bg-gradient {background: filter: 0}

Upvotes: 2

clem
clem

Reputation: 3366

use conditional comments and add a css file for IE8 and lower
here is a tutorial

EDIT: use jquery's browser check and apply the css with javascript
with jQuery.browser.version you can get the version

Upvotes: 0

Related Questions