# Progressive enhancement · Veille technologique

[Source canonique](<https://sebastien.rigaux.be/veille/tags/progressive-enhancement>)

Construction d’une base fonctionnelle enrichie selon les capacités disponibles du navigateur.

## [Modern Web Guidance : des pratiques web actuelles pour les agents de code](<https://sebastien.rigaux.be/veille/liens/modern-web-guidance-des-pratiques-web-actuelles-pour-les-agents-de-code>)

Modern Web Guidance fournit aux agents de code des recommandations expertes sur les API du navigateur, CSS, performance et accessibilité, pour les orienter vers des solutions natives plutôt que vers des patterns legacy. Le dépôt rassemble 232 fonctionnalités et 186 cas d’usage, sous forme de skills installables dans plusieurs agents.

Le CLI recherche un guide en local, puis l’injecte dans le contexte de l’agent. Les consignes intègrent compatibilité Baseline, fallbacks ciblés et évaluation automatisée ; le projet est annoncé en preview.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/veille/liens/modern-web-guidance-des-pratiques-web-actuelles-pour-les-agents-de-code.md>) · [Ressource originale](<https://github.com/GoogleChrome/modern-web-guidance>)

## [React : préserver le progressive enhancement des Server Actions](<https://sebastien.rigaux.be/veille/liens/react-preserver-le-progressive-enhancement-des-server-actions>)

React combine `<form action>`, `useActionState` et `useOptimistic` pour gérer les retours d’attente et les mises à jour optimistes tout en conservant un envoi de formulaire avant l’exécution de JavaScript. L’article montre comment cette continuité permet d’enrichir l’interface après hydratation sans abandonner le comportement natif du navigateur.

Le point décisif est de garder l’action serveur directement dans `action` : une fonction cliente intermédiaire casse la soumission sans JavaScript. Pour l’optimisme, `useHydrated()` permet de choisir entre l’action serveur et sa version enrichie côté client.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/veille/liens/react-preserver-le-progressive-enhancement-des-server-actions.md>) · [Ressource originale](<https://ebey.dev/blog/3myyseusgd22h>)

## [Interop 2027 : dix propositions CSS, de l’accessibilité aux animations](<https://sebastien.rigaux.be/veille/liens/interop-2027-dix-propositions-css-de-laccessibilite-aux-animations>)

Josh W. Comeau passe en revue dix propositions envisagées pour Interop 2027 : fonctions CSS, formes de bordure personnalisées, requêtes liées aux ancres et au défilement, ordre de lecture, animations de dimensions intrinsèques ou décorations de grille. Plusieurs répondent à des problèmes concrets, comme synchroniser la navigation au clavier avec une mise en page responsive via `reading-flow`, ou dessiner les séparateurs de grille sans cellules DOM vides.

Ces propositions n’ont pas toutes le même degré de maturité. En octobre 2026, plusieurs sont disponibles dans Chromium, mais pas encore dans Firefox ni Safari ; `inherit()` n’est implémenté dans aucun navigateur. L’article montre où l’amélioration progressive est envisageable, avec des garde-fous comme `@supports` pour les transitions de

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/veille/liens/interop-2027-dix-propositions-css-de-laccessibilite-aux-animations.md>) · [Ressource originale](<https://www.joshwcomeau.com/css/interop-2027/>)

## [CSS \`random()\` : doser l’imperfection dans les interfaces](<https://sebastien.rigaux.be/veille/liens/css-random-doser-limperfection-dans-les-interfaces>)

La fonction CSS `random()` ajoute des variations visuelles directement dans le navigateur, sans JavaScript ni boucles Sass. Brecht De Ruyte l’illustre avec des lettres légèrement inclinées, des cartes animées au scroll et des ombres adaptées à leur rotation. Pour garder une géométrie cohérente, une clé de cache peut synchroniser plusieurs propriétés, tandis que `sibling-index()` calcule la structure d’un éventail de cartes.

Ces effets conviennent surtout aux éléments décoratifs : l’article déconseille de randomiser les grilles, les textes courants ou les cibles interactives. Le déploiement navigateur étant en cours, il recommande une base stable avec `@supports`, ainsi que le respect de `prefers-reduced-motion` et des besoins des lecteurs d’écran.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/veille/liens/css-random-doser-limperfection-dans-les-interfaces.md>) · [Ressource originale](<https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/>)

## [Conform : valider des formulaires en s’appuyant sur le HTML](<https://sebastien.rigaux.be/veille/liens/conform-valider-des-formulaires-en-s-appuyant-sur-le-html>)

Conform associe validation typée, FormData et amélioration progressive. Le hook useForm expose l’état du formulaire tout en laissant le contrôle du balisage et du cycle de soumission.

2025-02-24 · [Markdown](<https://sebastien.rigaux.be/veille/liens/conform-valider-des-formulaires-en-s-appuyant-sur-le-html.md>) · [Ressource originale](<https://conform.guide/>)
