Il s'agit d'un aperçu anticipé des conseils pour le Web moderne. Nous ajoutons régulièrement du contenu. N'hésitez pas à contribuer ou à nous faire part de vos commentaires sur GitHub.

Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Premiers pas avec les conseils pour le Web moderne

Modern Web Guidance est un ensemble de compétences qui intègrent l'expertise de la plate-forme Web, les bonnes pratiques et les données de compatibilité des navigateurs directement dans vos agents de codage. Cela permet d'éloigner vos agents de codage des anciens modèles et de les orienter vers des solutions qui exploitent la puissance et les capacités de la plate-forme Web moderne.

Installation

Modern Web Guidance peut être installé et utilisé avec n'importe quel agent de codage compatible avec les compétences.

CLI `modern-web-guidance` (recommandée)

La méthode d'installation recommandée consiste à utiliser la CLI modern-web-guidance créée par l'équipe Chrome. L'installation de Modern Web Guidance via la CLI modern-web-guidance permet d'activer les mises à jour automatiques. Vous pouvez effectuer l'installation à partir de la CLI modern-web-guidance comme suit :

npx modern-web-guidance@latest install

Si vous développez des extensions Chrome, nous vous recommandons la commande suivante :

npx modern-web-guidance@latest install --choose

Cela exécute un assistant interactif pour installer les compétences selon vos préférences.

Si vous préférez installer Modern Web Guidance sans utiliser la CLI modern-web-guidance, consultez les instructions spécifiques à l'agent suivantes. Notez simplement que la plupart de ces options ne sont pas compatibles avec les mises à jour automatiques.

Antigravity

Téléchargez Antigravity et activez "modern-web-guidance" lors du processus d'installation ou à partir de la page Settings (Paramètres) sous Customizations (Personnalisations), puis Build with Google Plugins (Créer avec des plug-ins Google).

CLI Antigravity

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Gemini CLI

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

JetBrains WebStorm

Vous trouverez Modern Web Guidance dans le gestionnaire de compétences, disponible sous Settings > AI Assistant > Skills. Sélectionnez une compétence pour ouvrir sa page d'informations. Pour installer la compétence, cliquez sur le bouton Install (Installer) afin de l'appliquer à l'instance IDE actuelle.

GitHub CLI

gh skill install GoogleChrome/modern-web-guidance

`npx skills`

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

Claude Code CLI

L'installation de Modern Web Guidance pour une utilisation avec Claude Code CLI s'effectue en trois étapes :

1. Ajoutez le Marketplace :

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Installez le plug-in depuis le Marketplace :

/plugin install modern-web-guidance@googlechrome

3. Rechargez les plug-ins :

/reload-plugins

Copilot CLI

L'installation de Modern Web Guidance pour une utilisation avec Copilot s'effectue en deux étapes :

1. Ajoutez le Marketplace :

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Installez le plug-in depuis le Marketplace :

/plugin install modern-web-guidance@googlechrome

Oie

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

Explorer avant l'installation

Évaluez la bibliothèque de guides Modern Web Guidance avant l'installation en effectuant une recherche avec une requête ou en récupérant nos guides par ID. Pour ce faire, utilisez la commande search de la CLI pour trouver l'ID du cas d'utilisation à l'aide d'une invite :

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

Un objet JSON s'affiche dans votre terminal :

[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]

En lisant les valeurs description, vous pouvez ensuite choisir l'id qui correspond le mieux à votre objectif et utiliser la commande retrieve :

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

Dans ce cas, le guide Markdown pour le cas d'utilisation animate-to-from-top-layer s'affiche dans le terminal. Pour d'autres cas d'utilisation, remplacez animate-to-from-top-layer par n'importe quel ID de cas d'utilisation valide.

Pourquoi utiliser Modern Web Guidance ?

Modern Web Guidance offre un avantage au développeur Web par rapport aux modèles d'IA sans assistance pour trois raisons distinctes :

Les agents de codage IA ont tendance à utiliser par défaut des solutions plus anciennes et obsolètes pour résoudre les problèmes de développement Web modernes. Ces solutions contiennent souvent du code JavaScript pour fournir des fonctionnalités permettant de résoudre des problèmes qui sont mieux résolus par les API CSS et HTML modernes.
Historiquement, les modèles d'IA n'ont pas été conscients des dernières fonctionnalités de la plate-forme Web ou ont fourni des informations incorrectes à leur sujet.
Enfin, les modèles d'IA ont tendance à faire des recommandations obsolètes qui ne tiennent pas compte des exigences du projet ni des critères de compatibilité des navigateurs, plutôt que d'adapter les conseils aux exigences de référence d'un projet donné.

Modern Web Guidance corrige ces lacunes et s'assure que votre workflow de codage assisté par l'IA dispose des outils nécessaires pour adopter en premier les nouvelles fonctionnalités de la plate-forme Web, tout en gardant à l'esprit les solutions de remplacement.

Que contient Modern Web Guidance ?

Modern Web Guidance inclut les bonnes pratiques pour plus de 100 cas d'utilisation de développement Web dans plusieurs disciplines de base. En interne, il s'agit d'une compétence d'agent qui indique à votre agent de codage comment appeler la modern-web-guidance CLI pour trouver et récupérer les meilleurs conseils pour votre cas d'utilisation.

