Lors de Google I/O, j'ai partagé des informations sur l'évolution de Baseline depuis notre annonce précédente : l'année dernière. j'ai annoncé le tableau de bord Web Platform, les intégrations avec RUM Archive et RUMvision. Cet article rassemble toutes les ressources de la discussion en un seul endroit.
Le tableau de bord de la plate-forme Web est une nouvelle façon intéressante de visualiser l'ensemble de la plate-forme Web, ainsi que le parcours de fonctionnalités individuelles vers l'interopérabilité et l'intégration de Baseline. Pour en savoir plus, consultez la page Annonce du tableau de bord de la plate-forme Web.
L'intégration de Baseline aux outils que vous utilisez quotidiennement a toujours fait partie de la vision de ce projet. Nous voulons que la gestion de la compatibilité des navigateurs ne vous prenne pas beaucoup de temps. Apprenez-en plus sur l'intégration de l'archive RUM et consultez régulièrement cet espace pour obtenir des informations sur d'autres fournisseurs d'outils.
Nouveau dans la version de référence
Lors de la conférence I/O, j'ai partagé 12 fonctionnalités de la plate-forme Web qui ont récemment été intégrées à Baseline Newly Available. Ces fonctionnalités sont désormais disponibles dans Chrome, Edge, Firefox et Safari. Elles vont des petits ajouts qui peuvent simplifier le développement à certaines des fonctionnalités les plus demandées par les développeurs, y compris les requêtes de conteneur et :has().
Dimensionner les requêtes de conteneur
Les requêtes de conteneur de taille vous permettent de modifier votre conception en fonction de la largeur ou de la taille intégrée d'un conteneur, plutôt que de pouvoir cibler uniquement la taille de la fenêtre d'affichage avec des requêtes média. Cela permet d'utiliser des composants plus réutilisables qui peuvent se modifier en fonction de l'espace disponible lorsqu'ils sont placés dans une mise en page. Elles figurent en tête des fonctionnalités les plus recherchées depuis presque aussi longtemps que le concept de responsive design existe.
- Nouveauté en février 2023.
- Disponible pour tous à partir d'août 2025.
Pour en savoir plus sur les requêtes de conteneur sur MDN, consultez la section Les requêtes de conteneur arrivent dans des navigateurs stables et découvrez comment d'autres équipes de développement en tirent profit dans les études de cas sur les requêtes de conteneur.
Sélecteur de :has()
Le sélecteur :has() nous fournit un élément qui était une autre demande fréquente des développeurs depuis de nombreuses années : un sélecteur parent, un moyen de sélectionner un élément en fonction de son contenu. Toutefois, :has() peut être bien plus que cela.
Comme pour les requêtes de conteneur, cela est incroyablement utile lors de la création de composants réutilisables, car vous pouvez créer un seul composant qui peut s'adapter à son contenu.
- Nouveauté : décembre 2023.
- Bientôt disponible à partir de juin 2026.
Pour en savoir plus sur :has() sur MDN, consultez la page Sélecteur de famille pour :has() et les études de cas :has().
Sous-grille de mise en page en grille CSS
Une sous-grille permet à une mise en page de grille imbriquée d'hériter des pistes de son parent. Elle permet un meilleur alignement des éléments dans les grilles imbriquées.
- Nouveauté : décembre 2023.
- Bientôt disponible à partir de juin 2026.
Apprenez-en plus sur le sous-réseau MDN et le sous-réseau CSS, qui renvoie à un grand nombre d'autres ressources.
Imbrication CSS
Ces dernières années, le CSS s'est inspiré des caractéristiques utilisées par les développeurs dans les préprocesseurs tels que Sass. Par exemple, les propriétés personnalisées CSS, souvent appelées variables CSS, sont une fonctionnalité très répandue qui permet de définir des variables telles que les couleurs en un seul endroit et de les utiliser dans votre CSS. Auparavant disponible uniquement avec un préprocesseur.
L'imbrication est une autre caractéristique des préprocesseurs. L'imbrication permet d'éviter la répétition des sélecteurs et améliore la lisibilité du code CSS, car les éléments associés peuvent être regroupés plus facilement.
- Disponible dès août 2023
- Disponible pour tous en février 2026
En savoir plus sur l'imbrication CSS sur MDN et l'imbrication CSS
L'élément HTML <search>
La recherche est un élément qui apparaît sur de nombreux sites et applications. Toutefois, jusqu'à récemment, il n'existait aucun élément permettant de baliser les fonctionnalités de recherche ou de filtrage sur une page. L'élément <search> a été conçu à cette fin. Il s'agit d'un élément dans lequel vous pouvez placer un formulaire de recherche ou d'autres éléments utilisés pour filtrer les résultats.
- Disponible dès octobre 2023
- Disponible pour tous en avril 2026
En savoir plus sur l'élément <search> sur MDN
Vidéo responsive
Cette fonctionnalité permet d'utiliser l'élément <source> dans un élément <video> pour diffuser une vidéo de taille appropriée sur différents appareils de la même manière que des images de tailles différentes.
- Disponible dès novembre 2023
- Disponible pour tous en mai 2026
Pour en savoir plus sur MDN, consultez les sections Élément source multimédia ou élément source de l'image et Utiliser une vidéo responsive.
Attribut inert
Lorsqu'un élément est inerte, il ne peut pas faire l'objet d'une interaction. Par exemple, lors de l'ouverture d'une boîte de dialogue, il est impossible de cliquer sur les éléments qui se trouvent sur la page derrière la boîte de dialogue ou d'y accéder par onglets. L'attribut inerte vous permet de contrôler l'inertie de n'importe quelle partie de votre interface utilisateur.
Lorsque l'attribut inert est appliqué à un élément, les événements de clic ne sont pas déclenchés si l'utilisateur clique sur l'élément, ne peut pas être sélectionné, l'élément et son contenu sont masqués des technologies d'assistance, car ils sont exclus de l'arborescence d'accessibilité.
- Disponible depuis avril 2023
- Largement disponible en octobre 2025
Apprenez-en davantage sur l'attribut inerte sur MDN ainsi que sur l'attribut inerte.
La fonction color-mix()
La fonction color-mix() permet de mélanger une couleur dans une autre, dans n'importe quel espace colorimétrique disponible, ce qui inclut tous les nouveaux modèles de couleur (LCH, Lab, OKLCH et OKLab) qui ont récemment été intégrés à la nouvelle version de Baseline disponible.
- Disponible depuis avril 2023
- Largement disponible en octobre 2025
En savoir plus sur color-mix() sur MDN et sur CSS color-mix() Jetez également un œil à gradient.style pour jouer avec ces nouvelles couleurs et créer de magnifiques dégradés.
:user-valid et :user-invalid
Les pseudo-classes :valid et :invalid sont largement disponibles dans les navigateurs et indiquent si un élément de formulaire est actuellement valide selon les règles de contrainte qui lui sont appliquées, ou non valide. Par conséquent, si vous avez un champ avec un type d'adresse e-mail et qu'il contient un nom, la pseudo-classe :invalid le sélectionne et vous pouvez ajouter une couleur ou une icône pour montrer qu'il doit être corrigé.
Le problème avec les pseudo-classes :valid et :invalid est qu'elles s'appliquent avant que l'utilisateur n'ait interagi avec un formulaire. Par conséquent, si un élément de formulaire est requis et que l'utilisateur ne l'a pas encore rempli, votre style non valide s'affiche. En règle générale, vous ne souhaitez afficher un style non valide que lorsqu'un utilisateur a saisi des données de manière incorrecte ou a ignoré un champ et l'a laissé vide.
Pour améliorer l'expérience utilisateur dans cette situation, utilisez les pseudo-classes :user-valid et :user-invalid. Ils se comportent à peu près de la même manière, sauf qu'ils ne correspondent qu'une fois qu'un utilisateur a interagi avec le champ. Ainsi, dans l'exemple d'un champ obligatoire, l'utilisateur doit avoir cliqué sur le champ ou cliqué sur la touche Tab, puis avoir quitté le champ sans l'avoir rempli pour que l'état non valide s'affiche.
- Disponible dès octobre 2023
- Disponible pour tous en avril 2026
Apprenez-en plus sur :user-valid et :user-invalid sur MDN.
Flux de compression
De nombreuses applications Web doivent proposer un téléchargement à l'utilisateur dans un format compressé, tel qu'un fichier ZIP. Auparavant, l'application devait inclure une bibliothèque de compression, un code qui augmentait la taille de l'application pour tous les utilisateurs. L'API Compression Streams vous offre un moyen intégré de compresser un flux de données.
- Nouveauté en mai 2023
- Disponible pour tous en novembre 2025
Pour en savoir plus sur l'API Compression Streams sur MDN, consultez la section Les flux de compression sont désormais compatibles avec tous les navigateurs.
L'ombre déclarative Shadow DOM
Le Shadow DOM déclaratif est un nouveau moyen de créer une arborescence fantôme à partir de HTML. Auparavant, vous ne pouviez créer une arborescence fantôme à partir de JavaScript qu'à l'aide de attachShadow(). Pouvoir effectuer cette opération à partir de HTML est particulièrement utile dans les environnements où JavaScript peut ne pas être exécuté, tels qu'un client de messagerie. Il est également important pour les composants Web affichés côté serveur.
- Nouveauté en février 2024
- Disponible pour tous en août 2026
En savoir plus sur Declarative Shadow DOM
API Popover
Les pop-ups sont utilisés pour de nombreuses tâches différentes dans nos applications Web. Par exemple, les menus, les toasts personnalisés et les sélecteurs de contenu. Il existe désormais un moyen intégré de créer ces pop-ups de manière décorative avec l'API Popover.
- Disponible depuis avril 2024
- Largement disponible en octobre 2026
Apprenez-en plus sur l'API Popover sur MDN, sur l'API Popover dans Baseline et dans les études de cas de Popover.
Ces 12 fonctionnalités ne sont qu'un aperçu des nouveautés de la nouvelle version de référence disponible. Vous pouvez en découvrir davantage sur ce site. Découvrez toutes les fonctionnalités qui ont été incluses dans Baseline 2023 et l'ensemble croissant de fonctionnalités incluses dans Baseline 2024.