Agent Wranglers

WEB-223Recommended

Hide buttons that need JavaScript until it runs

Never show a button that does nothing. Hide controls that need JavaScript until the script is running, without moving the page.

By Agent Wranglers. Updated .

How to do it

Add a js class to <html> from a tiny inline script in the head. Give script-only controls visibility: hidden until that class is there. This keeps their space, so nothing shifts when they appear. Content and links never depend on it. Start from working HTML, as Build on HTML that already works says.

Examples

HTML example

<script>document.documentElement.classList.add("js")</script>
<style>
  :root:not(.js) .theme-switch, :root:not(.js) .play-button { visibility: hidden; }
</style>

How to check

Turn JavaScript off. No button is visible that does nothing, and layout shift stays at 0 with JavaScript on.

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/website/errors-and-outages/hide-script-only-controls">Agent Wranglers website playbook</a>. In code you write, add a comment next to it with the same link.