{"id":21957,"date":"2013-06-12T08:06:53","date_gmt":"2013-06-12T15:06:53","guid":{"rendered":"http:\/\/css-tricks.com\/?p=21957"},"modified":"2013-06-12T08:06:53","modified_gmt":"2013-06-12T15:06:53","slug":"ie-10-specific-styles","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/ie-10-specific-styles\/","title":{"rendered":"IE 10 Specific Styles"},"content":{"rendered":"

Conditional comments are gone<\/a> in IE 10. That’s good. IE 10 is a very good browser. Feature detection is a better way to go in nearly all cases. But what if you find some styling situation where you absolutely need to target IE 10? I guess you’ll have to do this.<\/p>\n

<\/p>\n

Rogie posted a really simple idea<\/a> a while back that should still work great for this. Add the User Agent to the <html><\/code> element with a tiny bit of JavaScript:<\/p>\n

var doc = document.documentElement;\r\ndoc.setAttribute('data-useragent', navigator.userAgent);<\/code><\/pre>\n
IE 10’s User Agent string is:<\/p>\n
Mozilla\/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident\/6.0)<\/code><\/pre>\n
Which will result in:<\/p>\n
<html data-useragent=\"Mozilla\/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident\/6.0)\"><\/code><\/pre>\n
And you can then style like:<\/p>\n
html[data-useragent*='MSIE 10.0'] h1 {\r\n  color: blue;\r\n}<\/code><\/pre>\n
<\/code>Check out this Pen!<\/a><\/pre>\n","protected":false},"excerpt":{"rendered":"
Conditional comments are gone in IE 10. That’s good. IE 10 is a very good browser. Feature detection is a better way to go in nearly all cases. But what if you find some styling situation where you absolutely need to target IE 10? I guess you’ll have to do this.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":170779,"url":"https:\/\/css-tricks.com\/svg-use-external-source\/","url_meta":{"origin":21957,"position":0},"title":"SVG `use` with External Source","date":"May 23, 2014","format":false,"excerpt":"There is another, newer article on this subject that covers some newer information. Inline SVG is an awesome way to use SVG because, among other reasons, the individual shapes that make up the graphic can be scripted and styled. The shapes are right in the DOM. But does that mean\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":364346,"url":"https:\/\/css-tricks.com\/ie-down-edge-up-global-browser-usage-stats-are-for-cocktail-parties-and-conference-slides\/","url_meta":{"origin":21957,"position":1},"title":"IE Down, Edge Up… Global Browser Usage Stats Are for Cocktail Parties and Conference Slides","date":"February 28, 2022","format":false,"excerpt":"I enjoy articles like Hartley Charlton's \"Microsoft Edge Looks Set to Overtake Safari as World's Second Most Popular Desktop Browser.\" It's juicy! We know these massive players in the browser market care very much about their market share, so when one passes another it's news. Like an Olympic speed skater\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/ie-inverted.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":999,"url":"https:\/\/css-tricks.com\/links-of-interest-48\/","url_meta":{"origin":21957,"position":2},"title":"Links of Interest","date":"September 16, 2008","format":false,"excerpt":"IE 8 Proprietary CSS Attributes IE 8 will have a number of proprietary CSS attributes. Not a big surprise, all the major browsers have them. It's a way to have support for a) stuff that is truly proprietary to that browser, b) stuff that they want to support but the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195363,"url":"https:\/\/css-tricks.com\/inline-svg-grunticon-fallback\/","url_meta":{"origin":21957,"position":3},"title":"Inline SVG with Grunticon Fallback","date":"February 9, 2015","format":false,"excerpt":"In which we look at Grunticon and how it can be used as the fallback system even if you want to start with inline SVG in the document.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":132,"url":"https:\/\/css-tricks.com\/how-to-create-an-ie-only-stylesheet\/","url_meta":{"origin":21957,"position":4},"title":"How To Create an IE-Only Stylesheet","date":"January 20, 2010","format":false,"excerpt":"This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear. If you read this blog, there is a 99% chance you've had a hair-pulling experience with IE. But if you are worth your salt as a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":273108,"url":"https:\/\/css-tricks.com\/css-grid-in-ie-debunking-common-ie-grid-misconceptions\/","url_meta":{"origin":21957,"position":5},"title":"CSS Grid in IE: Debunking Common IE Grid Misconceptions","date":"July 2, 2018","format":false,"excerpt":"This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/21957"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21957"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/21957\/revisions"}],"predecessor-version":[{"id":21972,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/21957\/revisions\/21972"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=21957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}