Qu'est-ce que l'amélioration progressive (progressive enhancement) ?

Question

Accepted Answer

**Progressive enhancement** est une stratégie consistant à construire à partir d'une base solide et fonctionnelle (HTML sémantique qui fonctionne partout), puis d'*ajouter progressivement* CSS pour la présentation et JavaScript pour un comportement plus riche — de sorte que l'expérience de base fonctionne même si les couches supérieures échouent. ## Les trois couches ```text 1. HTML → content + functionality (works with no CSS/JS) 2. CSS → presentation/layout (enhances appearance) 3. JS → interactivity (enhances behavior) ``` ## Un exemple concret : un formulaire ```html ``` ```js // Layer 3: IF JS is available, enhance it into a live AJAX search form.addEventListener("submit", (e) => { e.preventDefault(); // upgrade to fetch — no reload fetchResults(form.q.value); }); ``` Si JavaScript ne se charge pas (réseau instable, erreur, bloqué), le formulaire **fonctionne toujours** via l'envoi natif — l'utilisateur peut toujours effectuer une recherche. JS l'*améliore* simplement. ## Progressive enhancement vs graceful degradation - **Progressive enhancement** — commencer par la base, construire *vers le haut*. (De bas en haut.) - **Graceful degradation** — commencer par la version complète, s'assurer qu'elle se *dégrade* convenablement. (De haut en bas.) Progressive enhancement est généralement plus robuste car la base est garantie de fonctionner. ## Pourquoi c'est important Elle produit des sites résilients, accessibles et performants : le contenu est dans l'HTML (bon pour le SEO, les lecteurs d'écran et les appareils lents/anciens), la page est utilisable avant/sans JS (chargement perçu plus rapide, fonctionne si un script plante), et les améliorations sont un bonus plutôt qu'une exigence. Dans un monde d'appareils, de réseaux et de défaillances variés, construire sur une base HTML fonctionnelle — plutôt que de supposer que JS s'exécute toujours — garde un site utilisable pour tout le monde. Les frameworks modernes font écho à cela avec le rendu côté serveur et « la plateforme fonctionne d'abord, l'hydratation améliore ».