News


Skype Contact



Blogger

JavaScript Function .prototype

Download: Fast, Fun, Awesome



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


Comments

Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Terry on 4/6/2013 10:14 AM
Just wanted to say thank you. This ie10 trick worked perfectly
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Jarah on 4/26/2013 5:19 PM
Thanks, working for me too!
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Fabian on 4/28/2013 6:50 PM
You just saved my life. Thanks.
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Deks on 5/2/2013 5:33 PM
Cool thing man. Working like a charm!
:D
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Carmen on 6/6/2013 7:21 PM
Thank you very much!!
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Mohana Murali on 6/20/2013 12:41 PM
Great! It works absolutly fine.
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Sofia on 6/28/2013 11:13 PM
Thanks it really helped.
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Faizan on 7/24/2013 2:14 PM
Thanks Its really Helpful For Me
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Gravatar on 10/4/2013 3:38 PM
S. its good only . but i want without script . only at css
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Anirudha on 10/5/2013 8:35 AM
@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.
Gravatar # re: How to write CSS only for Internet Explorer 10?
Posted by @Ashok on 10/8/2013 7:13 PM
Really great code!
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by ramu on 10/18/2013 2:44 PM
i want to write css for ie10 only by using css syntaxes.
please help me
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Justin on 11/5/2013 7:00 PM
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) { }
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Louis on 11/14/2013 3:26 AM
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/
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Bruno on 11/20/2013 9:09 PM
Thank you so much :D
Gravatar # re: How to write CSS only for Internet Explorer 11 ?
Posted by Marker on 11/25/2013 2:06 PM
How to write only css for ie11 ??
Anyone know that ? please reply asap
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Anirudha on 11/25/2013 3:07 PM
@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.


Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by choudhury on 3/22/2014 3:09 PM
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!
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by Imran Ali on 3/31/2014 9:46 AM
---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>
Gravatar # re: How to write CSS only for Internet Explorer 10 ?
Posted by loeflel on 8/18/2014 3:27 PM
Why not use
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
?
Post A Comment
Title:
Name:
Email:
Comment:
Verification: