When things break Recommended

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 Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

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.

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: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/when-things-break/hide-script-only-controls.