Internet Explorer (IE) 10 only styles

ie10_logoWith the release of IE10, Microsoft are no longer supporting conditional comments. Although this is a good step, there will still be instances when you will want to create an IE 10 only style. This article will explain what you have to do, to make your web page display properly in IE10. The code has been taken from the Rogie website and simplified for the less technical. If you want to style for older IE versions, then good examples can be found on the CSS-Tricks Website.


Step One

Insert the following code in between the <head></head> tags of your page;


<script type=’text/javascript’>
var doc = document.documentElement;
doc.setAttribute(‘data-useragent’, navigator.userAgent);


Step Two

Insert the following code into the opening HTML tag;


data-useragent=”Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)”


Step Three

Create a duplicate of the CSS rule that is to have a IE10 version, then prefix the following code to it;


html[data-useragent*=’MSIE 10.0′]


For example, where .TestRule is the duplicate, the code should look like;


html[data-useragent*=’MSIE 10.0′] .TestRule {
color: #339900;

Help Us To Help You

If you found this article useful, would like to comment on it or feel it can be improved, then please feel free to add a comment, below. If you have any ideas or have any subjects / issues you want us to write about, then please let us know via our Blog Ideas page.   We would also be delighted if you could share this page with friends, colleagues or business associates by clicking any of the Share Buttons on this page.

Stay In The Loop

Subscribe to our Newsletter or follow us on Facebook, Twitter, Google+ and LinkedIn for notifications on new articles, video tutorials, website tips and special offers. For immediate answers to your questions, please call us on 01707 _695651