====== Progressive Enhancement ====== **Progressive enhancement** starts with a working baseline and adds enhancements on top. This is the opposite of [[indieweb:graceful_degradation|graceful degradation]] (which starts with the full experience and removes things when they fail). ===== The Principle ===== - Build the baseline so it works for everyone - Layer enhancements for users with more capable environments - Never require an enhancement for core functionality ===== Why It Matters ===== Most web developers build for a homogeneous user: latest device, latest OS, latest Chromium-based browser. This is hostile to: * Privacy-conscious users who block scripts by default * Users on slow connections or older hardware * Terminal browser users (Lynx, [[protocols:smallweb:clients|Bombadillo]], Offpunk) * Certain assistive technology users * People conserving battery on mobile Like all accessibility work, the result is a better experience for **all** users, not just the edge cases. ===== The .no-js Pattern ===== Start with ''no-js'' on the root element. Let JavaScript remove it if it runs: // First script to run — removes the class if JS is available document.documentElement.classList.remove('no-js'); This creates two automatic states: * **JS on:** ''.no-js'' is removed, everything works normally * **JS off:** ''.no-js'' stays — use it to style accordingly ===== Hiding JS-Dependent Elements ===== .no-js .js-required, .no-js #theme-toggle, .no-js .comments-section, .no-js .post-graph { display: none !important; } Mark interactive elements in HTML:
...
 ===== Explaining, Not Just Hiding ===== Hiding broken elements isn't enough — explain what's happening: .no-js .status-container::after { content: "Status updates require JavaScript to be enabled."; font-style: italic; color: var(--muted); display: block; padding: 1rem; } ===== The