Guides Modern Web Guidance

Améliorer la visibilité de la barre de défilement pour les utilisateurs qui préfèrent les interfaces à contraste élevé

Appliquez des effets visuels personnalisés avec des nuanceurs WebGL au contenu HTML.

Conseils sur les couleurs pour le Web, y compris les exigences de contraste, les jeux de couleurs clairs et sombres, le mode Couleurs forcées et la génération de teintes et de nuances à partir d'une couleur de base.

Découpez des éléments et leur contenu selon n'importe quelle forme libre, comme un symbole, un coup de pinceau ou une texture organique, pour des designs plus expressifs.

Ajoutez des décorations de texte telles que des soulignements, des surlignements, des barrés ou des formes entièrement personnalisées, avec des animations d'affichage, des décalages et des encarts de fin personnalisés, ainsi qu'un saut d'encre flexible.

Personnaliser la couleur ou l'épaisseur d'une barre de défilement

Implémentez la prise en charge du mode sombre de manière à respecter la préférence de l'utilisateur pour le thème clair ou sombre et à adapter l'interface utilisateur du navigateur (par exemple, les barres de défilement, les commandes de formulaire, etc.).

Intégrez des éléments HTML interactifs dans une scène 3D.

Sélectionnez une couleur de texte lisible avec un contraste suffisant sur une couleur d'arrière-plan dynamique.

Faites en sorte que chaque ligne d'un titre ou d'un bloc de texte multiligne ait la même largeur, comme dans une typographie de style affiche ou de titres empilés. Contrairement au texte justifié, le texte lui-même est dimensionné en fonction de la largeur, plutôt que d'étirer l'espacement.

Capturez et exportez du contenu HTML dynamique sous forme d'images ou d'images vidéo à partir de Canvas.

Exposez le contenu affiché dans un canevas aux fonctionnalités du navigateur telles que les technologies d'assistance, la traduction ou le mode Lecture.

Améliorez la mise en page et la lisibilité des contenus textuels courts et autonomes, tels que les titres ne dépassant pas quelques lignes, en permettant au navigateur d'appliquer des sauts de ligne équilibrés lors du retour à la ligne.

Obtenez un alignement vertical précis avec du texte de n'importe quelle police. Par exemple, un espacement visuel exactement égal au-dessus et en dessous du texte, ou un alignement parfait du texte avec les icônes ou les images adjacentes.

Combinez plusieurs formes pour créer des découpes complexes ou des effets de "défonce" dans des éléments, par exemple en ajoutant une encoche à un élément.

Appliquez un dégradé de transparence aux bords du contenu pour indiquer d'autres zones de défilement ou pour masquer le texte soumis à un paywall.

Appliquez un thème à l'UI générée par le navigateur, comme la sélection de texte, les barres de défilement, les commandes de formulaire et les sélecteurs, avec CSS au lieu de la recréer avec des éléments personnalisés.

Bonnes pratiques de typographie pour le Web, y compris les unités de taille de police, la hauteur de ligne, le retour automatique à la ligne et l'équilibrage du texte, ainsi que la typographie fluide qui s'adapte à la fenêtre d'affichage.

Effets visuels avec CSS, tels que les ombres superposées, les modes de fusion, les dégradés avec interpolation de couleur prévisible et les motifs tels que les rayures, les damiers, les points et les graphiques à secteurs créés uniquement à partir de dégradés.

Définissez des styles de police de sorte que le texte reste lisible et visuellement cohérent en cas de remplacement de la police préférée par l'une des polices de remplacement (ou inversement).

Définissez des styles de police de manière à ce que le texte reste lisible et visuellement cohérent lorsque plusieurs polices sont utilisées pour afficher un même bloc de texte.

Appliquez des motifs de texture et d'altération réalistes aux éléments pour leur donner un aspect organique, vieilli ou de matériau physique.

Créez une barre de progression du défilement, un outil de suivi de la progression par étapes ou tout autre élément visuel indiquant à l'utilisateur jusqu'où il a fait défiler une page ou une section.

Créez un carrousel de diapositives avec des images ou d'autres éléments visuels, où chaque diapositive s'anime lorsqu'elle entre, se centre ou sort de son défilement. Par exemple, les diapositives peuvent apparaître ou disparaître en fondu, pivoter, s'agrandir ou se réduire, etc.

Forcer certains éléments à s'afficher en mode clair ou sombre (par exemple, les blocs de code, les lecteurs multimédias, etc.) indépendamment du jeu de couleurs de la page.

