{"id":7492,"date":"2025-10-22T17:53:33","date_gmt":"2025-10-22T22:53:33","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7492"},"modified":"2025-10-22T17:53:34","modified_gmt":"2025-10-22T22:53:34","slug":"for-your-convenience-this-css-will-self-destruct","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/for-your-convenience-this-css-will-self-destruct\/","title":{"rendered":"For Your Convenience, This CSS Will Self-Destruct"},"content":{"rendered":"\n<p>In <a href=\"https:\/\/frontendmasters.com\/blog\/a-progressive-enhancement-challenge\/\">A Progressive Enhancement Challenge<\/a>, I laid out a situation where the hardest thing to do is show a button you <em>never want to show at all<\/em> if the JavaScript loads and executes properly. I wrote of this state:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>It seems like the ideal behavior would be \u201chide the interactive element for a brief period, then if the relevant JavaScript isn\u2019t ready, show the element.\u201d But how?! We can\u2019t count on JavaScript for this behavior, which is the only technology I\u2019m aware of that could do it. Rock and a hard place!<\/p>\n<\/blockquote>\n\n\n\n<p>Scott Jehl blogged <a href=\"https:\/\/scottjehl.com\/posts\/this-css-will-self-destruct\/\">For Your Convenience, This CSS Will Self-Destruct<\/a>, including an idea that fits the bill. It&#8217;s a <code>@keyframes<\/code> animation that hides-by-default then fades in after 2s. With this in place, in your JavaScript, you&#8217;d include a bit that ensures the button <em>stays hidden<\/em>, with a new class. That&#8217;s a win! <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8230; a site&#8217;s JavaScript files can often take many seconds to load and execute, so it&#8217;s great to have something like this ready to bail out of anything fancy in favor of giving them something usable as soon as possible.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>In A Progressive Enhancement Challenge, I laid out a situation where the hardest thing to do is show a button you never want to show at all if the JavaScript loads and executes properly. I wrote of this state: It seems like the ideal behavior would be \u201chide the interactive element for a brief period, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,3,139],"class_list":["post-7492","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-javascript","tag-progressive-enhancement"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/pexels-photo-1555354.jpeg?fit=1880%2C1058&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7492"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7492\/revisions"}],"predecessor-version":[{"id":7496,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7492\/revisions\/7496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7495"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}