Progressive Enhancement
Building so the core experience works without scripts, with richer behavior layered on top.
Progressive enhancement is the practice of delivering a functional baseline in HTML and CSS, then layering scripted behavior on top for environments that support it. The order matters: the baseline is the product, and enhancement is optional.
It is not primarily about people who disable JavaScript. It is about the far more common cases where scripts have not arrived yet, failed to load, threw an error, or are blocked — and about crawlers, link previewers, and assistive technology, none of which are guaranteed to execute anything.
Modern CSS has made the pattern more attractive by moving capabilities that once required scripts into the platform: disclosure widgets via native elements, scroll-driven animation via CSS timelines, container-relative layout, and view transitions. Each is a case where the no-script path is not a degraded fallback but simply the implementation.
The design constraint it imposes is real and worth stating. An entrance animation that starts at zero opacity and is revealed by script means that without script the content is invisible — the enhancement became load-bearing. For any surface that must render without JavaScript, animation has to be limited to interaction rather than entrance, or the baseline is broken. See Motion Design and Islands Architecture.
See also4
Semantic HTML
Using elements for their meaning, so the document conveys structure without extra description.
Design & Interface13 connections
Server-Side Rendering
Producing a page's HTML on the server so the first response is already content.
Web Platform18 connections
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface27 connections
Hydration
Attaching client-side behavior to server-rendered markup without rebuilding it.
Web Platform13 connections
Related3
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from13
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- Document Object ModelWeb Platform
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- HydrationWeb Platform
Attaching client-side behavior to server-rendered markup without rebuilding it.
- Islands ArchitectureWeb Platform
Rendering a page as static HTML with small independently interactive regions.
- Motion DesignDesign & Interface
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
- Reduced MotionDesign & Interface
An operating-system preference signaling that animation should be minimized, for real medical reasons.
- RSSData & Content
A syndication format letting readers subscribe to a site without an intermediary.
- Semantic HTMLDesign & Interface
Using elements for their meaning, so the document conveys structure without extra description.
- Server-Side RenderingWeb Platform
Producing a page's HTML on the server so the first response is already content.
- Service WorkerWeb Platform
A background script the browser runs between a page and the network, able to intercept requests even when no page is open.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.
- Web ComponentsWeb Platform
A set of browser-native APIs for building reusable, encapsulated HTML elements without a framework.