Let’s say you’ve got some interactive element.<\/p>\n\n\n\n
This element works perfectly fine in just HTML, which is the foundation of progressive enhancement.<\/p>\n\n\n\n
And now, in your JavaScript, the functionality this button provides isn’t really necessary anymore, and your plan is to hide<\/strong> this element.<\/p>\n\n\n\n What is the best way to accomplish this?<\/p>\n\n\n\n I think it’s good to think of this abstractly, but if what I’ve presented above is so abstract that it makes it hard to think about, here are some examples:<\/p>\n\n\n\n A classic approach to this is hiding the button when you know JavaScript is available. You put something like this pretty early in your HTML:<\/p>\n\n\n If this executes, you’ve proven that JavaScript is available, so you hide the button:<\/p>\n\n\n As appealing as this looks, it may not be the catch-all perfect solution.<\/p>\n\n\n\n This question came up for me from a ShopTalk Show listener Tibor Leupold writing in asking about it. He was concerned about layout shift<\/strong> as a result of hiding the element(s) as well as the awkward UX. <\/p>\n\n\n\n Let’s get this one out of the way: couldn’t you just… leave the interactive elements there but change their functionality when the JavaScript loads?<\/strong> Maybe? Probably? That’s skirting the question though. Let’s assume the web is a big place with an unknowable amount of situations and that this particular situation of needing\/wanting to hide an element with minimal impact is a reasonable one.<\/p>\n\n\n\n A way to think about our needs here is that there are three states to concern ourselves with:<\/p>\n\n\n\n We’re probably not going to hide the button by default, as we don’t have a mechanism for un-hiding it in a no-JS situation. So we basically don’t need to do anything to accomplish this state, just have the interactive element on the page and functional in HTML. <\/p>\n\n\n\n In the reverse situation<\/strong>, where you have an element on the page that only<\/em> works with JavaScript, you can hide it in a no-JS situation like:<\/p>\n\n\n This is the hardest state. In this state, perhaps we know that JavaScript is available, but we don’t know how long<\/em> it’s going to take or even if<\/em> the JavaScript we care about is going to execute successfully.<\/p>\n\n\n\n It seems like the ideal behavior would be “hide the interactive element for a brief period, then if the relevant JavaScript isn’t ready, show the element.” But how?! We can’t count on JavaScript for this behavior, which is the only technology I’m aware of that could do it. Rock and a hard place!<\/p>\n\n\n\n Maybe there is some extremely exotic technique involving HTML streaming that could delay the “send” of the interactive element down from the network for that brief blocking period? That’d be wild.<\/p>\n\n\n\n\n
<a href=\"?page=3\">Load More<\/a><\/code>) which you don’t need after JavaScript loads because you’ve implemented an infinite scroll UX.<\/li>\n\n\n\n<button onclick=\"save()\">Save<\/button><\/code>) which you don’t need after JavaScript loads because you’ve implemented auto-saving functionality.<\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\nA “js” Class<\/h2>\n\n\n\n
<script<\/span>><\/span>\n document<\/span>.documentElement.classList.add(\"js\"<\/span>);\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nhtml<\/span>.js<\/span> {\n .save-button {\n display<\/span>: none;\n }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nDownsides:<\/h3>\n\n\n\n
\n
On States<\/h2>\n\n\n\n
\n
No JS<\/h3>\n\n\n\n
<noscript<\/span>><\/span>\n <style<\/span>><\/span>\n .js-only-interactive-element<\/span> {\n display<\/span>: none;\n }\n <\/span><\/style<\/span>><\/span>\n<\/noscript<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nBefore JS Loaded<\/h3>\n\n\n\n