posts - 22 , comments - 12 , trackbacks - 0

My Links

News


My portfolio
MaansiTech

JavaScript Function .prototype

Download: Fast, Fun, Awesome


Archives

Post Categories

How to write CSS only for Internet Explorer 10 ?

Recently I hear about IE 10 launch for windows 7. It’s sound pretty good to me. I have check if this have something good for me as a designer’s prospective. I start checking the code that is break in Ie9 or old browser. I found this code still not work in IE10 for me Sad smile. Same way code work without any issue in Firefox and Chrome perfectly.

 

So all I want is writing Custom CSS for IE browser. Unfortunately it will  not work In IE10. Microsoft have removed this feature in Ie10 see link1 link2 This means the code I have written for legacy support doesn’t work in Ie10.

This means this code will no longer work in IE10

<!--[if IE]>
         <link rel="stylesheet" href="assets/ie.css">
         <![endif]—>

 

if you tried to use trick like jQuery.browser() then after jQuery 1.9 it’s no longer work too. see jQuery upgrade guide

script from http://www.impressivewebs.com/ie10-css-hacks/

<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]—>

Will not work. But you can use this code by remove comments and direct run the code without comments. Write above code this way.

<script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script>

 

Now you have class ie10 on your web-pages’s html tag. Now when you write Css you can write custom css for Ie10 this way. This will only work in Ie10

UPDATE 17 MARCH

There is no need to add extra class .ie10 for Ie10. Because we need to run the ie.css in IE10 as what we do for earlier version. adding Ie.css dynamically is enough to solve this issue.

  <script>
if (/*@cc_on!@*/false) {
    var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML    += '<link type="text/css" rel="stylesheet" href="assets/ie.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
</script>

This code will add ie.css in Ie10. Cheers

 Smile

 

Thanks for read my post.

Print | posted on Saturday, March 2, 2013 9:16 PM |

Feedback

Gravatar

# re: How to write CSS only for Internet Explorer 10 ?

Just wanted to say thank you. This ie10 trick worked perfectly
4/6/2013 10:14 AM | Terry
Gravatar

# re: How to write CSS only for Internet Explorer 10 ?

Thanks, working for me too!
4/26/2013 5:19 PM | Jarah
Gravatar

# re: How to write CSS only for Internet Explorer 10 ?

You just saved my life. Thanks.
4/28/2013 6:50 PM | Fabian
Gravatar

# re: How to write CSS only for Internet Explorer 10 ?

Cool thing man. Working like a charm!
:D
5/2/2013 5:33 PM | Deks
Gravatar

# re: How to write CSS only for Internet Explorer 10 ?

thank you so much, thanks for sharing. :)
5/5/2013 5:45 PM | crafeport
Gravatar

# re: How to write CSS only for Internet Explorer 10 ?

Works great but causes a JavaScript error in IE 9 and bleow. Any workaround for this?
5/17/2013 1:51 AM | Ian C
Gravatar

# re: How to write CSS only for Internet Explorer 10 ?

I used this simple line os JS and it works greats for all versions of IE even IE10

<script>
// USE JS TO DETECT IE BECUASE CONDITIONAL STATMENTS NO LONGER WORK IN IE 0
if (navigator.userAgent.search("MSIE") >= 0){
document.write('<link rel="stylesheet" type="text/css" href="ie.css" />');
}
</script>
5/17/2013 2:03 AM | Ian C.
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: