Cas d'utilisation des conseils pour le Web moderne

Publié le : 19 mai 2026

Il s'agit d'une liste générée de tous les cas d'utilisation désormais disponibles dans les conseils sur le Web moderne.

accessibility

accessible-error-announcement

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 interaction, à l'image de l'expérience visuelle.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

built-in-ai

language-detection

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

language-model

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

summarizer

Synthétiser des contenus textuels à l'aide de l'API Summarizer sur l'appareil.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

translator

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

css

highlight-text-ranges

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

forms

animated-select-picker

Créez un composant de sélection personnalisé dont le menu déroulant est animé. Par exemple, le menu apparaît progressivement ou en glissant, ou les options s'animent lorsqu'elles sont sélectionnées.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

autofill-address-form

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

autofill-highlight-inputs

Utilisez le 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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

autofill-payment-form

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

autofill-sign-in-form

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

autofill-sign-up-form

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

brand-consistent-forms

Faites correspondre les cases à cocher, les boutons radio, les sélecteurs de plage et les barres de progression à la palette de couleurs de votre site sans les remplacer par des composants personnalisés.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

branded-select-styling

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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

custom-select-picker-layouts

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

form-fields-automatically-fit-contents

Permettez aux champs de formulaire de s'agrandir et de se réduire pour s'adapter à l'entrée utilisateur, par exemple lorsqu'il 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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

required-field-feedback

Fournissez un message d'erreur pour les champs obligatoires du formulaire qui ont été ignorés ou laissés vides uniquement après l'interaction de l'utilisateur. Cela permet d'éviter les erreurs préventives et de s'assurer que les commentaires sont opportuns et contextuellement pertinents pour le parcours de l'utilisateur.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

rich-media-picker

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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

select-menu-interaction

Ne validez qu'une option non définie par défaut dans un menu déroulant une fois que l'utilisateur a interagi avec le contrôle.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

validate-input-after-interaction

N'affichez les commentaires de validation des champs de formulaire (par exemple, les exigences concernant la complexité du mot de passe ou le format de l'adresse e-mail) qu'une fois que l'utilisateur a terminé son interaction initiale. Évitez ainsi les erreurs prématurées lors du chargement de page ou pendant que l'utilisateur saisit du texte.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

passkeys

passkey-authentication

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

passkey-conditional-create

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

passkey-management

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

passkey-reauthentication

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

passkey-registration

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

performance

batch-analytics-events

Regroupez et limitez le nombre d'événements Analytics dans un seul beacon pour minimiser la contention réseau et réduire la charge du serveur, tout en fournissant des mises à jour en temps réel.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

break-up-long-tasks

Fractionnez le traitement synchrone lourd (calculs complexes et/ou longues boucles) ou les mises à jour du DOM, pour permettre au navigateur de gérer les entrées utilisateur et de redessiner l'écran.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

calculate-total-foreground-time

Calculer le temps total passé par un utilisateur à consulter une page, en excluant les périodes où l'onglet était en arrière-plan.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

conditional-async-dependencies

Chargez ou initialisez conditionnellement les dépendances asynchrones (par exemple, en important des polyfills pour les fonctionnalités Web manquantes) sans nécessiter d'orchestration complexe pour toutes les dépendances de script d'une page.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

defer-rendering-heavy-content

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

defer-work-until-scroll-ends

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

deprioritize-background-fetches

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

detect-initial-visibility-state

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

efficient-background-processing

Économisez 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>, le rendu WebGL ou l'interrogation des données WebSocket à haute fréquence) lorsque le composant est hors écran, puis reprenez-les juste à temps lorsqu'il revient à l'écran.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

faster-spa-view-transitions

Permet des transitions plus rapides 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 reconstruire à chaque navigation.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

full-session-analytics

Suivez de manière fiable les données analytiques, les erreurs et les données de télémétrie tout au long de la visite de la page par l'utilisateur, et reportez l'envoi des données jusqu'à ce que l'utilisateur quitte la page.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

