Progressive Enhancement : Contenu de Base et Fonctionnalités Avancées

Qu'est-ce que Progressive Enhancement ?

Progressive enhancement est une approche dans le développement web qui commence avec le 'pire cas' (navigateur le moins capable) et améliore l'expérience avec les fonctionnalités supportées.

Principe central : Le contenu et la fonctionnalité de base doivent toujours fonctionner. JavaScript, CSS et les fonctionnalités HTML avancées améliorent l'expérience mais ne sont pas requises.

Opposé de graceful degradation : Graceful degradation commence avec la meilleure expérience et se dégrade dans les environnements à faible capacité. Progressive enhancement commence avec l'expérience de base et améliore.

Avantages : Accès utilisateur plus large, meilleure performance, meilleur SEO, meilleure accessibilité.

Couches Fondamentales

HTML (contenu) : Contenu de base et structure avec HTML sémantique. Lisible et utilisable sans JavaScript.

CSS (présentation) : Les styles de base fonctionnent dans tous les navigateurs. Les fonctionnalités CSS avancées sont appliquées conditionnellement avec @supports.

JavaScript (comportement) : La fonctionnalité de base fournie par les formulaires HTML. JavaScript ajoute une UX améliorée (AJAX, animation).

Chaque couche se construit sur la précédente. Si une couche inférieure casse, les couches supérieures cassent aussi mais la fonctionnalité de base est préservée.

Approche HTML First

HTML sémantique : Utilisez les bons éléments HTML. <button>, <a>, <form>, <input>, <nav>, <main>, <article>.

Formulaires : Créez des formulaires qui fonctionnent sans JavaScript. Traitement côté serveur avec les attributs action et method.

Liens : Utilisez de vrais liens <a href="...">. Faites le routing côté client avec JavaScript mais fournissez le routing côté serveur comme fallback.

NoScript : Montrez du contenu alternatif avec la balise <noscript> quand JavaScript est désactivé.

Progressive Web App : Service Worker et manifest sont ajoutés quand le site de base fonctionne. Le site de base fonctionne sans JavaScript.

CSS Progressive Enhancement

@supports : Stylisation conditionnelle avec CSS feature query. @supports (display: grid) { .container { display: grid; } }.

Fallback : Le style de base fonctionne dans tous les navigateurs. Les fonctionnalités avancées sont appliquées dans les navigateurs qui les supportent.

Exemple : .button { background: blue; } @supports (backdrop-filter: blur(10px)) { .button { backdrop-filter: blur(10px); background: rgba(0,0,255,0.5); } }.

CSS custom properties : Utilisez des valeurs de fallback si les variables ne sont pas supportées. color: blue; color: var(--primary, blue);.

JavaScript Progressive Enhancement

Détection de fonctionnalités : Vérifiez les capacités du navigateur avec Modernizr ou la détection native de fonctionnalités.

Polyfill : Ajoutez les fonctionnalités manquantes (fetch, Promise, IntersectionObserver) avec polyfill. Utilisez core-js ou polyfill.io.

Graceful degradation : La fonctionnalité de base doit être préservée si JavaScript échoue. Capturez les erreurs avec try/catch.

Module/nomodule : ES modules pour les navigateurs modernes, bundle transpilé pour les anciens navigateurs. <script type="module" src="app.mjs"> et <script nomodule src="app.js">.

Lazy loading : Chargez de manière lazy les fonctionnalités avancées (animation, widget interactif). Le contenu de base se charge immédiatement.

Tests et Évaluation

Test avec JavaScript désactivé : Désactivez JavaScript dans le navigateur. La fonctionnalité de base fonctionne-t-elle ?

Test de connexion lente : Testez avec 3G ou WiFi lent. Le contenu se charge-t-il à temps ?

Test d'ancien navigateur : Testez avec IE11, Safari/Chrome ancien. La fonctionnalité de base fonctionne-t-elle ?

Lighthouse : Vérifiez les scores d'Accessibility et Best Practices. Progressive enhancement améliore ces scores.