Expérience utilisateur : transitions d'affichage, style CSS scrollbar-color et animations d'entrée et de sortie.
CSS : requêtes de conteneur, espaces de couleurs modernes tels que oklch, mise en page de sous-grille CSS, text-wrap et suppression de la hauteur de ligne de la typographie.
Performances : diagnostics Interaction to Next Paint (INP), scheduler.yield pour diviser les tâches longues, planification des tâches en arrière-plan et priorisation du chargement des images.
Formulaires : champs de saisie à dimensionnement automatique (field-sizing: content) et styles de validation précis avec :user-invalid.
Composants d'interface utilisateur intégrés : contrôle direct des boîtes de dialogue, positionnement des ancres CSS pour les info-bulles et popover.
Accessibilité : annonces d'erreur accessibles et gestion du focus clavier.
IA intégrée : utilisez des modèles clients locaux sur l'appareil (API de détection de la langue, de résumé et de traduction natives).
Clés d'accès : enregistrement, authentification et gestion des clés d'accès.

Voici quelques cas d'utilisation pour chaque discipline. Pour afficher tous les cas d'utilisation, consultez la liste complète des cas d'utilisation.

Référence

La référence permet aux développeurs de savoir clairement quelles fonctionnalités Web sont interopérables dans les principaux moteurs de navigateur. Si une fonctionnalité Web est une référence, vous pouvez faire confiance au niveau de compatibilité du navigateur. Les fonctionnalités Web appartiennent à l'une des trois catégories définies par la référence :

Disponibilité limitée signifie que la fonctionnalité n'est pas interopérable.
Nouvellement disponible signifie que la fonctionnalité est devenue interopérable au cours des 30 derniers mois.
Largement disponible signifie que la fonctionnalité est interopérable depuis au moins 30 mois.

Bien que la référence soit une définition de l'interopérabilité des fonctionnalités Web, elle constitue également un aspect configurable de votre projet. Vous pouvez choisir une cible de référence, puis configurer votre projet pour l'utiliser en l'ajoutant à votre AGENTS.md ou CLAUDE.md fichier, par exemple :

This project's Baseline target is Baseline 2024.

<other project info...>

Modern Web Guidance et solutions de remplacement des fonctionnalités

Modern Web Guidance utilise un large éventail de fonctionnalités Web modernes. Certaines d'entre elles peuvent être des références "Nouvellement disponibles" ou "Largement disponibles", mais d'autres peuvent être "Disponibilité limitée". Dans les cas où une fonctionnalité n'est pas largement disponible, les guides de cas d'utilisation fournissent aux agents des instructions spécifiques sur la façon de garantir une compatibilité plus large dans les navigateurs qui ne sont pas compatibles avec la fonctionnalité. Dans de nombreux cas, les solutions de remplacement sont implémentées en tant qu'améliorations progressives, où la fonctionnalité moderne peut être utilisée partout où elle est compatible. Si des polyfills sont nécessaires pour les navigateurs non compatibles, les agents sont toujours invités à les charger de manière conditionnelle afin qu'ils n'entraînent des coûts que lorsque cela est nécessaire.

Comment garantir la précision ?

Chaque cas d'utilisation dans Modern Web Guidance contient un ensemble d'évaluations qui sont calibrées en continu pour garantir un résultat de qualité.

Les évaluations de cas d'utilisation exécutent un harnais d'assurance qualité automatisé pour tester le comportement correct de l'agent, avec Playwright jouant un rôle central :

Pour chaque guide, un script Playwright est développé pour tester si les détails d'implémentation du guide ont été suivis. Par exemple, si @media (prefers-reduced-motion: reduce) a été observé là où il est requis.
Ces scripts Playwright sont calibrés en continu par rapport à une implémentation de démonstration de référence "correcte" qui attend un taux de réussite de 100 %. À l'autre extrémité, les scripts sont vérifiés par rapport à une implémentation délibérément défectueuse qui attend un taux de réussite de 0 %.
Si l'une des implémentations "correctes" et délibérément défectueuses, ou les deux, ne parviennent pas à produire des taux de réussite de 100% et 0 %, respectivement, un générateur réessaie automatiquement d'utiliser le contexte jusqu'à ce qu'un calibrage à 100% soit atteint.
Enfin, des évaluations de bout en bout sont appliquées à une application de base. L'une de ces évaluations n'est pas guidée, ce qui constitue un contrôle, à l'aide des données d'entraînement par défaut sans appeler Modern Web Guidance pour effectuer une tâche. Une autre évaluation (l'expérience) aborde la même tâche à l'aide de Modern Web Guidance.

Nos évaluations sont exécutées plusieurs fois par semaine avec des modèles et des agents de codage de pointe, ce qui nous donne une idée claire des performances des agents avec et sans nos conseils. En moyenne, les premiers résultats montrent une amélioration de 37 points de pourcentage dans le respect des bonnes pratiques modernes lorsque les agents sont équipés de Modern Web Guidance. Toutefois, vos résultats peuvent varier en fonction des exigences de votre projet, du modèle, des invites que vous écrivez et des outils de codage agentiques que vous préférez.

Étapes suivantes

Vous disposez maintenant d'une vue d'ensemble de Modern Web Guidance et de son potentiel pour faciliter l'adoption des bonnes pratiques Web modernes dans votre workflow de codage IA. Vous pouvez maintenant en savoir plus sur les disciplines et les cas d'utilisation fournis par Modern Web Guidance.