
Études de cas
ruby-align est désormais disponible en tant que référence
ruby-align fait désormais partie de Baseline
Télécharger des modèles d'IA avec l'API Background Fetch
Publié le 20 février 2025 Télécharger de manière fiable de grands modèles d'IA est une tâche difficile. Si les utilisateurs perdent leur connexion Internet ou ferment votre site Web ou votre application Web, ils perdent les fichiers de modèle
Précharger les ressources pour accélérer les navigations futures
Découvrez l'indice de ressource rel=prefetch et comment l'utiliser.
Déboguer les décalages de mise en page
Découvrez comment identifier et corriger les décalages de mise en page.
Optimiser le Cumulative Layout Shift
Le CLS (Cumulative Layout Shift) est une métrique qui quantifie la fréquence à laquelle les utilisateurs subissent des changements soudains dans le contenu de la page. Dans ce guide, nous allons aborder l'optimisation des causes courantes de CLS telles que les images et les cadres iFrame sans dimensions ni contenu dynamique.
CSS scrollbar-color et scrollbar-gutter sont désormais disponibles en tant que référence
Les propriétés CSS scrollbar-color et scrollbar-gutter sont disponibles dans tous les principaux moteurs de navigateur, ce qui les rend disponibles en version de référence.
Recap mensuel de référence de janvier 2025
Dans sa première édition, ce récapitulatif mensuel de Baseline couvre les événements qui se sont déroulés dans Baseline, à la fois chez Google et dans la communauté des développeurs Web en janvier 2025.
Les optimisations WasmGC et Wasm tail call sont désormais disponibles en version de référence
La récupération de mémoire WebAssembly et les optimisations de la fonction Wasm tail call sont désormais disponibles dans tous les principaux moteurs de navigateur.
Largest Contentful Paint (LCP)
Cet article présente la métrique LCP (Largest Contentful Paint) et explique comment la mesurer.
Promise.try est désormais disponible en tant que référence
Promise.try est désormais disponible dans tous les principaux moteurs de navigateurs. Il est donc disponible en tant que référence.
Créer des chatbots locaux et hors connexion
Publié le 13 janvier 2024 Vous pouvez créer de nombreux projets incroyables avec l'IA, avec des modèles de machine learning classiques et de nouveaux grands modèles de langage (LLM). Grâce aux LLM, les ordinateurs peuvent générer de nouveaux
Optimiser les longues tâches
On vous a dit de "ne pas bloquer le thread principal" et de "diviser vos longues tâches", mais que signifient ces choses ?
Appliquer des effets aux images avec la propriété CSS mask-image
Le masquage CSS vous permet d'utiliser une image en tant que calque de masque. Cela signifie que vous pouvez utiliser une image, un SVG ou un dégradé comme masque pour créer des effets intéressants sans éditeur d'images.
Référence 2024: plus d'outils pour aider les développeurs Web
Ensemble de données "web-features", tableau de bord sur l'état de la plate-forme Web, widget d'état de référence et plus encore ! Revoyez la référence de 2024.
Vidéo à chargement différé
Cet article explique le chargement en différé et les options disponibles pour le chargement en différé des vidéos.
Précharger les modules
Le préchargement de module permet de charger à l'avance les modules JavaScript de manière déclarative.
Mesurer la saisie automatique dans le navigateur sur vos formulaires
Pour optimiser l'expérience utilisateur, il est essentiel de comprendre comment les utilisateurs interagissent avec vos formulaires. La saisie automatique du navigateur joue un rôle important dans ce processus. Découvrez comment collecter et analyser les données sur la façon dont les utilisateurs utilisent le remplissage automatique dans vos formulaires.
Partie 2: Créer une détection de la toxicité de l'IA côté client
La détection de la toxicité protège vos utilisateurs et crée un environnement en ligne plus sûr. Dans la deuxième partie, nous apprenons à créer un outil d'IA côté client pour détecter et atténuer la toxicité à sa source.
Temps de blocage total (TBT)
Cet article décrit la métrique "Total Blocking Time (TBT)" et explique comment la mesurer.
Web Vitals
Métriques essentielles pour un site opérationnel
Optimiser le Largest Contentful Paint
Guide par étapes expliquant comment décomposer le LCP et identifier les points clés à améliorer.
Premiers pas avec la mesure des métriques Web Vitals
Découvrez comment mesurer les signaux Web de votre site dans des environnements réels et en laboratoire.
Méthodes les plus efficaces pour améliorer les Core Web Vitals
Ensemble de bonnes pratiques que Chrome a identifiées comme les plus grandes opportunités d'optimiser les performances Web et d'améliorer les Core Web Vitals
La propriété CSS content-visibility est désormais disponible en version de référence
La propriété CSS content-visibility est désormais disponible en version de référence.
Comment les seuils des métriques Core Web Vitals ont été définis
Recherche et méthodologie derrière les seuils des Signaux Web essentiels
Diagnostiquer manuellement les interactions lentes dans l'atelier
Vous avez examiné vos données réelles et constaté que vos interactions étaient lentes. L'étape suivante consiste à en savoir plus sur la façon de tester manuellement ces interactions et à identifier leurs causes.
Workflows des Signaux Web essentiels avec les outils Google
Face à l'importance grandissante des Core Web Vitals, les propriétaires et les développeurs de sites se concentrent de plus en plus sur les performances et l'expérience utilisateur clé. Google propose de nombreux outils pour vous aider à évaluer, optimiser et surveiller les pages, mais les utilisateurs ne sont souvent pas surpris par les différentes sources de données et la manière de les utiliser efficacement. Ce guide propose un workflow combinant plusieurs outils et explique où et comment ils sont pertinents tout au long du processus de développement.
Référence
Cet article explique l'origine de Baseline, l'implication de Google et la propriété du groupe de la communauté WebDX.
Cache amélioré
Découvrez comment optimiser vos pages pour des chargements instantanés lorsque vous utilisez les boutons "Précédent" et "Suivant" du navigateur.
L'imbrication CSS est améliorée avec CSSNestedDeclarations
L'imbrication CSS s'améliore considérablement !
First Input Delay (FID)
Cet article présente la métrique FID (First Input Delay) et explique comment la mesurer.
Déboguer les performances sur le terrain
Découvrez comment attribuer vos données de performance à l'aide d'informations de débogage pour vous aider à identifier et résoudre les problèmes réels des utilisateurs grâce à Analytics.
Corréler les métriques Core Web Vitals et les revenus publicitaires avec les outils Google
Découvrez comment utiliser les outils Google pour corréler vos métriques Core Web Vitals avec vos revenus publicitaires.
Analyse comparative des performances de la propriété CSS @
Quel impact @property a-t-il sur les performances de votre CSS ?
Stockage pour le Web
Il existe de nombreuses options pour stocker des données dans le navigateur. Laquelle répond le mieux à vos besoins ?
Il est temps de charger les iFrames hors écran de manière différée !
Cet article traite de l'attribut de chargement et explique comment l'utiliser pour contrôler le chargement des iFrames.
Protocole Web push
Ce tutoriel interactif étape par étape explique comment créer un serveur qui gère les abonnements aux notifications push et envoie les requêtes du protocole Web push à un service push.
Créer plusieurs progressive web apps sur le même domaine
Découvrez les méthodes recommandées et non recommandées pour créer plusieurs PWA en réutilisant le même domaine, ainsi que leurs avantages et leurs inconvénients.
Comment Chrome gère les mises à jour du fichier manifeste de l'application Web
Conditions requises pour modifier les icônes, les raccourcis, les couleurs et d'autres métadonnées dans le fichier manifeste de votre application Web pour votre PWA
Quels sont les éléments nécessaires pour être installable ?
Critères d'installation des progressive web apps.
Quelles sont les caractéristiques d'une progressive web app de qualité ?
Qu'est-ce qui rend une progressive web app de qualité ou de qualité ?
Ajouter un fichier manifeste d'application Web
Le fichier manifeste de l'application Web est un simple fichier JSON qui indique au navigateur comment votre application Web doit se comporter.
Limiter les scripts intersites (XSS) avec une CSP (Content Security Policy) stricte.
Découvrez comment déployer une CSP basée sur des nonces ou des hachages de script pour vous protéger en profondeur contre les scripts intersites.
Accéder aux appareils sur le Web
Cet article aide les développeurs Web à choisir l'API matérielle adaptée à un appareil donné.
Autorisez la réutilisation des clés d'accès sur vos sites avec les requêtes d'origine associées
Découvrez comment utiliser les requêtes d'origine associées pour autoriser la réutilisation des clés d'accès sur vos sites.
Chargement différé des images au niveau du navigateur pour le Web
Cet article porte sur l'attribut de chargement et explique comment l'utiliser pour contrôler le chargement des images.
Choisir le bon format d'image
Choisir le bon format d'image est la première étape pour diffuser des images optimisées sur votre site Web. Cet article vous aide à faire le bon choix.
Métriques personnalisées
Les métriques personnalisées vous permettent de mesurer et d'optimiser les aspects de l'expérience utilisateur qui sont propres à votre site.
Mesurer et déboguer les performances avec Google Analytics 4 et BigQuery
Découvrez comment envoyer les données des signaux Web vers les propriétés Google Analytics 4, puis les exporter pour les analyser dans BigQuery et Looker Studio.
Bonnes pratiques pour les autorisations Web
Ce guide présente les bonnes pratiques à suivre pour les sites Web lorsqu'ils demandent aux utilisateurs l'autorisation d'accéder à des fonctionnalités sensibles (comme l'appareil photo, le micro et la localisation) afin de limiter les invites inutiles et l'accès bloqué.
Bonnes pratiques concernant les notifications relatives aux cookies
Découvrez comment les notifications relatives aux cookies affectent les performances, la mesure des performances et l'expérience utilisateur.
Personnalisez les notifications multimédias et les commandes de lecture avec l'API Media Session
Les développeurs Web peuvent personnaliser les notifications multimédias et répondre aux événements multimédias, comme la recherche ou le suivi des modifications, avec l'API Media Session.
Identifier les interactions lentes sur le terrain
Avant de pouvoir reproduire des interactions lentes dans l'atelier afin d'optimiser le paramètre "Interaction to Next Paint" sur votre site Web, vous devez vous appuyer sur les données réelles pour les trouver. Ce guide vous explique comment procéder.
Utilisation de l'index de tabulation
Utilisez l'attribut tabindex pour définir explicitement la position de tabulation d'un élément.
Délai avant le premier octet (TTFB)
Cet article présente la métrique TTFB (Time to First Byte) et explique comment la mesurer.
Extraction pratique des requêtes pour les LLM plus petits
Découvrez comment ajuster vos requêtes pour obtenir les résultats souhaités avec différents LLM, modèles et tailles de modèles.
INP (Interaction to Next Paint)
Cet article présente la métrique Interaction to Next Paint (INP) et explique comment elle fonctionne, comment la mesurer et comment l'améliorer.
Couleurs CSS dépendantes du schéma de couleurs avec light-dark()
description: définissez les couleurs qui réagissent au jeu de couleurs utilisé avec la fonction light-dark().
Modèles de performances WebAssembly pour les applications Web
Dans ce guide, destiné aux développeurs Web qui souhaitent bénéficier de WebAssembly, vous allez apprendre à utiliser Wasm pour externaliser les tâches nécessitant une utilisation intensive du processeur à l'aide d'un exemple en cours d'exécution.
Mises en page de type grille animée CSS
Dans la grille CSS, les propriétés "grid-template-columns" et "grid-template-rows" vous permettent respectivement de définir des noms de lignes et de suivre la taille des colonnes et des lignes de la grille. La prise en charge de l'interpolation pour ces propriétés permet aux mises en page en grille de passer de manière fluide entre les états, au lieu de s'ancrer à mi-chemin d'une animation ou d'une transition.
Jouez au jeu du dinosaure avec votre manette de jeu Chrome
Apprenez à contrôler des jeux Web avec l'API Gamepad.
L'attribut inerte
La propriété inerte est un attribut HTML global qui simplifie la suppression et la restauration des événements d'entrée utilisateur pour un élément, y compris les événements de sélection et les événements issus de technologies d'assistance.
Déterminer le fournisseur de clés d'accès avec l'AAGUID
Les parties de confiance peuvent déterminer d'où provient la clé d'accès en examinant l'AAGUID. Découvrez comment ça marche.
Compiler et optimiser Wasm avec Binaryen
À l'aide de l'exemple d'un langage synthétique appelé ExampleScript, découvrez comment écrire et optimiser des modules WebAssembly en JavaScript à l'aide de l'API Binaryen.js.
Enregistrer du contenu audio et vidéo au format HTML5
La capture audio/vidéo est depuis longtemps le Saint Graal du développement Web. Pendant de nombreuses années, nous avons dû nous appuyer sur des plug-ins de navigateur ( Flash ou Silverlight ) pour accomplir cette tâche. Allez! HTML5 à la rescousse.
Composant Web <model-viewer>
Le composant Web <model-viewer> vous permet d'utiliser des modèles 3D sur une page Web de manière déclarative.
Présentation détaillée de userVerification
Découvrir comment utiliser "userVerification" dans WebAuthn
Pourquoi les données CrUX sont-elles différentes de mes données RUM ?
Découvrez pourquoi les données RUM peuvent afficher différents chiffres des Signaux Web essentiels de CrUX.
Accessibilité pour les développeurs Web
Il est important de créer des sites inclusifs et accessibles à tous. Nous pouvons optimiser au moins six domaines clés du handicap: la vision, l'audition, la mobilité, la cognition, la parole et les neurones.
Charger du code JavaScript tiers
Les scripts tiers offrent un large éventail de fonctionnalités utiles, ce qui rend le Web plus dynamique. Découvrez comment optimiser le chargement des scripts tiers pour réduire leur impact sur les performances.
Empêcher la création d'une clé d'accès s'il en existe déjà une
Découvrez comment empêcher la création d'une clé d'accès si elle existe déjà dans le gestionnaire de mots de passe de l'utilisateur.
Utiliser IndexedDB
Guide des principes de base d'IndexedDB
5 extraits CSS que tout développeur front-end devrait connaître en 2024
C'est un CSS fiable, performant et fiable que vous pouvez utiliser dès aujourd'hui.
Optimiser le délai avant le premier octet
Découvrez comment optimiser la métrique "Time to First Byte".
Quelles sont les parties d'une URL ?
Quelle est la différence entre un hôte, un site et une origine ? Qu'est-ce qu'un eTLD ? Cet article vous explique comment procéder.
Présentation détaillée des identifiants visibles
Découvrez les identifiants visibles et comment créer des expériences utilisateur adaptées à votre cas d'utilisation.
Performances d'affichage
Les utilisateurs remarquent si les sites et les applications ne fonctionnent pas correctement. Il est donc crucial d'optimiser les performances d'affichage.
ResizeObserver: il s'apparente à document.onresize pour les éléments.
"ResizeObserver" vous avertit lorsque le rectangle de contenu d'un élément change de taille afin que vous puissiez réagir en conséquence.
Optimiser la taille d'encodage et de transfert des éléments textuels
En plus d'éliminer les téléchargements de ressources inutiles, la meilleure chose à faire pour améliorer la vitesse de chargement des pages consiste à réduire la taille de téléchargement globale en optimisant et en compressant les ressources restantes.
OffscreenCanvas : accélérez les opérations de canevas avec un nœud de calcul Web
Ce document explique comment améliorer les performances de l'affichage des images dans votre application Web à l'aide de l'API OffscreenCanvas.
First Contentful Paint (FCP)
Cet article présente la métrique "First Contentful Paint" (FCP) et explique comment la mesurer.
Réseaux de diffusion de contenu (CDN)
Cet article offre une présentation complète des réseaux de diffusion de contenu (CDN). Il explique également comment choisir, configurer et optimiser une configuration CDN.
Qu'est-ce qui fait une bonne expérience de déconnexion ?
Conseils pratiques aux développeurs sur ce qu'il faut faire lorsqu'un utilisateur se déconnecte du site Web.
Délai avant interactivité (TTI)
Cet article présente la métrique "Time to Interactive" (TTI) et explique comment la mesurer.
Optimiser le chargement des ressources avec l'API Fetch Priority
L'API Fetch Priority indique la priorité relative des ressources par rapport au navigateur. Elle peut optimiser le chargement et améliorer les Signaux Web essentiels.
Les pseudo-classes :user-valid et :user-invalid
À propos des pseudo-classes :user-valid et :user-invalid et de leur utilisation pour améliorer l'expérience utilisateur de validation des entrées
Optimiser les Core Web Vitals pour les décisionnaires en entreprise
Découvrez comment les décideurs en entreprise et les non-développeurs peuvent améliorer les Signaux Web essentiels.
Nuances de l'encodage des chaînes en base64 en JavaScript
Comprenez et évitez les problèmes courants lors de l'application de l'encodage et du décodage base64 à des chaînes.
Sous-grille CSS
Les sous-grilles permettent le partage de grilles imbriquées, ce qui permet aux grilles imbriquées de s'aligner sur les ancêtres et les frères et sœurs.
Charger efficacement les annonces sans nuire à la vitesse de la page
Dans le monde numérique d'aujourd'hui, la publicité en ligne est un élément essentiel du Web sans frais dont nous profitons tous. Toutefois, des annonces mal implémentées peuvent ralentir l'expérience de navigation, frustrer les utilisateurs et réduire l'engagement. Découvrez comment charger efficacement des annonces sans affecter la vitesse de votre page, tout en offrant une expérience utilisateur fluide et en maximisant les opportunités de revenus pour les propriétaires de sites Web.
Quatre types courants de couverture de code
Apprenez-en plus sur la couverture de code et découvrez quatre façons courantes de la mesurer.
Tester ou non, d'un point de vue technique
Déterminez ce que vous devez tester et ce que vous pouvez exclure.
Définir des scénarios de test et des priorités
Déterminez les éléments à tester, définissez vos scénarios de test et définissez les priorités.
Métriques de performances axées sur l'utilisateur
Les métriques de performances axées sur l'utilisateur sont essentielles pour comprendre et améliorer l'expérience sur votre site tout en profitant aux utilisateurs réels.
Précharger les images responsives
Découvrez de nouvelles possibilités intéressantes en matière de préchargement d'images responsives pour garantir une expérience utilisateur optimale.
Adapter la typographie aux préférences des utilisateurs avec le CSS
Méthode permettant d'adapter une police aux préférences de vos utilisateurs, afin qu'ils puissent lire votre contenu avec un maximum de confort.
Pyramide ou crabe ? Trouvez une stratégie de test adaptée
Découvrez comment combiner différents types de tests dans une stratégie raisonnable adaptée à votre projet.
Les trois types courants d'automatisation des tests
Commençons par les bases ! Découvrez les deux modes de test généraux et les trois types courants d'automatisation des tests.
Élimination des téléchargements inutiles
Vous devez auditer régulièrement vos ressources pour vous assurer que chacune d'elles contribue à améliorer l'expérience utilisateur.
Compilation de mkbitmap vers WebAssembly
Le programme mkbitmap C lit une image et lui applique une ou plusieurs des opérations suivantes, dans cet ordre: inversion, filtrage passe-haut, mise à l'échelle et seuil. Chaque opération peut être contrôlée et activée ou désactivée individuellement. Cet article explique comment compiler mkbitmap dans WebAssembly.
Qu'est-ce que WebAssembly et d'où provient-il ?
Introduction à WebAssembly (parfois abrégé Wasm), le format de code binaire portable et le format texte correspondant pour les programmes exécutables, ainsi que les interfaces logicielles permettant de faciliter les interactions entre ces programmes et leur environnement hôte.
Système de fichiers privé d'origine
La norme de système de fichiers introduit un système de fichiers privé d'origine (OPFS) en tant que point de terminaison de stockage privé de l'origine de la page et non visible par l'utilisateur. Il fournit un accès facultatif à un type de fichier
Hébergement sécurisé des données utilisateur dans les applications Web modernes
Comment afficher de manière sécurisée le contenu contrôlé par l'utilisateur dans des applications Web
Déployer le format AVIF pour des sites Web plus réactifs
Présentation de l'adoption du format AVIF dans l'écosystème, et des avantages que les développeurs peuvent attendre de ce format pour les images fixes et les animations en termes de performances et de qualité.
Optimiser l'interaction pour la page suivante
Découvrez comment optimiser l'interaction de l'interaction avec le site Web avec Next Paint.
Fonctionnalités de référence que vous pouvez utiliser aujourd'hui
Découvrez quelques-unes des fonctionnalités de Baseline.
Affichage côté client du code HTML et de l'interactivité
Le rendu du code HTML avec JavaScript est différent du rendu HTML envoyé par le serveur, ce qui peut affecter les performances. Découvrez dans ce guide les différences qui existent et ce que vous pouvez faire pour préserver les performances d'affichage de votre site Web, en particulier en ce qui concerne les interactions.
Optimiser le délai d'entrée
Le délai d'entrée peut contribuer de manière significative à la latence totale des interactions et avoir un impact négatif sur l'INP de votre page. Dans ce guide, vous allez découvrir ce qu'est le délai d'entrée et comment le réduire pour une interactivité plus rapide.
L'impact des grandes tailles de DOM sur l'interactivité et ce que vous pouvez faire pour y remédier
Les grandes tailles de DOM peuvent avoir un impact sur la rapidité ou non des interactions. Découvrez la relation entre la taille du DOM et l'INP, ce que vous pouvez faire pour réduire la taille du DOM et d'autres moyens de limiter l'affichage lorsque votre page contient de nombreux éléments DOM.
Évaluation des scripts et tâches longues
Lors du chargement de scripts, le navigateur met un certain temps à les évaluer avant leur exécution, ce qui peut entraîner de longues tâches. Découvrez comment fonctionne l'évaluation des scripts et comment éviter qu'elle n'entraîne de longues tâches lors du chargement de la page.
Créez des expériences WordPress dans le navigateur avec WordPress Playground et WebAssembly
La version complète de WordPress, basée sur PHP, exécutée uniquement dans le navigateur avec WebAssembly
Cumulative Layout Shift (CLS)
Cet article présente la métrique CLS (Cumulative Layout Shift) et explique comment la mesurer.
Nouvelle fonctionnalité pour les développeurs, proposée par WebAssembly
Présentation des outils désormais disponibles sur le Web grâce à WebAssembly.
PWA sur les plates-formes de téléchargement d'applications
Les progressive web apps peuvent être proposées sur des plates-formes de téléchargement d'applications comme le Play Store Android, le Microsoft Store, etc.
Que sont les cartes sources ?
Améliorez l'expérience de débogage Web avec les mappages sources.
6 extraits CSS que tout développeur front-end devrait connaître en 2023
C'est un CSS fiable, performant et fiable que vous pouvez utiliser dès aujourd'hui.
Fonctions trigonométriques en CSS
Calculez le sinus, le cosinus, la tangente, etc. en CSS.
Effectuer des opérations efficaces sur chaque image de la vidéo avec requestVideoFrameCallback()
La méthode requestVideoFrameCallback() permet aux auteurs Web d'enregistrer un rappel qui s'exécute dans les étapes de rendu lorsqu'une nouvelle image vidéo est envoyée au compositeur.
Point fort de la communauté GDE: Lars Knudsen
Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).
Nouveaux modèles pour les applications multimédias
Cet article de blog annonce une nouvelle collection de modèles pour les applications multimédias.
Astuce CSS rapide ! Texte animé en dégradé
Créons cet effet de texte animé avec dégradé à l'aide de propriétés personnalisées de portée et de background-clip. Accédez à CodePen et créez un nouveau canevas. Créez le balisage de votre texte. Utilisons un en-tête avec le mot "Rapide": Ensuite,
Chrometober est en cours de développement !
Ce Chrometober a donné vie à ce livre qui défile, et vous a donné des conseils et astuces amusants et effrayants.
Créer un composant d'info-bulle
Présentation des principes de base de la création d'un élément personnalisé d'info-bulle personnalisé et adaptable aux couleurs.
Se connecter avec une clé d'accès via le remplissage automatique de formulaire
Les clés d'accès rendent les comptes utilisateur d'un site Web plus sûrs, plus simples, plus faciles à utiliser et sans mot de passe. Cet article explique comment concevoir une connexion sans mot de passe avec des clés d'accès tout en tenant compte des utilisateurs existants.
Créer une clé d'accès pour les connexions sans mot de passe
Les clés d'accès rendent les comptes utilisateur d'un site Web plus sûrs, plus simples, plus faciles à utiliser et sans mot de passe. Cet article explique comment autoriser les utilisateurs à créer des clés d'accès pour votre site Web.
Créer un composant de bouton d'action flottant (FAB)
Présentation des principes de base pour créer des composants du bouton d'action flottant qui s'adaptent aux couleurs, réactifs et accessibles.
Bonnes pratiques concernant les polices
Découvrez comment optimiser les polices Web pour les Signaux Web essentiels.
Point fort de la communauté GDE: Alba Silvente Fuentes
Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).
Tester le contraste des couleurs dans une conception Web
Présentation de trois outils et techniques permettant de tester et de vérifier le contraste des couleurs accessible de votre conception.
Astuce CSS rapide ! Chargeur animé
Créons un chargeur CSS animé avec des propriétés personnalisées de portée et animation-timing-function. Accédez à CodePen et créez un nouveau canevas. Créez la balise pour notre chargeur. Notez l'utilisation de propriétés personnalisées intégrées:
Créer la navigation principale d’un site Web
Ce tutoriel explique comment créer une navigation principale accessible sur un site Web. Vous y découvrirez le HTML sémantique, l'accessibilité et la façon dont les attributs ARIA peuvent faire plus de mal que de bien.
Est-ce :modal ?
Ce pseudo-sélecteur CSS très pratique permet de sélectionner des éléments modals.
Styles de la liste de créations
Découvrez des méthodes utiles et créatives pour styliser une liste.
Bonnes pratiques pour les balises et les gestionnaires de balises
Optimiser les balises et les gestionnaires de balises pour les métriques Core Web Vitals
Création d'une illusion de grille tordue
Une exploration amusante des moyens de recréer une illusion d'optique avec le CSS.
Comment Nordhealth utilise-t-elle les propriétés personnalisées de ses composants Web ?
Avantages de l'utilisation des propriétés personnalisées dans les systèmes de conception et les bibliothèques de composants
Contrôle plus précis des transformations CSS grâce à des propriétés de transformation individuelles
Découvrez comment utiliser les propriétés CSS individuelles de traduction, de rotation et de mise à l'échelle pour aborder les transformations de manière intuitive.
Animations de bordure CSS
Examiner plusieurs façons d'animer une bordure en CSS
Comment la BBC déploie-t-elle le mécanisme HSTS pour améliorer la sécurité et les performances ?
La BBC déploie le mécanisme HSTS sur son site Web afin d'améliorer la sécurité et les performances. Découvrez ce que cela signifie et comment le mécanisme HSTS peut vous aider.
En quoi les données de test et les données réelles peuvent être différentes (et comment y remédier)
Découvrez pourquoi les outils qui surveillent les métriques des Signaux Web essentiels peuvent indiquer des chiffres différents et comment interpréter ces différences.
Une situation gagnant-gagnant
GDE Enrique Fernandez Guerra à propos de l'Open Source de son ONG HelpDev.
Fin d'Internet Explorer
Qu'est-ce que la fin de la prise en charge d'Internet Explorer a permis aux clients et aux développeurs de Maersk.com ?
Adieu HTML5Rocks
Cela fait longtemps que HTML5Rocks, ça fait plaisir de vous connaître.
Recettes de cookies propriétaires
Découvrez comment définir des cookies propriétaires pour garantir la sécurité, la compatibilité avec plusieurs navigateurs et minimiser les risques de dysfonctionnement une fois les cookies tiers supprimés.
Synchroniser la lecture audio et vidéo sur le Web
L'API Web Audio permet d'effectuer correctement la synchronisation AV.
Utiliser des dégradés coniques pour créer une bordure sympa
Les dégradés coniques peuvent être utilisés pour créer des effets intéressants, comme cette belle bordure. Ce CodePen créé par Adam Argyle, initialement partagé via ce tweet sur Twitter, montre comment utiliser un dégradé conique pour créer une
Différence entre les bibliothèques et les frameworks JavaScript
Comprenez les différences entre les frameworks et les bibliothèques dans le contexte d'un environnement JavaScript côté client.
Implémenter la gestion des erreurs lors de l'utilisation de l'API Fetch
Interceptez les erreurs lors de l'utilisation de l'API Fetch.
Choisir une bibliothèque ou un framework JavaScript
Comprendre les décisions à prendre concernant l'utilisation d'une bibliothèque ou d'un framework JavaScript
Une API pour des polices Web rapides et esthétiques
Information concernant l'API CSS Google Fonts : fonctionnement, utilisation et ajout efficace de polices Web
Le guide du développeur front-end sur le terminal
Cette ressource peut vous aider à vous repérer rapidement dans le terminal.
GOV.UK supprime jQuery de son interface.
GOV.UK a supprimé sa dépendance jQuery de son interface. Vous ne devinerez jamais ce qui s'est passé. (Oui.)
Créer un composant de bouton
Présentation des bases de la création de composants adaptatifs aux couleurs, réactifs et accessibles.
Ne luttez pas contre l'analyse du préchargement du navigateur
Découvrez ce qu'est l'outil d'analyse de préchargement du navigateur, comment il améliore les performances et comment éviter les obstacles.
Bonnes pratiques pour mesurer les signaux Web sur le terrain
Mesurer les signaux Web avec votre outil d'analyse actuel
Combler le fossé
Concevoir des applications pour le Web plus facilement.
Trouver du courage et de l'inspiration au sein de la communauté des développeurs
Des experts Google Developers sur le Web expliquent comment les programmes de mentorat leur ont permis de devenir des leaders.
Polices variables dans la vie réelle
Partager un guide pratique sur les polices variables, avec de nombreux exemples.
Créez rapidement de magnifiques dégradés CSS avec CSS Gradient Creator
Cet outil conçu par Josh W Comeau vous permet de créer très facilement des dégradés à l'aspect esthétique.
Présentation détaillée des principales difficultés rencontrées par les développeurs Web
Ensemble d'insights sur les principaux points de contrariété, recueillis à partir de plusieurs conversations avec des développeurs Web.
Améliorez l'image de votre site avec images.tooling.report
Vérifiez l'état des outils d'image.
Champ d'application des variables globales et locales
Découvrez le champ d'application et son fonctionnement en JavaScript.
Créer un composant de boîte de dialogue
Présentation des principes de base pour créer des mini et méga boîtes de dialogue modales adaptatives aux couleurs, responsives et accessibles à l'aide de l'élément ".
Déboguer les erreurs de lecture multimédia sur le Web
Découvrez comment déboguer les erreurs de lecture multimédia sur le Web.
Point fort de la communauté GDE: Nishu Goel
Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).
Effets des performances d'un chargement différé trop important
Charger les images dans la fenêtre d'affichage initiale (tout en chargeant le reste de manière différée) peut améliorer les Core Web Vitals tout en chargeant moins d'octets.
Créer un composant de barre de chargement
Présentation des principes de base de la création d'une barre de chargement accessible et adaptative avec l'élément ``.
Enregistrer des identifiants depuis Forms
Simplifiez au maximum vos formulaires d'inscription et de connexion. Enregistrez les identifiants des formulaires de connexion pour que les utilisateurs n'aient pas à se reconnecter lorsqu'ils reviennent. Pour stocker les identifiants utilisateur à
Chrome et Firefox vont bientôt atteindre la version majeure 100
Modifications apportées à la chaîne user-agent, stratégies adoptées par Chrome et Firefox pour atténuer l'impact, et comment vous pouvez les aider.
Créer un favicon adaptatif
Présentation des principes de base de la création d'un favicon adaptatif.
Dessiner sur un canevas dans Emscripten
Découvrez comment effectuer le rendu de graphiques 2D sur un canevas sur le Web à partir de WebAssembly avec Emscripten.
Améliorez la sécurité et la confidentialité en mettant à jour le cache HTTP
L'oubli ou l'utilisation abusive de l'en-tête Cache-Control peuvent avoir un impact négatif sur la sécurité de votre site Web et la confidentialité de vos utilisateurs. Obtenez des recommandations pour les sites Web très intéressants.
Éléments HTML supplémentaires
Métriques essentielles pour un site opérationnel
Portage d'applications USB sur le Web Partie 2: gPhoto2
Découvrez comment gPhoto2 a été transféré vers WebAssembly pour contrôler des caméras externes via USB à partir d'une application Web.
Journalisation des erreurs réseau (NEL)
Utilisez Network Error Logging (NEL) pour collecter les erreurs réseau côté client.
Détection des fonctionnalités WebAssembly
Découvrez comment utiliser les dernières fonctionnalités de WebAssembly tout en répondant aux besoins des utilisateurs sur tous les navigateurs.
Portage d'applications USB sur le Web Partie 1: libusb
Découvrez comment transférer sur le Web du code qui interagit avec des appareils externes grâce aux API WebAssembly et Fugu.
Créer un composant de changement de thème
Présentation des principes de base de la création d'un composant de changement de thème adaptatif et accessible.
Intégrer des extraits de code JavaScript en C++ avec Emscripten
Découvrez comment intégrer du code JavaScript dans votre bibliothèque WebAssembly pour communiquer avec le monde extérieur.
PWA sur Oculus Quest 2
L'Oculus Quest 2 est un casque de réalité virtuelle créé par Oculus, une division de Meta. Les développeurs peuvent désormais créer et distribuer des progressive web apps (PWA) 2D et 3D, qui s'appuient sur la fonctionnalité multitâche d'Oculus Quest 2. Cet article décrit l'expérience et explique comment créer, télécharger et tester votre PWA dans l'Oculus Quest 2.
Conception de bâtiments
Un aperçu du processus et des outils utilisés pour créer l’expérience de style agenda des fêtes de Designcember.
Calculatrice de conception
Tentative skeuomorphe de recréer une calculatrice solaire sur le Web qui utilise le capteur de luminosité ambiante et la fonctionnalité de superposition des commandes de fenêtres.
Copie approfondie en JavaScript avec structuredClone
Pendant très longtemps, vous avez dû recourir à des solutions de contournement et à des bibliothèques pour créer une copie profonde d'une valeur JavaScript. La plate-forme est désormais fournie avec `structuredClone()`, une fonction intégrée de copie profonde.
Créer un composant de toast
Présentation des principes de base de la création d'un composant de toast adaptatif et accessible.
Fonds UI
Annonce du fonds pour l'interface utilisateur de Chrome, conçu pour offrir des subventions aux personnes travaillant sur les outils de conception, les feuilles de style CSS et le langage HTML.
Créer un composant de menu de jeu en 3D
Présentation des principes de base de la création d'un menu de jeu 3D réactif, adaptatif et accessible.
Toutes les annonces du Chrome Dev Summit 2021
Un résumé de toutes les annonces clés du Chrome Dev Summit 2021, ainsi que les liens pour en savoir plus
Vers une métrique de fluidité de l'animation
Découvrez comment mesurer des animations, prendre en compte les frames d'animation et la fluidité globale de la page.
Nouveautés de PageSpeed Insights
Découvrez les dernières informations de PageSpeed Insights pour vous aider à mieux mesurer et optimiser la qualité de vos pages et de votre site.
Parcours utilisateur Lighthouse
Essayez une nouvelle API Lighthouse pour mesurer les performances et les bonnes pratiques tout au long d'un parcours utilisateur.
Parcours de Photoshop vers le Web
Au cours des trois dernières années, Chrome s'efforce d'optimiser les applications Web qui repoussent les limites du navigateur. L'une de ces applications Web est Photoshop. Il y a quelques années à peine, l'idée d'exécuter un logiciel aussi complexe que Photoshop directement dans un navigateur aurait été difficile à imaginer. Cependant, grâce à l'utilisation de différentes nouvelles technologies Web, Adobe propose désormais une version bêta publique de Photoshop sur le Web.
Créer un composant à sélection multiple
Présentation des principes de base de la création d'un composant à sélection multiple réactif, adaptatif et accessible pour trier et filtrer les expériences utilisateur.
Évaluer les performances de chargement sur le terrain avec Navigation Timing et Resource Timing
Découvrez les principes de base de l'utilisation des API Navigation et Resource Timing pour évaluer les performances de chargement sur le terrain.
Manipulation DOM sécurisée avec l'API Sanitizer
La nouvelle API Sanitizer vise à créer un processeur robuste pour insérer des chaînes arbitraires dans une page en toute sécurité. Cet article présente l'API et explique son utilisation.
Bonnes pratiques concernant les intégrations tierces
Ce document présente les bonnes pratiques en matière de performances à suivre lors du chargement d'intégrations tierces, des techniques de chargement efficaces et l'outil Layout Shift Terminator qui permet de réduire les décalages de mise en page pour les intégrations courantes.
Impact des architectures SPA sur les Signaux Web essentiels
Réponses aux questions courantes sur les applications monopages, les signaux Web essentiels et le plan de Google pour répondre aux limites actuelles de mesure.
Présentation détaillée des événements JavaScript
preventDefault et stopPropagation: quand utiliser l'une ou l'autre et quelle est la fonction exacte de chaque méthode. La gestion des événements JavaScript est souvent simple. C'est particulièrement vrai lorsque vous travaillez avec une structure
Regroupement de ressources non-JavaScript
Découvrez comment importer et regrouper différents types d'éléments à partir de JavaScript pour qu'ils fonctionnent à la fois dans les navigateurs et dans les bundles.
Créer un composant de bouton "split-button"
Présentation des principes de base de la création d'un composant "split-button" accessible