Créez des info-bulles et des popovers avec des flèches directionnelles (ou d'autres styles visuels) qui pointent automatiquement dans la bonne direction lorsque l'élément passe à une position de remplacement.

Créez une fonctionnalité de balayage vers le bas qui permet à l'utilisateur de balayer l'écran vers le bas pour afficher plus de contenu, comme une barre de recherche.

Créez un tableau de données qui présente des données tabulaires avec une sémantique d'en-tête appropriée, et qui reste lisible et navigable sur les petits écrans et avec les technologies d'assistance.

Créez des boutons ou des widgets flottants (retour en haut, défilement vers le bas, lanceurs de chat, etc.) qui s'affichent et disparaissent selon que l'utilisateur a fait défiler la page ou non.

Créez des superpositions d'ombres de défilement, des dégradés ou des indicateurs de flèche directionnelle qui n'apparaissent que lorsqu'il y a plus de contenu à faire défiler dans cette direction.

Animez de manière fluide un en-tête fixe ou une couverture pleine page lors du défilement pour réduire dynamiquement sa taille, ajouter des ombres et transformer sa mise en page sur une distance de défilement prédéfinie.

Créez des en-têtes de section ou des barres de navigation fixes qui se transforment visuellement lorsqu'ils sont "bloqués" en haut, en changeant de jeu de couleurs ou en ajoutant une ombre.

Affichez et gérez des icônes qui peuvent être définies et paramétrées à partir de CSS, qui se chargent rapidement, qui sont nettes quelle que soit la résolution et qui sont correctement exposées aux technologies d'assistance (ou masquées).

Positionnez les menus déroulants, les menus contextuels ou les panneaux d'actions contextuelles associés à un bouton de déclenchement de manière à ce qu'ils inversent automatiquement les axes aux bords de la fenêtre d'affichage au lieu d'être coupés.

Créez un composant de fiche qui adapte sa présentation à l'espace et au contenu disponibles.

Créez un composant de menu qui affiche une liste d'options ou d'actions, avec prise en charge des sous-menus imbriqués.

Mettre en surbrillance la section actuellement visible d'une page dans un menu de navigation

Créez une barre de progression stylisée qui indique la fin d'une tâche ou d'un processus, dans des états déterminés et indéterminés.

Créez un composant de fiche informative qui affiche un aperçu structuré interactif de la page vers laquelle un certain type de lien (par exemple, un profil utilisateur) redirige lorsque l'utilisateur pointe dessus.

Créez des tutoriels d'intégration persistants à l'aide de superpositions natives ancrées qui restent ouvertes pendant l'interaction de l'utilisateur.

Créez des notifications toast et en superposition non intrusives pour les messages persistants et empilables, et la communication d'état.

Créez un composant d'activation/de désactivation du mode sombre qui permet aux utilisateurs de remplacer les préférences de jeu de couleurs de leur système pour le site actuel.

Créez un composant de boîte de dialogue modal ou non modal qui est accessible, gère correctement la sélection et peut être fermé comme les utilisateurs s'y attendent sur chaque plate-forme.

Créez une icône de chargement qui indique l'état d'activité à tous les utilisateurs, respecte les préférences de réduction des animations et s'anime efficacement.

Créez un composant de panneau de navigation qui, lorsqu'il est déclenché à partir d'un bouton de menu, glisse depuis le côté pour se superposer au contenu de la page existante, et glisse vers l'extérieur lorsqu'il est fermé (en balayant l'écran, en appuyant à l'extérieur ou en appuyant sur Échap).

Créez un composant de cercle de progression qui représente visuellement l'état d'avancement d'une tâche ou d'un processus, avec la possibilité d'ajouter du contenu au centre et un style cohérent avec la marque.

Créez une navigation hiérarchique en plein écran qui permet aux utilisateurs d'accéder à des vues imbriquées et de balayer l'écran ou de revenir en arrière, tout en synchronisant l'historique de navigation.

Stylisez les cases à cocher, y compris les icônes personnalisées, la mise en page, les couleurs et les animations de cochage/décochage, tout en préservant les fonctionnalités et l'accessibilité natives.

Créez des effets de fondu, de mise à l'échelle ou d'autres effets de révélation complexes sur les éléments lorsqu'ils entrent et sortent de la zone de défilement (ou de la fenêtre d'affichage) pendant que l'utilisateur fait défiler la page.

Effectuez une transition fluide d'un élément entre deux positions d'éléments cibles. Par exemple, déplacer le soulignement d'un onglet sélectionné entre l'onglet précédemment sélectionné et l'onglet actuellement sélectionné.

Masquez/Affichez facilement des éléments lorsqu'ils sont ajoutés/supprimés du DOM ou lorsque leurs valeurs d'affichage sont activées/désactivées.

Animez des éléments tels que des boîtes de dialogue, des popovers et des info-bulles lorsqu'ils entrent ou sortent de la couche supérieure.