identify-heavy-scripts

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

identify-inp-causes

Identifier le code JavaScript lent qui a un impact sur la métrique INP

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

improve-next-page-load-performance

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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

interactions-in-complex-layouts

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

optimize-image-priority

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

optimize-preload-priority

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

optimize-script-priority

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

resolution-optimized-pseudo-elements

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

schedule-tasks-by-priority

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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

sequence-distributed-events

Enregistrez les opérations de journalisation et de séquence dans des microservices distribués ou des environnements de traçage à haut débit en enregistrant des codes temporels avec une résolution en nanosecondes.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

user-experience

adapt-scrollbar-to-contrast-preferences

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

anchor-positioning-tab-underline

Faites passer un élément de manière fluide entre deux positions d'élément cible. Par exemple, le déplacement d'un soulignement d'onglet sélectionné entre l'onglet précédemment sélectionné et l'onglet actuellement sélectionné.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

animate-element-entry-exit

Masquez/affichez les éléments de manière fluide lorsqu'ils sont ajoutés/supprimés du DOM ou lorsque leurs valeurs d'affichage sont activées/désactivées.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

animate-to-from-top-layer

Animer les éléments tels que les boîtes de dialogue, les pop-ups et les info-bulles lorsqu'ils entrent ou sortent de la couche supérieure.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

animate-to-intrinsic-sizes

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

apply-webgl-shaders

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

calculate-event-differentials

Calculez la durée et le temps restant entre des dates et des heures.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

calculate-with-intrinsic-sizes

Calculer la taille d'un élément en fonction de sa taille intrinsèque, tout en veillant à ce qu'il s'inscrive dans les contraintes de conception données.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

capture-location-agnostic-data

Enregistrez des données chronologiques qui ne doivent pas changer en fonction de la localisation d'un utilisateur, comme les dates de naissance, les alarmes récurrentes ou les jours fériés nationaux.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

Mettez en évidence l'élément non interactif actuellement ancré dans les carrousels, galeries ou expériences de balayage plein écran avec ancrage au défilement. Par exemple, en développant une fiche lorsqu'elle est ancrée ou en affichant du contenu masqué.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

child-state-based-styling

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 sombre selon qu'un bouton bascule de thème est coché ou non.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

complex-shapes

Créez des designs plus expressifs en découpant des éléments et leur contenu dans n'importe quelle forme libre, comme un symbole, un coup de pinceau ou une texture organique.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

component-specific-light-dark-theme

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

consistent-cross-document-transitions

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 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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

content-based-styling

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 sur plusieurs colonnes. Sinon, utilisez une mise en page sur une seule colonne par défaut.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

coordinate-global-events

Planifiez des réunions ou des événements futurs en les associant explicitement à un fuseau horaire géographique IANA. Les heures des événements resteront ainsi précises, quels que soient les changements d'heure liés à l'heure d'été, ou les heures "sautées" ou "répétées" lors des changements d'heure.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

cross-document-transitions

Créez des transitions fluides et transparentes entre les navigations en plein écran, comme des fondus enchaînés, des effets de révélation personnalisés ou la transformation du contenu d'une page à l'autre.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

customize-scrollbar-color-and-thickness

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

dark-mode

Implémenter 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 contrôles de formulaire, etc.)

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

declarative-button-actions

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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

declarative-dialog-popover-control

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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

deliver-optimized-decorative-images

Fournissez des images décoratives optimisées (telles que 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) ainsi que plusieurs densités de pixels (comme 1x et 2x). Le navigateur peut 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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

design-token-reactivity

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

directional-navigation-transitions

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

dynamic-sibling-animations

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

dynamic-sibling-styling

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

export-html-media-from-canvas

Capturez et exportez du contenu HTML dynamique sous forme d'images ou de frames vidéo depuis le canevas.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

expose-canvas-content-to-browser-features

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

flicker-free-client-side-ab-testing

Diffuser et afficher des tests A/B, des tests multivariés ou d'autres expériences à 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 de l'expérience.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

