Geeks With Blogs

News
Anirudha gupta

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 . 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

Posted on Saturday, March 2, 2013 9:16 PM | Back to top


Comments on this post: How to write CSS only for Internet Explorer 10 ?

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Just wanted to say thank you. This ie10 trick worked perfectly
Left by Terry on Apr 06, 2013 10:14 AM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Thanks, working for me too!
Left by Jarah on Apr 26, 2013 5:19 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
You just saved my life. Thanks.
Left by Fabian on Apr 28, 2013 6:50 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Cool thing man. Working like a charm!
:D
Left by Deks on May 02, 2013 5:33 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Thank you very much!!
Left by Carmen on Jun 06, 2013 7:21 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Great! It works absolutly fine.
Left by Mohana Murali on Jun 20, 2013 12:41 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Thanks it really helped.
Left by Sofia on Jun 28, 2013 11:13 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Thanks Its really Helpful For Me
Left by Faizan on Jul 24, 2013 2:14 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
S. its good only . but i want without script . only at css
Left by Gravatar on Oct 04, 2013 3:38 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
@cenek,

This trick doesn't change which version of IE you are using, The main purpose of this trick is serve CSS for IE10+. This trick will check but doesn't check version. Same code only applicable on SS Language. You need Javascript atleast to use some good thing like Modernizer.
Left by Anirudha on Oct 05, 2013 8:35 AM

# re: How to write CSS only for Internet Explorer 10?
Requesting Gravatar...
Really great code!
Left by @Ashok on Oct 08, 2013 7:13 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
i want to write css for ie10 only by using css syntaxes.
please help me
Left by ramu on Oct 18, 2013 2:44 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Thanks, this helped me.

I Only had wrap a IE10 check around it because older IE gave script errors on your code:

if (navigator.appVersion.indexOf("MSIE 10") != -1) { }
Left by Justin on Nov 05, 2013 7:00 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Don't add an extra file for IE10, it just makes the browser slower. Add a class instead and work in single stylesheet.

I have a lot of solutions for this here:

http://www.impressivewebs.com/ie10-css-hacks/
Left by Louis on Nov 14, 2013 3:26 AM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Thank you so much :D
Left by Bruno on Nov 20, 2013 9:09 PM

# re: How to write CSS only for Internet Explorer 11 ?
Requesting Gravatar...
How to write only css for ie11 ??
Anyone know that ? please reply asap
Left by Marker on Nov 25, 2013 2:06 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
@Marker

Why you want to do that ?

Simply you can check any feature that exist in IE11. that feature make exception when you call them in earlier version. This way you can caught the exception and know if this is IE11 and earlier version.

Then you can applied css code that you only want to write for IE11.

Left by Anirudha on Nov 25, 2013 3:07 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Hiya im a newbie and im finding it difficult to make this work, could you please make a demo version of this working for IE10 and IE11 to add in custom stylesheets.
Id really appreciate if you could help. Thankyou in Advance!
Left by choudhury on Mar 22, 2014 3:09 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
---You can detect and apply specific styles for ie10 using this---
<script>
if (/*@cc_on!@*/false) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="assets/css/ie10.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
</script>
Left by Imran Ali on Mar 31, 2014 9:46 AM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
Why not use
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
?
Left by loeflel on Aug 18, 2014 3:27 PM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
GENIUS!!! Thanks from Mexico
Left by jesus on Jan 16, 2015 6:18 AM

# re: How to write CSS only for Internet Explorer 10 ?
Requesting Gravatar...
I tried this code below and it didn't work. Am i missing something?

<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>
Left by Dan on Mar 15, 2016 11:23 PM

Your comment:
 (will show your gravatar)


Copyright © Anirudha | Powered by: GeeksWithBlogs.net