{"id":3512,"date":"2017-05-18T08:17:21","date_gmt":"2017-05-18T06:17:21","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=3512"},"modified":"2020-02-09T10:59:50","modified_gmt":"2020-02-09T09:59:50","slug":"conditional-css-edge-and-ie-with-breakpoints","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/conditional-css-edge-and-ie-with-breakpoints-3512\/","title":{"rendered":"Conditional CSS for Edge and IE with breakpoints"},"content":{"rendered":"\n<p>Yesterday, I \u2014 unfortunately \u2014 had to write conditional CSS for IE and Edge\u2026 Both have problems with rendering my link <code class=\"lang-css\">:focus<\/code> style in the new WordPress theme, so I had to create a fallback.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>After discovering a <a href=\"https:\/\/jeffclayton.wordpress.com\/2015\/04\/07\/css-hacks-for-windows-10-and-spartan-browser-preview\/\">CSS hack for addressing Edge per breakpoint in a post by Jeff Clayton<\/a>, I also did not want a conditional comment solution for IE, but a breakpoint, too. Jeff for the rescue \u2014 he also has an <a href=\"https:\/\/jeffclayton.wordpress.com\/2014\/07\/22\/internet-explorer-css-hacks-collection\/\">article with IE CSS hacks<\/a>.<\/p>\n\n\n\n<p>That is the result:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/**\n * Conditional CSS for Edge 12+.\n * @link: https:\/\/jeffclayton.wordpress.com\/2015\/04\/07\/css-hacks-for-windows-10-and-spartan-browser-preview\/\n *\/<\/span>\n<span class=\"hljs-keyword\">@supports<\/span> (<span class=\"hljs-attribute\">-ms-ime-align:<\/span>auto) {\n\t<span class=\"hljs-comment\">\/* Conditional Edge styles *\/<\/span>\n}\n\n<span class=\"hljs-comment\">\/**\n * Conditional CSS for IE 8+ (and old Firefox 1.x).\n * @link: https:\/\/jeffclayton.wordpress.com\/2015\/04\/07\/css-hacks-for-windows-10-and-spartan-browser-preview\/\n *\/<\/span>\n<span class=\"hljs-keyword\">@media<\/span> screen\\<span class=\"hljs-number\">0<\/span> {\n\t<span class=\"hljs-comment\">\/* Conditional IE styles *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"<p>Yesterday, I \u2014 unfortunately \u2014 had to write conditional CSS for IE and Edge\u2026 Both have problems with rendering my link :focus style in the new WordPress theme, so I had to create a fallback.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-3512","post","type-post","status-publish","format-standard","hentry","category-tips"],"wp-worthy-pixel":{"ignored":false,"public":null,"server":null,"url":null},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3512"}],"version-history":[{"count":3,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3512\/revisions"}],"predecessor-version":[{"id":5888,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3512\/revisions\/5888"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}