{"id":106,"date":"2018-09-18T00:13:03","date_gmt":"2018-09-18T00:13:03","guid":{"rendered":"http:\/\/hdd.local\/?p=106"},"modified":"2018-10-22T12:26:51","modified_gmt":"2018-10-22T12:26:51","slug":"how-to-target-ie-ie-specific-css-styles","status":"publish","type":"post","link":"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/","title":{"rendered":"How to target IE \/ IE Specific CSS styles"},"content":{"rendered":"<p>OK. Let&#8217;s take a look at the IE changes over time. When we wanted to target IE browsers in order to use IE specific styles, we would normally create a CSS specific file(normally titled: ie.css) with the IE specific CSS styles. We would then use conditional commenting as such:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-html\">&lt;!--- code for using different IE stylesheets ---&gt;\r\n \r\n &lt;!--[if IE 8]&gt;\r\n       &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/test.com\/css\/ie8.css\" \/&gt;\r\n &lt; ![endif]--&gt;\r\n &lt;!--[if IE 9]&gt;\r\n    \t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/test.com\/css\/ie.css\" \/&gt;\r\n &lt; ![endif]--&gt;<\/code><\/pre>\n<p>Then if the browser was IE, it would load the specific IE css file with the IE specific styles.<\/p>\n<p>Then came the changes. IE 10 drops conditional commenting. Then IE 11 decides to change their User Agent. So now what?<\/p>\n<p>In order to target IE and render the IE specific CSS styles we had to do a work around. So this is a quick example of how to accomplish this task in today&#8217;s modern IE browsers.<\/p>\n<p>1.\u00a0Create a small piece of JavaScript which I place in my header files which grabs the user agent of the browser.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-html\">&lt;script type=\"text\/javascript\"&gt;\r\nvar doc = document.documentElement;\r\ndoc.setAttribute('data-useragent', navigator.userAgent);    \r\n&lt;\/script&gt;<\/code><\/pre>\n<p>2. Then in my CSS style sheet, (you can create an IE only css file or just place the IE specific styles in your main css file) I create my specific styles for each of my IE Browsers. So as of today, I normally target back to IE 8. This is now my code looks like in my CSS style sheet. Unfortunately, these styles get loaded for every browser but the styles are only used for their specific IE versions. Normally, I usually do not have a lot of specific IE styles just a small amount so the little bit of extra payload is not that big of deal having to be loaded in every browser.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-html\">\/* ==========================================================================\r\n   IE STYLES\r\n   ========================================================================== *\/\r\n\/************* IE 11 STYLES *****************\/\r\nhtml[data-useragent*='rv:11.0']  .socialmediaicons {\r\n    width: 480px;\r\n}\r\n\r\n\/************* IE 10 STYLES *****************\/\r\nhtml[data-useragent*='MSIE 10.0']  .socialmediaicons {\r\n    width: 480px;\r\n}\r\n\r\n\/************* IE 9 STYLES *****************\/     \r\nhtml[data-useragent*='MSIE 9.0']  .socialmediaicons {\r\n    width: 480px;\r\n}\r\n\r\n\/************* IE 8 STYLES *****************\/\r\nhtml[data-useragent*='MSIE 8.0']  .socialmediaicons {\r\n    width: 480px;\r\n    margin-right: 35px;\r\n    margin-top: -50px !important;\r\n}<\/code><\/pre>\n<p>Now the next big question is, what will the NEW Microsoft Edge browser have in store for us. No worries about the later versions of IE as they will still be around for some time in support of legacy software. So using the above solution will still be in play for a while.<\/p>\n<p>Please feel to leave comments and let me know what you think or if you run into any issues.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>OK. Let&#8217;s take a look at the IE changes over time. When we wanted to target IE browsers in order to use IE specific styles, we would normally create a CSS specific file(normally titled: ie.css) with the IE specific CSS<\/p>\n","protected":false},"author":1,"featured_media":202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[2,3,4],"tags":[],"acf":false,"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to target IE \/ IE Specific CSS styles - Hyperdrive Designs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to target IE \/ IE Specific CSS styles - Hyperdrive Designs\" \/>\n<meta property=\"og:description\" content=\"OK. Let&#8217;s take a look at the IE changes over time. When we wanted to target IE browsers in order to use IE specific styles, we would normally create a CSS specific file(normally titled: ie.css) with the IE specific CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"Hyperdrive Designs\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-18T00:13:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-22T12:26:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/09\/ie-post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2250\" \/>\n\t<meta property=\"og:image:height\" content=\"1875\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Darren\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Darren\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/\",\"url\":\"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/\",\"name\":\"How to target IE \/ IE Specific CSS styles - Hyperdrive Designs\",\"isPartOf\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\"},\"datePublished\":\"2018-09-18T00:13:03+00:00\",\"dateModified\":\"2018-10-22T12:26:51+00:00\",\"author\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\"},\"breadcrumb\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hyperdrivedesigns.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to target IE \/ IE Specific CSS styles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\",\"url\":\"https:\/\/hyperdrivedesigns.com\/\",\"name\":\"Hyperdrive Designs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\",\"name\":\"Darren\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"caption\":\"Darren\"},\"url\":\"https:\/\/hyperdrivedesigns.com\/author\/darren\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to target IE \/ IE Specific CSS styles - Hyperdrive Designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/","og_locale":"en_US","og_type":"article","og_title":"How to target IE \/ IE Specific CSS styles - Hyperdrive Designs","og_description":"OK. Let&#8217;s take a look at the IE changes over time. When we wanted to target IE browsers in order to use IE specific styles, we would normally create a CSS specific file(normally titled: ie.css) with the IE specific CSS","og_url":"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/","og_site_name":"Hyperdrive Designs","article_published_time":"2018-09-18T00:13:03+00:00","article_modified_time":"2018-10-22T12:26:51+00:00","og_image":[{"width":2250,"height":1875,"url":"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/09\/ie-post.png","type":"image\/png"}],"author":"Darren","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Darren","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/","url":"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/","name":"How to target IE \/ IE Specific CSS styles - Hyperdrive Designs","isPartOf":{"@id":"https:\/\/hyperdrivedesigns.com\/#website"},"datePublished":"2018-09-18T00:13:03+00:00","dateModified":"2018-10-22T12:26:51+00:00","author":{"@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6"},"breadcrumb":{"@id":"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hyperdrivedesigns.com\/how-to-target-ie-ie-specific-css-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hyperdrivedesigns.com\/"},{"@type":"ListItem","position":2,"name":"How to target IE \/ IE Specific CSS styles"}]},{"@type":"WebSite","@id":"https:\/\/hyperdrivedesigns.com\/#website","url":"https:\/\/hyperdrivedesigns.com\/","name":"Hyperdrive Designs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6","name":"Darren","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","caption":"Darren"},"url":"https:\/\/hyperdrivedesigns.com\/author\/darren\/"}]}},"_links":{"self":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/106"}],"collection":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":0,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media\/202"}],"wp:attachment":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media?parent=106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/categories?post=106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/tags?post=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}