Publié le 17 juillet 2026
Bienvenue dans le récapitulatif mensuel de Baseline. En juin 2026, field-sizing est devenu Baseline Newly available, ce qui permet aux commandes de formulaire de s'adapter automatiquement à leur contenu. Parallèlement, un large éventail de fonctionnalités CSS, HTML et Web API ont atteint le statut Baseline Widely available, ainsi que des mises à jour importantes de la communauté des développeurs.
Alertes Baseline sur l'état de la plate-forme Web
Il est désormais plus facile de savoir quand les fonctionnalités Web deviennent interopérables grâce aux alertes Baseline sur le tableau de bord État de la plate-forme Web. En vous connectant avec GitHub, vous pouvez vous abonner aux notifications pour les fonctionnalités lorsqu'elles deviennent Baseline Newly available, Widely available ou reçoivent de nouvelles implémentations de navigateur. Vous pouvez configurer les abonnements pour envoyer des mises à jour par e-mail ou des flux RSS personnalisés selon un calendrier mensuel, hebdomadaire ou immédiat. Vous pouvez limiter les alertes aux recherches enregistrées (comme toutes les fonctionnalités HTML), créer des newsletters personnalisées, générer des listes de fonctionnalités partageables ou configurer des Webhooks Slack pour informer votre équipe d'ingénierie.
Pour en savoir plus, consultez Présentation des alertes Baseline.
Fonctionnalités Baseline Newly available
Les fonctionnalités de cette section sont compatibles depuis juin 2026 dans l'ensemble de navigateurs principaux et sont désormais Baseline Newly available.
field-sizing
La propriété CSS field-sizing permet de contrôler le comportement de dimensionnement des
éléments de formulaire, tels que <textarea>, <input>, et <select>—qui ont traditionnellement
des dimensions fixes par défaut. Avec field-sizing: content, les commandes de formulaire s'agrandissent ou se réduisent automatiquement pour s'adapter à leur contenu, ce qui réduit le besoin de scripts de redimensionnement automatique JavaScript personnalisés.
Pour en savoir plus, consultez la page de référence MDN pour field-sizing.
Fonctionnalités Baseline Widely available
Les fonctionnalités suivantes sont devenues Baseline Widely available, ce qui signifie qu'elles sont désormais largement compatibles et utilisables dans vos projets.
Pseudo-classe :has()
Le sélecteur parent CSS :has() vous permet de styliser un élément en fonction de ses descendants ou de ses frères et sœurs suivants. Cette pseudo-classe fonctionnelle permet d'utiliser des modèles de mise en page conditionnels directement dans CSS sans avoir besoin de JavaScript pour inspecter les structures DOM.
Pour en savoir plus, consultez la page MDN pour la pseudo-classe :has.
HTMLIFrameElement.loading
La propriété loading des éléments <iframe> permet le chargement différé des frames intégrées. En spécifiant loading="lazy", les navigateurs diffèrent le chargement des iframes hors écran
jusqu'à ce qu'ils soient déplacés près de la fenêtre d'affichage, ce qui permet d'économiser de la bande passante réseau et de réduire la surcharge de chargement initial
de la page.
Pour en savoir plus, consultez la référence MDN pour HTMLIFrameElement.loading.
CanvasRenderingContext2D.reset()
La méthode reset() sur les contextes de canevas 2D efface l'état du contexte de dessin, en rétablissant les valeurs par défaut des propriétés telles que les transformations, les chemins de découpage, les styles de ligne et les styles de remplissage. Cela permet de réutiliser un contexte de canevas de manière propre sans nettoyage manuel des propriétés.
Pour en savoir plus, consultez la documentation MDN pour CanvasRenderingContext2D.reset.
Unité de longueur cap
L'unité relative à la police cap correspond à la hauteur nominale des majuscules de la police de l'élément. Elle vous permet d'aligner et de dimensionner des éléments par rapport à la hauteur des lettres majuscules, ce qui permet de créer des mises en page typographiques précises.
Pour en savoir plus, consultez la référence MDN pour les unités de longueur.
Propriété counter-set
La propriété CSS counter-set définit un compteur CSS sur une valeur spécifiée, en complément de counter-reset et counter-increment. Elle permet de contrôler la manipulation des listes numérotées, des plans de document ou des séquences de compteurs personnalisées.
Pour en savoir plus, consultez la page MDN pour counter-set.
createImageBitmap()
La méthode statique createImageBitmap() crée une image bitmap asynchrone
à partir de différentes sources d'image, y compris <img>, <canvas>, Blob, ou
ImageData. Comme elle décode les images en dehors du thread principal, elle évite de bloquer les performances de l'interface utilisateur lors de la gestion de graphiques de canevas complexes.
Pour en savoir plus sur l'implémentation, consultez la documentation MDN pour createImageBitmap.
Type de données <easing-function>
Le type de données CSS <easing-function> décrit les courbes mathématiques de taux de variation
pour les transitions et les animations. Au-delà des mots clés standards tels que ease-in ou cubic-bezier(), il est compatible avec des fonctions telles que linear() pour créer des effets de ressort ou de rebond personnalisés.
Pour savoir comment l'utiliser, consultez la référence MDN pour easing-function.
Sélecteur d'imbrication &
Le sélecteur d'imbrication & ancre explicitement les sélecteurs de règles enfants à leur sélecteur parent lorsque vous utilisez l'imbrication CSS intégrée. Il garantit la clarté et l'exactitude des règles de spécificité lors de la définition d'états d'activation, de mise au point ou de pseudo-classe imbriqués.
Pour en savoir plus, consultez le guide MDN pour le sélecteur d'imbrication.
Préchargement réactif avec rel="preload"
L'attribut media des éléments <link rel="preload"> permet le préchargement réactif
des éléments clés. En combinant rel="preload" avec des requêtes média,
les navigateurs ne téléchargent que les éléments correspondant à la largeur de la fenêtre d'affichage ou aux caractéristiques d'affichage de l'utilisateur au début du cycle de vie du chargement.
Pour savoir comment l'utiliser, consultez la documentation MDN pour rel="preload".
HTMLMediaElement.preservesPitch
La propriété preservesPitch des éléments <audio> et <video> contrôle
si le navigateur ajuste la hauteur du son lors de la modification de playbackRate.
Si vous la définissez sur false, vous pouvez modifier la hauteur du son lorsque vous accélérez ou ralentissez la lecture du contenu multimédia.
Pour en savoir plus, consultez la page MDN pour HTMLMediaElement.preservesPitch.
Pseudo-classe :dir()
La pseudo-classe CSS :dir() correspond aux éléments en fonction du sens du texte
(par exemple, ltr ou rtl), en fonction du sens hérité des attributs HTML tels que
dir ou du contexte de texte calculé.
Pour en savoir plus, consultez la page MDN pour la pseudo-classe :dir.
Fonction mathématique pow()
La fonction CSS pow() calcule les valeurs de puissance exponentielle directement dans les déclarations CSS, en élevant un nombre de base à un exposant (par exemple, pow(2, 3)). Cela simplifie la mise à l'échelle réactive et les relations mathématiques de la grille.
Pour en savoir plus, consultez la référence MDN pour la fonction pow.
Propriété CSS mask
La propriété CSS raccourcie mask masque des parties d'un élément à l'aide d'images ou de dégradés comme calques de découpage. Elle combine des sous-propriétés telles que mask-image, mask-position et mask-repeat pour créer des effets de masquage visuels complexes.
Pour en savoir plus, consultez la page MDN pour la propriété mask property.
@media (scripting)
La fonctionnalité média scripting teste si les scripts côté client (tels que JavaScript) sont activés et disponibles dans le contexte du navigateur. Cela permet aux styles d'amélioration progressive de cibler les environnements avec ou sans JavaScript actif.
Pour en savoir plus, consultez la référence MDN pour la fonctionnalité média scripting.
URL.canParse()
La méthode statique URL.canParse() vérifie si une chaîne donnée est une URL valide,
analysable (avec une URL de base facultative) sans générer d’exception,
ce qui simplifie la validation de l’URL au moment de l’exécution avant d’instancier des objets URL.
Pour en savoir plus sur l'implémentation, consultez la documentation MDN pour URL.canParse.
API Storage Access
L'API Storage Access fournit un mécanisme permettant aux contenus intersites intégrés
dans des <iframe> tiers de demander l'accès aux cookies et au stockage non partitionnés, ce qui permet l'authentification et les interactions avec état au-delà des limites de domaine.
Pour en savoir plus, consultez la page MDN pour l'API Storage Access API.
Conclusion
Si nous avons oublié quelque chose concernant Baseline, n'hésitez pas à nous le signaler afin que nous puissions l'inclure dans une prochaine édition. Si vous avez des questions ou souhaitez nous faire part de vos commentaires sur Baseline, vous pouvez signaler un problème dans notre outil de suivi des problèmes.