{"id":4536,"date":"2018-03-10T11:42:47","date_gmt":"2018-03-10T10:42:47","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4536"},"modified":"2020-02-09T11:27:39","modified_gmt":"2020-02-09T10:27:39","slug":"css-rules-when-javascript-is-disabled","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/css-rules-when-javascript-is-disabled-4536\/","title":{"rendered":"Only apply CSS rules when JavaScript is disabled"},"content":{"rendered":"\n<p>Sometimes there is CSS that should only apply when JavaScript is disabled. The <a href=\"https:\/\/wordpress.org\/plugins\/lazy-loading-responsive-images\/\">lazy loading plugin <em>Lazy Loader<\/em><\/a>, for example, hides the images with the <code class=\"lang-markup\">lazyload<\/code> class, if JS is not active.<\/p>\n\n\n\n<p>Until now I implemented that with a class that was added via JS to the <code class=\"lang-markup\">html<\/code> or <code class=\"lang-markup\">body<\/code> element. Without the class, the images are hidden, and if the class is present, the images are displayed.<\/p>\n\n\n\n<p>Now the user wprox showed me an alternative solution <a href=\"https:\/\/wordpress.org\/support\/topic\/anchors-dont-work-2\/#post-10026428\">in the W.org support forum<\/a>, that he got from the article \u00bb<a href=\"https:\/\/iamsteve.me\/blog\/entry\/nice-and-easy-lazy-loading-with-lazysizes-js\">Nice and easy lazy loading with lazysizes.js<\/a>\u00ab by Steve McKinney: Simply put the styles for disabled JS into a <code class=\"lang-markup\">noscript<\/code> element.<\/p>\n\n\n\n<p>So instead of adding a class via JS to an element, and use that class in CSS to overwrite styles for disabled JavaScript, this is what it looks like in my plugin now:<\/p>\n\n\n<pre class=\"wp-block-code lang-markup\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">noscript<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\t\t<span class=\"hljs-selector-class\">.lazyload<\/span> {\n\t\t\t<span class=\"hljs-attribute\">display<\/span>: none;\n\t\t}\n\t<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">noscript<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you think about it, that is an obvious solution, but it never came to my mind before.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes there is CSS that should only apply when JavaScript is disabled. The lazy loading plugin Lazy Loader, for example, hides the images with the lazyload class, if JS is not active. Until now I implemented that with a class that was added via JS to the html or body element. Without the class, the [&hellip;]<\/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":[6],"tags":[],"class_list":["post-4536","post","type-post","status-publish","format-standard","hentry","category-web-development"],"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\/4536","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=4536"}],"version-history":[{"count":4,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4536\/revisions"}],"predecessor-version":[{"id":5971,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4536\/revisions\/5971"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}