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 uses AI technology to translate content into your preferred language. AI translations can contain errors.

Premiers pas avec les conseils pour le Web moderne

Les conseils pour le Web moderne sont une compétence d'agent qui applique les bonnes pratiques modernes à votre workflow de codage assisté par l'IA. Il permet d'éviter que votre agent de codage utilise d'anciennes solutions de contournement pour résoudre les problèmes courants de développement Web, et de l'orienter plutôt vers des solutions qui devraient utiliser des fonctionnalités plus récentes de la plate-forme Web.

Installation

Les compétences de conseils pour le Web moderne peuvent être installées dans une grande variété d'agents, ce qui vous permet de conserver votre workflow préféré tout en bénéficiant des conseils qu'ils fournissent.

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 des compétences via la CLI modern-web-guidance permet de les maintenir automatiquement à jour. Vous pouvez l'installer à 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 utiliser les compétences Modern Web Guidance sans la CLI modern-web-guidance, lisez la suite pour découvrir comment les installer pour l'agent de votre choix.

Antigravity

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

Antigravity CLI

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 les compétences "Conseils pour le Web moderne" dans le Gestionnaire de compétences, disponible sous Paramètres > Assistant IA > Compétences. Sélectionnez une compétence pour ouvrir sa page d'informations. Pour installer la compétence, cliquez sur le bouton Install (Installer) pour 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

L'installation des conseils pour le Web moderne à utiliser avec Claude Code se déroule en trois étapes :

1. Ajoutez la place de marché :

/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

CLI Copilot

L'installation des conseils pour le Web moderne à utiliser avec Copilot se fait en deux étapes :

1. Ajoutez la place de marché :

/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

Explorer avant l'installation

Avant l'installation, évaluez la bibliothèque de guides de compétences Modern Web Guidance 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'affichera 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 le 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 les autres cas d'utilisation, remplacez animate-to-from-top-layer par n'importe quel ID de cas d'utilisation valide.

Pourquoi utiliser les conseils pour le Web moderne ?

Les compétences de guidance Web moderne offrent un avantage aux développeurs Web par rapport aux modèles d'IA non assistés pour trois raisons distinctes :

Les agents de codage IA ont tendance à utiliser par défaut des solutions anciennes et obsolètes pour 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'étaient pas au courant des dernières fonctionnalités de la plate-forme Web ou disposaient d'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, au lieu d'adapter les conseils aux exigences de Baseline d'un projet donné.

Les compétences liées aux conseils pour le Web moderne comblent ces lacunes et veillent à ce 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, en gardant à l'esprit les solutions de repli.

Que contient le guide Modern Web Guidance ?

Les conseils pour le Web moderne incluent les bonnes pratiques pour plus de 100 cas d'utilisation de développement Web dans plusieurs disciplines clés. En coulisses, il s'agit d'une compétence d'agent unique qui indique à votre agent de codage comment appeler la CLI modern-web-guidance pour trouver et récupérer les meilleurs conseils pour votre cas d'utilisation.

Expérience utilisateur : affichez les transitions de vue, le style CSS scrollbar-color et les animations d'entrée et de sortie.
CSS : requêtes de conteneur, espaces colorimétriques modernes tels que oklch, mise en page CSS en sous-grille, text-wrap et suppression des marges supérieures et inférieures de la typographie.
Performances : diagnostics Interaction to Next Paint (INP), scheduler.yield pour fractionner 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'UI 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 de la sélection au clavier.
IA intégrée : utilisez des modèles clients locaux sur l'appareil (API natives de détection de la langue, de synthèse et de traduction).
Clés d'accès : enregistrement, authentification et gestion des clés d'accès.

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

Référence

Baseline 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 de base, vous pouvez faire confiance au niveau de compatibilité du navigateur. Les fonctionnalités Web appartiennent à l'une des trois catégories définies par Baseline :

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 Baseline soit une définition de l'interopérabilité des fonctionnalités Web, il s'agit également d'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 fichier AGENTS.md ou CLAUDE.md, par exemple :

This project's Baseline target is Baseline 2024.

<other project info...>

Conseils pour le Web moderne et solutions de remplacement des fonctionnalités

Les conseils pour le Web moderne utilisent un large éventail de fonctionnalités Web modernes. Certaines d'entre elles peuvent être disponibles dans la configuration de base, ou être largement disponibles, mais d'autres peuvent être disponibles de manière limitée. Dans les cas où une fonctionnalité n'est pas largement disponible, les guides d'utilisation fournissent aux agents des instructions spécifiques sur la façon d'assurer une compatibilité plus large dans les navigateurs qui ne prennent pas en charge 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 prise en charge. Si un polyfill est nécessaire pour les navigateurs non compatibles, les agents sont toujours invités à les charger de manière conditionnelle afin de n'engendrer des coûts que lorsque cela est nécessaire.

Comment la précision est-elle assurée ?

Chaque cas d'utilisation dans les conseils pour le Web moderne contient un guide. La plupart des cas d'utilisation sont calibrés en continu pour orienter les agents d'IA vers des résultats de qualité.

Les cas d'utilisation calibrés utilisent un harnais de contrôle qualité automatisé pour tester le comportement correct de l'agent, avec Playwright qui joue un rôle central :

Pour chaque guide, un script Playwright est développé afin de 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 bout, les scripts effectuent une vérification par rapport à une implémentation délibérément défectueuse qui s'attend à un taux de réussite de 0 %.
Si l'une ou l'autre des implémentations "correctes" et délibérément défectueuses ne parviennent pas à produire des taux de réussite de 100% et 0 %, respectivement, un générateur effectue automatiquement une nouvelle tentative en utilisant le contexte jusqu'à ce qu'une calibration à 100% soit atteinte.
Enfin, des évaluations de bout en bout sont appliquées à une application de base. L'une de ces évaluations est non guidée (il s'agit d'un contrôle) et utilise les données d'entraînement par défaut sans faire appel aux compétences de Modern Web Guidance pour accomplir une tâche. Une autre évaluation (l'expérience) aborde la même tâche en utilisant les compétences de conseils Web modernes.

Nos évaluations sont exécutées quotidiennement avec des modèles et des agents de codage de pointe. Elles nous permettent de comprendre clairement les performances des agents avec et sans nos conseils. En moyenne, les premiers résultats montrent une amélioration de 37 points de pourcentage du 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, de votre modèle, des requêtes que vous rédigez et de vos outils de programmation agentiques préférés.

Étapes suivantes

Vous avez maintenant une vue d'ensemble de Modern Web Guidance et de son potentiel pour faciliter l'adoption des bonnes pratiques du Web moderne dans votre workflow de codage d'IA. Vous pouvez désormais explorer les compétences et les cas d'utilisation fournis par les conseils sur le Web moderne.