How prevent a style sheet from loading in IE including versions 10 and 11

Question

I would like to create separate style-sheets, one for all IE versions and another one for "normal browsers" ;)

I believe you cant do it with html/css, you would have to check the useragent with javascript — Toni Michel Caubet, Aug 03 '15 at 14:35
Also you could post your code, and maybe we find out why is so glithcy in IE.. — Toni Michel Caubet, Aug 03 '15 at 14:35

user4749485 · Accepted Answer · 2015-08-04T08:34:13.363

<!DOCTYPE html>
<html>
<head>
    <title> overwrite cssText if IE.  ewww nasty.  </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type=text/css>
        body { font-family:'Segoe UI',sans-serif; font-size:14pt; color:black }
        #customLook { display:inline-block; margin-top:50px; margin-left:50px }
    </style>
    <link id=animstyle rel=stylesheet type=text/css href=animstyle.css>
    <script>
        var s= (animstyle.sheet||animstyle.styleSheet)                  // w3c-browser OR ie8
        if (s && s.cssText) s.cssText= ".customSpan:before{content:'not ';color:red}"   // only IE implements sheet.cssText  (including Edge)  it's r/w.
    </script>
</head>
<body>
    <div id=customLook>
        <span class=customSpan>ANIMATED</span>
    </div>
</body>
</html>

try this online demo

Actually, you could put s.disabled=true instead, and then enable some other css link. That'd be more proper. But I just had to post this, because it's so nasty.

Edit Here's an easy way to disable one sheet and replace it with another:


        <link id=animstyle rel=stylesheet type=text/css href=animstyle.css>
        <script>
            var s= (animstyle.sheet||animstyle.styleSheet)                  // w3c-browser OR ie8
            if (s && s.cssText) s.disabled= true                        // only IE implements sheet.cssText  (including Edge)  it's r/w.
        </script>
        <link rel=stylesheet type=text/css href=NOanimstyle.css onload="(this.sheet||this.styleSheet).disabled=!s.disabled">

demo ver2

Hi, Thanks for helping. Your demo certainly works. At least in IE11. Would this work for all IE versions? If that's the case I'd like to use this. I'm just not sure how it works. Sorry for being a complete illiterate regarding JavaScript. Are you suggesting I use one style-sheet that includes the animations and another one that doesn't? That could work for me... Where exactly would I place the second style-sheet link? — David Martins, Aug 04 '15 at 07:02

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

You can use browser sniffing - something like How can I target only Internet Explorer 11 with JavaScript? and then load the right stylesheet using document.write (see When using document.write to load a different css stylesheet, browser refreshes infinitely)

edited May 23 '17 at 11:51

Community

1
1

answered Aug 03 '15 at 14:32

potatopeelings

40,709
7
95
119

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

You might find the answers your looking for here

Appears to have been answered already

edited May 23 '17 at 12:21

Community

1
1

answered Aug 03 '15 at 14:36

Doug

547
10
23

If you were to use ` – Doug Aug 03 '15 at 15:58
I think Conditional Comments are no longer supported by versions 10 and 11. I've tested this and it didn't load the stylesheet: `` – David Martins Aug 03 '15 at 16:42

Toni Michel Caubet · Answer 4 · 2015-08-03T19:02:32.980

0

You can allways to something like this

<script>
var ltie11 = /msie/.test(navigator.userAgent.toLowerCase());
var ie11 = /Trident/.test(navigator.userAgent);
if( ! (ltie11 || ie11) ) {
    var $link = $('<link>').attr('type','text/css').attr('src', 'css/css.css');
    $('body').append($link);
}
</script>

edited Aug 03 '15 at 19:02

answered Aug 03 '15 at 16:34

Toni Michel Caubet

19,333
56
202
378

I tried that but it doesn't load the style-sheet. Am I missing something? `` – David Martins Aug 03 '15 at 16:57
Do you have jquery included and it's the correct path? – Toni Michel Caubet Aug 03 '15 at 17:17
I'm using `` – David Martins Aug 03 '15 at 17:25
There was a syntax error, please use the code from my update! – Toni Michel Caubet Aug 03 '15 at 19:03
Do you see any errors on the console logs or have a link with the actuall code? – Toni Michel Caubet Aug 04 '15 at 18:49

How prevent a style sheet from loading in IE including versions 10 and 11

4 Answers4