fluid-scaling

Mise à l'échelle fluide des éléments tels que la taille de la police, l'espacement et la taille des éléments multimédias en fonction de la taille du conteneur parent, plutôt que d'utiliser des points d'arrêt fixes

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

format-human-readable-durations

Présentez aux utilisateurs le temps écoulé ou les durées dans un format lisible et localisé, avec la possibilité d'afficher des détails sur les unités (par exemple, "1 heure et 30 minutes") ou le nombre total d'unités (par exemple, "90 minutes") selon le contexte.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

group-element-transitions

Faites passer un groupe d'éléments similaires simultanément en utilisant la même logique de transition, par exemple en supprimant un produit d'un panier et en animant tous les autres produits vers leur nouvelle position.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

improve-text-layout-and-legibility

Améliorez la mise en page et la lisibilité des contenus textuels courts et autonomes, tels que les titres de quelques lignes, en permettant au navigateur d'appliquer des retours à la ligne équilibrés lors de l'habillage du texte.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

individual-transform-properties

Animer ou remplacer 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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

interactive-content-in-3d-scenes

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

interactive-content-reveal

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

interest-triggered-action-previews

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 dessus, en le sélectionnant ou en appuyant de manière prolongée dessus), mais avant qu'il ne clique dessus.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

interest-triggered-tooltips

Afficher 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 nécessiter de clic.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

light-dismiss-a-dialog

Créez une boîte de dialogue modale qui peut être fermée à l'aide de la fermeture légère (c'est-à-dire en cliquant ou en appuyant en dehors de la boîte de dialogue).

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

manage-recurring-intervals

Calculez les intervalles récurrents pour les factures d'abonnement ou les cycles de paie, en ajustant automatiquement les cas extrêmes tels que les transitions de fin de mois (par exemple, en ajoutant un mois au 31 janvier) pour garantir des calculs de période précis.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

model-partial-time-concepts

Modélisez les concepts de date et d'heure qui manquent intrinsèquement d'un composant standard (comme une année, un jour ou une date spécifiques) sans utiliser de valeurs d'espace réservé arbitraires qui introduisent des erreurs de calcul.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

move-dom-element-without-losing-state

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

overflow-clipping-control

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é.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

parallax-scroll-effects

Créez des effets basés sur le défilement (comme la parallaxe) où les calques 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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

persistent-app-tours

Créez des visites guidées d'intégration persistantes à l'aide de calques natifs ancrés qui restent ouverts pendant l'interaction de l'utilisateur.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

persistent-toast-notifications

Créez des notifications toast et de superposition non intrusives pour une messagerie persistante et empilable, et une communication d'état.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

persistent-top-layer-ui

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

physics-based-easing

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

platform-controls-dismiss-dialog

Créez une boîte de dialogue modale qui peut être fermée à l'aide d'actions utilisateur standards spécifiques à la plate-forme, comme appuyer sur la touche Esc sur les plates-formes de bureau ou effectuer un geste de retour ou de fermeture sur les plates-formes mobiles.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

position-aware-tooltips

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

precise-text-alignment

Obtenez un alignement vertical précis avec du texte de n'importe quelle police. Par exemple, une marge intérieure visuelle exactement égale au-dessus et en dessous du texte, ou un texte parfaitement aligné sur les icônes ou images adjacentes.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

prevent-text-wrapping

Assurez-vous que le navigateur n'insère pas de sauts de ligne dans le texte et qu'il autorise le texte à dépasser de son conteneur.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

pull-to-reveal

Créez une fonctionnalité "Tirer pour révéler" qui permet à l'utilisateur de tirer l'écran vers le bas pour afficher plus de contenu, comme une barre de recherche.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

reduce-style-repetition

Réduisez la répétition excessive de styles en encapsulant la 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).

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

resilient-context-menus-and-nested-dropdowns

