Progressive Enhancement
Building so the core experience works without scripts, with richer behaviour layered on top.
Progressive enhancement is the practice of delivering a functional baseline in HTML and CSS, then layering scripted behaviour 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
Hand-picked in the note itself — the neighbours worth reading next.
Semantic HTML
Using elements for their meaning, so the document conveys structure without extra description.
Design & Interface12 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 & Interface20 connections
Hydration
Attaching client-side behaviour to server-rendered markup without rebuilding it.
Web Platform12 connections
Related3
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from11
Notes elsewhere in the wiki that reach for this one.
- 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 behaviour 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 signalling that animation should be minimised, 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.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.