Progressive Enhancement

Progressive Enhancement is a design philosophy: start with basic functionality that works everywhere, then layer on enhancements for capable browsers.

Core Principle: Begin with the most fundamental experience, then enhance upward.

Three Layers:

1. Content Layer: Semantic HTML that works without CSS/JS
2. Presentation Layer: CSS that enhances but doesn’t break basic functionality
3. Behavior Layer: JavaScript that adds interaction but gracefully degrades

Mental Model: Like building a house - foundation first, then walls, then decorations.

CSS Application:

• Use @supports for feature detection
• Provide fallbacks: background: blue; background: linear-gradient(...);
• Default to working state, enhance conditionally

Opposite: Graceful degradation (start complex, handle failures)

Key Benefit: Ensures accessibility and resilience across diverse user contexts.