Créez des menus, des info-bulles, des menus déroulants ou des calques contextuels accessibles et responsifs qui doivent être rattachés à des éléments d'interface utilisateur spécifiques. Assurez-vous que le calque se repositionne automatiquement (par exemple, en inversant les axes) lorsqu'il rencontre les bords de la fenêtre d'affichage, afin qu'il ne soit jamais coupé.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

same-document-transitions

Connectez visuellement les éléments persistants entre différents états de page ou navigations dans une application monopage (SPA, Single Page Application), par exemple en transformant une miniature de produit en une image principale plein écran, en modifiant en douceur leur taille, leur position ou d'autres propriétés de style.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scroll-entry-exit-effects

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scroll-position-aware-elements

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scroll-progress-indicator

Créez une barre de progression du défilement, un suivi de progression par étapes ou toute autre affordance visuelle qui indique à l'utilisateur la distance parcourue sur une page ou une section.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scroll-snap-realtime-feedback

Fournissez un retour visuel en temps réel dans les éléments d'interface utilisateur associés lorsqu'un utilisateur fait défiler du contenu aligné sur des points d'accroche, avant la fin du geste de défilement.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scroll-snap-state-sync

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scroll-target-on-load

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 du rendu initial.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scrollability-affordance-hints

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

scrollytelling

Animer les propriétés visuelles d'un élément cible (par exemple, estomper un arrière-plan, modifier la couleur d'arrière-plan ou créer des expériences de narration par défilement) en fonction de la position du viewport de défilement d'un élément complètement différent.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

search-hidden-content

Masquez le contenu à l'aide de motifs tels que des accordéons, des onglets et des sections "Lire la suite", tout en veillant à ce que le texte masqué s'affiche lors des recherches natives "Rechercher sur la page", en permettant l'indexation par les moteurs de recherche, en prenant en charge les liens profonds avec des fragments d'URL et en conservant l'accessibilité ARIA.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

shaped-cutouts

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

shrinking-header-on-scroll

Animez en douceur un en-tête fixe ou une couverture plein écran au défilement pour le réduire dynamiquement, lui ajouter des ombres et transformer sa mise en page sur une distance de défilement prédéfinie.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

size-aware-styling

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 carte qui peut modifier sa mise en page en fonction de sa taille, ou un bouton d'incitation à l'action qui peut afficher conditionnellement du texte d'aide en fonction de sa largeur.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

soft-edge-content-fade

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

stabilize-reactive-state

Gérez les échéances ou les plannings des tâches dans des vues axées sur les données, sans effets secondaires inattendus liés à l'état mutable partagé.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

stack-drill-down

Créez une navigation hiérarchique en plein écran qui permet aux utilisateurs d'explorer des vues imbriquées et de balayer l'écran ou d'utiliser le bouton "Retour" pour revenir en arrière, tout en gardant l'historique du navigateur synchronisé.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

style-parent-with-has

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

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

support-global-calendar-systems

Afficher et calculer précisément les dates dans des systèmes de calendrier non grégoriens (par exemple, islamique, hébraïque ou chinois) pour les utilisateurs internationaux.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

swipe-to-remove

Permettez aux utilisateurs d'effectuer des actions sur les éléments d'une liste (supprimer, archiver, marquer comme lu, etc.) à l'aide d'un geste de balayage horizontal. Ils peuvent ainsi traiter rapidement les entrées sans appuyer sur une commande distincte.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

visually-stable-font-fallbacks

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 secours (ou inversement).

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

visually-stable-mixed-fonts

Définissez des styles de police de sorte que le texte reste lisible et visuellement cohérent dans les situations où plusieurs polices sont utilisées pour afficher un même bloc de texte.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

visually-texture-content

Appliquez des motifs de texture et d'usure réalistes aux éléments pour leur donner l'apparence de matériaux organiques, anciens ou physiques.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

webmcp

agentic-forms

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.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub

agentic-javascript-tools

Enregistrez par programmation des fonctions JavaScript côté client en tant qu'outils pour les agents d'IA à l'aide de l'API impérative WebMCP.

Fonctionnalités utilisées :

Afficher le cas d'utilisation sur GitHub