Permettre de faire glisser un élément flottant pour le déplacer sur la page.

Créez des effets basés sur le défilement (comme la parallaxe) où les couches de premier plan et d'arrière-plan se déplacent à des vitesses différentes, créant une impression de profondeur lorsque l'utilisateur fait défiler la page.

Mettez en évidence visuellement l'élément non interactif actuellement ancré dans les carrousels, les galeries ou les expériences de balayage en plein écran avec défilement scroll-snap. Par exemple, développer une carte lorsqu'elle est ancrée ou afficher du contenu masqué.

Assurez-vous que l'état critique de la page est chargé et stable avant de lancer une transition de vue entre documents. Cela signifie que les styles CSS critiques sont chargés et appliqués, que le code JavaScript critique est chargé et exécuté, et que le code HTML visible pour la vue initiale de la page par l'utilisateur a été analysé avant l'exécution de la transition.

Échelonnez le timing de l'animation ou de la transition entre les éléments frères afin que chacun démarre après un délai calculé en fonction de sa position dans la liste des éléments frères.

Créez des transitions fluides et transparentes entre les navigations sur une page entière, telles que des fondus enchaînés, des effets de révélation personnalisés ou la transformation du contenu d'une page à l'autre.

Connectez de manière déclarative un bouton à n'importe quel élément pour déclencher des actions personnalisées spécifiques à l'application à l'aide de commandes de bouton déclaratives, de commandes d'appel, de commandes de bouton, de commandes personnalisées ou d'actions d'activation/désactivation déclaratives.

Activez ou désactivez la visibilité d'une boîte de dialogue ou d'un popover à partir d'un bouton sans écrire de code JavaScript.

Animez les changements d'état visuel pour refléter la direction du flux de navigation d'un utilisateur, par exemple en faisant glisser un nouveau contenu depuis la droite lorsque l'utilisateur avance ou depuis la gauche lorsqu'il revient à un écran précédent.

Effectuez une transition simultanée d'un groupe d'éléments similaires en utilisant la même logique de transition, par exemple en supprimant un produit d'un panier et en animant tous les autres produits pour les placer dans leurs nouvelles positions.

Mettez en surbrillance des plages de texte arbitraires sur une page, telles que des résultats de recherche, des fautes d'orthographe ou des curseurs de modification collaborative.

Créez des effets de révélation interactifs, comme un projecteur qui suit le pointeur de l'utilisateur pour révéler des détails dans une image ou une section de l'interface utilisateur.

Affichez un aperçu en direct de l'effet d'un bouton lorsqu'un utilisateur manifeste de l'intérêt (par exemple, en pointant, en sélectionnant ou en appuyant de manière prolongée), mais avant qu'il ne clique.

Créez une boîte de dialogue modale qui peut être fermée par un clic ou une pression en dehors de la boîte de dialogue.

Animez l'UI avec des transitions CSS, des animations, des animations déclenchées par le défilement et des transitions de vue, tout en conservant le mouvement sur le compositeur et en respectant les préférences de réduction des animations.

Déplacez ou changez le parent d'un élément DOM sans perdre l'état d'un élément important, comme les états d'interactivité (:focus/:active), l'état de chargement de <iframe>, l'état d'animation/de transition, etc.

Maintenez une boîte de dialogue modale, un élément plein écran ou un popover natif visiblement ouvert et fonctionnellement actif lorsque son nœud DOM sous-jacent est déplacé ou reparenté dans le DOM.

Créez des effets d'animation et de transition personnalisés basés sur la physique, comme le rebond et le ressort, qui semblent plus naturels et attrayants que les courbes d'accélération traditionnelles.

Créez une boîte de dialogue modale qui peut être fermée via des actions utilisateur standards spécifiques à la plate-forme, comme appuyer sur la touche Esc sur les plates-formes de bureau, ou un geste "Retour" ou "Ignorer" sur les plates-formes mobiles.

Empêcher le défilement de la page sous-jacente lorsqu'une boîte de dialogue modale est ouverte.

Connectez visuellement les éléments persistants entre différents états de page ou navigations dans une application monopage (par exemple, en agrandissant une miniature de produit en une image héros pleine page) en modifiant de manière fluide leur taille, leur position ou d'autres propriétés de style.

Animez les changements d'état dans un seul composant (une fiche, une liste, un panneau ou un autre sous-arbre) pendant que le reste de la page reste interactif et que d'autres transitions s'exécutent simultanément.

Fournissez un retour visuel en temps réel dans les éléments d'interface utilisateur associés pendant qu'un utilisateur fait défiler du contenu aligné sur l'alignement, avant que le geste de défilement ne soit terminé.

Synchronisez les indicateurs de navigation, les panneaux de contenu associés et le suivi analytique avec l'élément ancré actif dans un conteneur à faire défiler.

Animez les propriétés visuelles d'un élément cible (par exemple, en estompant un arrière-plan, en modifiant une couleur d'arrière-plan ou en créant des expériences de scrollytelling) entièrement en fonction de la position de la fenêtre de défilement d'un élément complètement différent.

Masquez le contenu à l'aide de modèles tels que des accordéons, des onglets et des sections "En savoir plus", tout en vous assurant que le texte masqué s'affiche lors des recherches natives "Rechercher sur la page", qu'il permet l'indexation par les moteurs de recherche, qu'il accepte les liens profonds de fragments d'URL et qu'il maintient l'accessibilité ARIA.

Créez une liste d'éléments à faire défiler (par exemple, un carrousel d'images ou un fil de discussion) qui peut être affichée avec un élément particulier visible lors de l'affichage initial.

Affichez une info-bulle ou des informations supplémentaires lorsqu'un utilisateur pointe sur un élément interactif, le sélectionne ou appuie de manière prolongée dessus, sans qu'il ait besoin de cliquer.

Implémenter une navigation spatiale accessible à l'aide des touches fléchées qui fonctionne correctement dans différents modes de mise en page (grille, etc.)

Permettez aux utilisateurs d'effectuer des actions sur les éléments d'une liste (supprimer, archiver, marquer comme lu, etc.) en balayant l'écran horizontalement. Ils peuvent ainsi traiter rapidement les entrées sans avoir à appuyer sur une commande distincte.

Permettez aux utilisateurs de balayer horizontalement un élément de liste ou un volet de contenu pour afficher des boutons d'action contextuels ou un menu latéral sans déclencher automatiquement une action.

Déclenchez des effets visuels, des animations ou des changements de focus sur un élément cible uniquement après la fin d'un défilement programmatique fluide vers cet élément.

Permettez aux utilisateurs de faire défiler librement des surfaces bidimensionnelles (comme des cartes, des images zoomées, des canevas infinis ou de grandes grilles de données) dans les deux directions (en diagonale ou en changeant de direction en cours de geste) sans que le geste ne se limite à un seul axe horizontal ou vertical.

Créez un composant de sélection personnalisé dont le menu déroulant est animé. Par exemple, le menu apparaît en fondu ou en glissant, ou les options s'animent lors de la sélection.

Adaptez les cases à cocher, les cases d'option, les curseurs de plage et les barres de progression à la palette de couleurs de votre site sans les remplacer par des composants personnalisés.

Stylisez un curseur de plage natif avec des états de piste, de curseur, de remplissage et de sélection personnalisés, tout en préservant les fonctionnalités et l'accessibilité natives.

Créez des éléments de sélection personnalisés dont le bouton, le sélecteur, l'icône de flèche et la coche correspondent parfaitement à la typographie, aux couleurs, à l'espacement et aux bordures de votre marque ou de votre système de conception.

Créez un formulaire de paiement qui collecte les informations de carte avec des valeurs de saisie semi-automatique correctes et la prise en charge de la saisie automatique.

Créez un formulaire de connexion avec des valeurs de saisie semi-automatique correctes et la prise en charge de la saisie automatique.

Créez un formulaire d'inscription avec des valeurs de saisie semi-automatique correctes et la prise en charge de la saisie automatique.

Créez un bouton bascule accessible avec l'attribut HTML natif "switch", en utilisant une case à cocher stylisée comme solution de secours lorsqu'il n'est pas compatible.

Créez un formulaire d'adresse avec les attributs de saisie semi-automatique appropriés et la prise en charge de la saisie automatique.

Créez des sélecteurs personnalisés dont les options sont positionnées de manière unique ou intéressante, plutôt que la liste d'options empilée traditionnelle.

Autorisez les champs de formulaire à s'agrandir et à se réduire pour s'adapter à la saisie de l'utilisateur, par exemple lorsque l'utilisateur saisit du texte ou sélectionne une autre option. Appliquez des limites de taille maximale et minimale pour créer des champs de formulaire dynamiques et responsifs qui s'adaptent à la conception de la page.

Bonnes pratiques pour créer des formulaires Web accessibles, sécurisés et conviviaux. Utilisez ce guide lorsque vous créez ou modifiez des formulaires, des entrées et des flux d'envoi.

Utilisez CSS pour mettre en évidence les champs de formulaire qui ont été remplis automatiquement par le navigateur et qui n'ont pas été modifiés par l'utilisateur.

Implémentez la fonctionnalité "Appuyer sur Entrée pour envoyer" dans les zones de texte et les champs de saisie sur une seule ligne (chat, recherche, renommage intégré) de manière sécurisée pour les utilisateurs d'IME (éditeur de méthode de saisie) afin d'éviter l'envoi de texte incomplet.

Fournissez un message d'erreur pour les champs de formulaire obligatoires qui ont été ignorés ou laissés vides uniquement après l'interaction de l'utilisateur, afin d'éviter les erreurs préventives et de vous assurer que les commentaires sont opportuns et pertinents par rapport au parcours de l'utilisateur.

Créez un composant de sélection personnalisé dont les options peuvent contenir une mise en forme HTML complexe (par exemple, des images, des icônes et d'autres mises en forme enrichies) plutôt que du texte brut.

Vérifiez qu'une option autre que celle par défaut a été choisie dans un menu de sélection uniquement après que l'utilisateur a interagi avec la commande.

Validez les numéros de téléphone des utilisateurs et les codes secrets à usage unique envoyés par SMS grâce à l'extraction automatique du code et à la saisie de formulaire accessible.

Affichez les commentaires de validation des champs de formulaire (par exemple, les exigences de complexité du mot de passe ou de format d'adresse e-mail) uniquement après que l'utilisateur a terminé son interaction initiale, afin d'éviter les erreurs prématurées lors du chargement de page ou pendant que l'utilisateur saisit du texte.

Rendez les éléments personnalisés accessibles par défaut, en définissant les rôles et l'état ARIA via le mixin ARIA ElementInternals, en gérant le focus avec delegatesFocus et en conservant les relations ARIA dans une seule racine shadow.

Définir, enregistrer et gérer le cycle de vie des éléments personnalisés autonomes, y compris les règles de constructeur, les rappels de cycle de vie, le calendrier de mise à niveau, la réflexion des attributs/propriétés et les conventions d'attribution de noms.

Faites en sorte qu'un contrôle personnalisé participe de manière native aux formulaires avec formAssociated et ElementInternals, en envoyant sa propre valeur, en s'intégrant à la validation des contraintes et en réagissant à la réinitialisation, à la désactivation et à la restauration de l'état.

Consignes orientées action pour l'architecture HTML moderne, la sémantique, les API interactives natives (Dialog, Popover, Details), la gestion du focus et la priorisation des ressources. Utilisez ce guide pour structurer des documents Web, implémenter des superpositions natives ou optimiser l'ordre de chargement des ressources.

Effectuez le rendu côté serveur d'un élément personnalisé, puis hydratez-le sur place sans nouveau rendu ni flash de contenu sans style.

Encapsulez le DOM et les styles d'un composant avec le Shadow DOM, construisez l'arborescence efficacement avec des modèles HTML et projetez le contenu utilisateur avec des slots.

Appliquez des styles au-delà de la limite du shadow DOM avec les sélecteurs :host, les propriétés héritées et personnalisées pour les thèmes, ::slotted et ::part, ainsi que les couches en cascade et les requêtes de conteneur dans les composants.

Principes d'orientation et transversaux pour la création et l'utilisation de composants Web, couvrant les éléments personnalisés, le Shadow DOM, les modèles et les emplacements, le Shadow DOM déclaratif, l'application de styles au-delà de la limite du Shadow DOM, les éléments personnalisés associés à un formulaire et les exigences d'accessibilité. Utilisez ce guide lorsque vous créez des composants d'interface utilisateur réutilisables, des systèmes de conception ou des éléments personnalisés affichés par le serveur.

Animez de manière fluide les composants interactifs (comme les accordéons, les menus et les fiches extensibles) vers et depuis leurs dimensions naturelles.

Calculez la taille d'un élément en fonction de sa taille intrinsèque, tout en vous assurant qu'il respecte les contraintes de conception données.

Créez un composant qui modifie son style en fonction de l'état de l'un de ses éléments enfants. Par exemple, un composant qui s'affiche en mode clair ou mode sombre selon qu'un bouton d'activation/désactivation du thème est coché ou non.

Appliquez de manière conditionnelle certaines règles ou déclarations CSS uniquement si une certaine règle @ est compatible avec le navigateur.

Créez un composant qui modifie sa mise en page selon qu'il contient ou non des éléments enfants spécifiques. Par exemple, si le composant contient une image, utilisez une mise en page multicolonne. Sinon, utilisez par défaut une mise en page en une seule colonne.

Mises en page CSS modernes telles que flexbox, grid, subgrid, les requêtes de conteneur, le positionnement des ancres et le dimensionnement intrinsèque. Utilisez cette compétence lors de la conception de composants d'interface utilisateur ou de mises en page responsives.

Consignes pratiques pour l'architecture CSS moderne, y compris la cascade, les sélecteurs, la portée, l'imbrication et les jetons de conception. Utilisez ce guide lorsque vous créez des styles ou gérez des systèmes de conception.

Définissez des jetons de conception d'ordre supérieur, comme les modes de densité (compact, normal, spacieux) ou les thèmes, et faites en sorte que les composants descendants réagissent directement aux modifications et de manière appropriée.

Ajustez de manière fluide les éléments tels que la taille de la police, l'espacement et la taille des contenus multimédias en fonction de la taille du conteneur parent, plutôt que d'utiliser des points d'arrêt fixes.

Animez ou remplacez des propriétés de transformation CSS individuelles (par exemple, translate, rotate, scale) indépendamment des autres propriétés de transformation sur un même élément.

Ajustez la limite de rognage visible d'un élément pour l'aligner sur le bord du contenu, le bord de la marge intérieure ou le bord de la bordure, ou sur un décalage spécifié par rapport à l'un de ces éléments. Vous bénéficiez ainsi d'un contrôle plus précis sur la façon dont le contenu est rogné.

Réduisez la répétition excessive des styles en encapsulant une logique de style complexe ou dynamique dans des fonctions réutilisables (par exemple, une fonction qui calcule un dégradé en fonction d'un ensemble de paramètres d'entrée).

Créez une UI qui s'adapte à la taille du conteneur et de la fenêtre d'affichage, y compris les requêtes de conteneur, les unités de fenêtre d'affichage dynamiques, les formats et la typographie responsive.

Ciblez des éléments en fonction de l'intersection ou de l'union de sélecteurs et de règles @ conditionnelles, tout en minimisant les répétitions.

Créez des composants qui adaptent la logique visuelle en fonction du contexte sémantique à l'aide de requêtes de style de conteneur CSS.

Créez un composant dont les styles peuvent dépendre de manière conditionnelle de sa propre largeur ou hauteur, plutôt que de la largeur ou de la hauteur de la fenêtre d'affichage. Par exemple, un composant de fiche peut modifier sa mise en page en fonction de sa taille, ou un bouton d'incitation à l'action peut afficher un texte d'aide de manière conditionnelle en fonction de sa largeur.

Appliquez un style aux éléments parents d'un champ de formulaire (par exemple, les libellés ou les fieldsets) lorsque le champ n'est pas valide.

Créez des spectres visuels dynamiques ou des dispositions qui s'adaptent automatiquement au nombre d'éléments d'un groupe.

Calculez le temps écoulé ou restant entre des dates et des heures, équilibrez les unités de durée et mettez en forme des durées localisées lisibles par l'humain à l'aide de Temporal.Duration et Intl.DurationFormat.

Modélisez des dates de calendrier, des heures, des dates partielles (anniversaires récurrents, dates d'expiration de cartes de crédit) et des intervalles mensuels récurrents indépendants de l'emplacement, sans dérive de fuseau horaire, à l'aide des types Temporal Plain.

Planifiez des réunions ou des événements futurs en les associant explicitement à un fuseau horaire géographique de l'IANA. Ainsi, les horaires des événements resteront exacts, quels que soient les changements d'heure d'été, les heures "sautées" ou "répétées" lors des changements d'heure.

Analysez, triez et mesurez les intervalles entre les codes temporels ISO 8601 inférieurs à la milliseconde ou à la nanoseconde sans collisions de troncature de date à l'aide de Temporal.Instant.

Affichez et calculez avec précision les dates dans des systèmes de calendrier non grégoriens (par exemple, islamique, hébraïque ou chinois) pour les utilisateurs internationaux.

Compiler du code C/C++ en WebAssembly à l'aide d'Emscripten

Divisez les traitements synchrones lourds (calculs complexes et/ou boucles longues) ou les mises à jour du DOM pour permettre au navigateur de gérer les entrées utilisateur et de repeindre l'écran.

Calculez le temps total qu'un utilisateur a réellement passé à consulter une page, à l'exclusion des périodes où l'onglet était en arrière-plan.

Charger ou initialiser de manière conditionnelle des dépendances asynchrones (par exemple, en important des polyfills pour les fonctionnalités Web manquantes) sans nécessiter d'orchestration complexe entre toutes les dépendances de script d'une page.

Regroupez plusieurs événements d'analyse, de télémétrie et Core Web Vitals dans une seule balise pour minimiser la contention réseau et réduire la charge du serveur, tout en fournissant des mises à jour en temps réel.

Réduisez les délais d'affichage des pages Web riches en contenu (par exemple, les pages comportant de longs flux, de nombreux articles ou des tableaux de bord complexes) en différant l'affichage de tout contenu qui n'est pas immédiatement visible par l'utilisateur.

Différez les opérations coûteuses telles que les mises à jour du DOM, la récupération de données, le suivi analytique ou le recalcul de la mise en page jusqu'à la fin du défilement pour maintenir des performances de défilement fluides.

Fournissez des images décoratives optimisées (comme des arrière-plans, des icônes d'interface utilisateur ou des masques complexes) en proposant simultanément des formats d'image de nouvelle génération (comme AVIF ou WebP) et plusieurs densités de pixels (comme 1x et 2x). Le navigateur pourra ainsi négocier de manière dynamique la meilleure combinaison de taille de fichier et de qualité visuelle en fonction des capacités de l'appareil de l'utilisateur.

Définissez une priorité plus faible pour les récupérations de données en arrière-plan effectuées avec l'API Fetch afin d'éviter les conflits réseau avec les requêtes initiées par l'utilisateur.

Déterminez de manière fiable si une page a été initialement chargée en arrière-plan, même si le script est chargé de manière asynchrone après que l'utilisateur a mis la page au premier plan.

Préservez les ressources système et l'autonomie de la batterie en mettant en pause l'exécution de JavaScript en arrière-plan (comme les animations <canvas>, l'affichage WebGL ou l'interrogation de données WebSocket à haute fréquence) lorsque le composant est hors de l'écran, puis reprenez-la juste à temps lorsqu'il revient dans la vue.

Accélérez les transitions vers les vues précédemment consultées dans une application monopage (SPA) en préservant leur état DOM structurel au lieu de les détruire et de les recréer à chaque navigation.

Diffuser et afficher des tests A/B, des tests multivariables ou d'autres tests à l'aide de JavaScript côté client pour modifier ou injecter du code HTML, CSS et JavaScript sans que le contenu d'origine ne s'affiche d'abord avant de clignoter ou de scintiller pour afficher le contenu du test.

Identifiez les scripts JavaScript lents et les autres causes d'une mauvaise réactivité de l'INP (Interaction to Next Paint).

Identifier les scripts les plus responsables des frames d'animation longs

Améliorez les performances de chargement des pages en préchargeant ou en prérendant les pages que l'utilisateur est susceptible de consulter ensuite.

Différez le téléchargement des éléments vidéo et audio hors écran, y compris les images poster vidéo et les données multimédias préchargées, jusqu'à ce que le lecteur multimédia s'approche de la fenêtre d'affichage afin d'économiser de la bande passante et de réduire la contention réseau lors du chargement de page initial.

Mesurez le temps nécessaire aux interactions utilisateur et aux navigations côté client pour afficher de nouvelles mises à jour de contenu à l'écran.

Optimisez la priorité de chargement des images candidates au Largest Contentful Paint (LCP) et dépriorisez les images non critiques pour réduire les délais de chargement des ressources critiques.

Optimisez la priorité relative du contenu préchargé pour réduire les délais de chargement des ressources critiques.

Optimisez la priorité de chargement des scripts en boostant les scripts asynchrones critiques et en dépriorisant les scripts non essentiels ou situés en fin de corps pour améliorer le séquençage et réduire les délais.

Rendez les interactions plus rapides et plus réactives (en réduisant les scores Interaction to Next Paint (INP)) en évitant de recalculer la mise en page dans les mises en page complexes, comme les tableaux de bord contenant beaucoup de données ou les grilles de type feuille de calcul.

Mettez à jour une page de manière déclarative avec du contenu diffusé ultérieurement dans le même document HTML ou via des API JavaScript impératives.

Consignes pratiques pour optimiser les applications Web modernes. Utilisez ce guide pour auditer les performances, optimiser les métriques de chargement, corriger les interactions lentes et optimiser les Core Web Vitals (LCP, INP, CLS).

Suivez de manière fiable les données analytiques, les métriques Core Web Vitals, les erreurs et les données de télémétrie tout au long de la visite de l'utilisateur sur la page, et différez l'envoi des données jusqu'à ce que l'utilisateur quitte la page.

Utilisez des images optimisées pour la résolution dans les pseudo-éléments CSS (comme ::before et ::after) afin de réduire le nombre de nœuds DOM.

Planifiez des tâches avec différentes priorités pour vous assurer que les tâches critiques sont exécutées en premier, tandis que les tâches en arrière-plan sont différées.

Consignes de codage pratiques pour créer des applications Web accessibles, couvrant le HTML sémantique, la gestion du focus, les formulaires, les contenus multimédias et les tests. Utilisez cette compétence lors de l'audit ou de l'implémentation de fonctionnalités d'accessibilité, de la navigation au clavier ou d'ARIA.

Synchronisez les états d'accessibilité programmatiques (comme aria-invalid) avec l'état visuel :user-invalid pour vous assurer que les utilisateurs de lecteurs d'écran ne reçoivent des commentaires d'erreur qu'après l'interaction, ce qui reflète l'expérience visuelle.

Utilisez du contenu généré par CSS (::before/::after) de manière à ce qu'il reste accessible, y compris du texte alternatif pour le contenu décoratif.

Respectez les préférences de mise à l'échelle du texte du système d'exploitation pour une page afin que la taille des polices, la mise en page et les mesures basées sur les rem suivent les paramètres d'accessibilité de l'utilisateur.

Comparez et validez les origines Web et les sites de manière sécurisée dans les messages et les URL interdocuments, sans analyse de chaîne sujette aux erreurs.

Établissez des secrets partagés à l'aide de l'encapsulation de clé publique ou de l'accord de clé (y compris la protection hybride et post-quantique), et chiffrez les données sensibles dans le navigateur avec un chiffrement authentifié.

Accédez aux ressources du réseau local ou de l'interface de rebouclage d'un utilisateur à partir d'une application Web publique.

Authentifier un utilisateur connu avec une clé d'accès pour la connexion principale.

Enregistrez silencieusement une clé d'accès pour un utilisateur existant après une connexion réussie par mot de passe.

Autorisez les utilisateurs à afficher et à gérer les clés d'accès enregistrées dans leur compte.

Validez l'identité d'un utilisateur connecté à l'aide de ses clés d'accès existantes avant d'effectuer une action sensible.

Enregistrez une clé d'accès pour un compte utilisateur existant.

Principes d'orientation et transversaux complets pour implémenter WebAuthn et les clés d'accès dans les applications Web. Utilisez ce guide pour l'enregistrement, l'authentification, la gestion ou la réauthentification des clés d'accès.

Empêchez les attaques XSS basées sur le DOM en définissant une règle Trusted Types pour nettoyer le code HTML non fiable, en utilisant la règle lors de l'écriture dans des récepteurs DOM tels que innerHTML et en appliquant les Trusted Types via Content Security Policy.

Authentifiez les utilisateurs connus sur place avec leurs clés d'accès ou mots de passe enregistrés avant d'accéder à une page de connexion ou d'interrompre leur workflow.

Limitez une page ou un worker à communiquer uniquement avec une liste d'autorisation explicite de points de terminaison réseau afin d'empêcher les requêtes tierces non autorisées et l'exfiltration de données côté client.

Analysez et affichez de manière sécurisée le contenu HTML non fiable provenant des entrées utilisateur en supprimant les éléments et attributs non sécurisés.

Vérifiez l'intégrité cryptographique des scripts, feuilles de style, polices et images externes chargés à partir d'origines tierces, et contrôlez si ces requêtes envoient des identifiants ou des URL de provenance.

Signez et vérifiez des messages, des jetons ou des artefacts dans le navigateur à l'aide de clés asymétriques classiques ou résistantes aux attaques quantiques (post-quantiques) pour garantir l'intégrité et l'authenticité des données.

Vérifiez qu'un utilisateur est propriétaire d'une adresse e-mail lors de la création, de la connexion ou de la récupération d'un compte sans envoyer de code secret à usage unique ni d'e-mail contenant un lien magique.

Consignes de sécurité préventives pour les développeurs Web (XSS, CSP, cookies, isolation multi-origine). Utilisez cette compétence pour guider le processus d'audit, de test et de déploiement des stratégies de sécurité en toute sécurité.

Consignes concrètes pour les développeurs Web afin d'implémenter la protection des données personnelles dès la conception, la minimisation des données, les audits tiers et la gestion sécurisée des données. Utilisez cette compétence lorsque vous concevez des applications, intégrez des services tiers, gérez des données utilisateur ou configurez des en-têtes de sécurité.

Transférez une application Web installée vers une nouvelle origine tout en conservant la configuration utilisateur et les raccourcis au niveau de l'OS.

Détectez la langue du contenu généré par l'utilisateur ou du contenu du site déjà présent.

Exécutez l'inférence en langage naturel sur l'appareil dans le navigateur à l'aide de l'API Prompt, avec une sortie en streaming, des réponses JSON structurées et une gestion des sessions multitours.

Résumez du contenu textuel à l'aide de l'API Summarizer sur l'appareil.

Traduisez du texte d'une langue à une autre à l'aide de l'API Translator sur l'appareil.

Exposez les fonctionnalités côté client en tant qu'outils pour les agents IA en annotant les formulaires HTML standards avec des attributs WebMCP.

Enregistrez de manière programmatique des fonctions JavaScript côté client en tant qu'outils pour les agents IA à l'aide de l'API impérative WebMCP.

Suivez ce guide pour implémenter WebMCP (Web Model Context Protocol) dans les applications de navigateur, en exposant les fonctionnalités côté client en tant qu'outils aux agents IA via des API déclaratives ou impératives.