Découvrez quelques-unes des fonctionnalités intéressantes qui ont été intégrées aux navigateurs Web stables et bêta en mars 2023.
Versions stables des navigateurs
En mars 2023, Firefox 111, Chrome 111 et Safari 16.4 sont devenus stables. Voyons ce que cela signifie pour la plate-forme Web.
Attributs HTML globaux
Firefox 111 prend désormais en charge quelques attributs HTML globaux utiles. L'attribut autocapitalize détermine si le texte peut être automatiquement mis en majuscules lorsque l'utilisateur saisit du texte sur un clavier virtuel.
L'attribut translate indique si un élément doit être traduit lorsqu'une page est localisée.
Système de fichiers privés d'origine (OPFS)
Firefox prend en charge OPFS (Origin Private File System) lors de l'utilisation de l'API File System Access. En savoir plus sur OPFS
API View Transitions
Chrome 111 ajoute l'API View Transitions, ce qui simplifie la création de transitions soignées dans les applications monopages (SPA) en créant un instantané des vues et en permettant au DOM de changer sans aucun chevauchement entre les états.
Pour en savoir plus, consultez le lancement après le lancement des transitions de vue de l'application monopage dans Chrome 111.
Nouveaux espaces de couleur et fonctions CSS
Chrome 111 inclut également de toutes nouvelles façons d'utiliser la couleur sur le Web. Chrome est désormais compatible avec les espaces de couleur qui accèdent aux couleurs en dehors de la gamme RVB, avec les fonctions color() et color-mix(). Pour en savoir plus, consultez notre guide des couleurs CSS haute définition et notre article de blog sur color-mix().
La version de Chrome inclut également de nouveaux outils de développement pour vous aider à utiliser cette nouvelle fonctionnalité de couleur.
Plus de contrôle sur :nth-child() sélection(s)
Chrome 111 permet de transmettre une liste de sélecteurs à :nth-child() et nth-last-child(). Pour en savoir plus et voir des exemples, consultez l'article Meilleur contrôle des sélections :nth-child() avec la syntaxe S.
Navigateurs pris en charge
- 111
- 111
- 113
- 9
Prise en charge de la diapositive précédente et suivante de l'API Media Session
Enfin, dans cette liste d'ajouts Chrome 111, il y a les actions de présentation de diapositives pour l'API de session multimédia : "previousslide" et "nextslide".
Navigateurs pris en charge
- 111
- 111
- x
- x
Pseudo-classe dans Safari
Safari 16.4 est une version exceptionnelle de la plate-forme Web. Cet article ne couvre pas tous les ajouts. Nous vous invitons donc à consulter la liste complète des fonctionnalités dans les notes de version de Safari 16.4.
De nombreuses pseudo-classes CSS supplémentaires sont compatibles avec cette version: :user-invalid, :user-valid, :dir(), :modal et :fullscreen.
Nouvelle syntaxe de plage pour les requêtes média
Cette version de Safari rend interopérable la syntaxe de plage beaucoup plus élégante et utile pour les requêtes média sur les trois moteurs. Vous trouverez des exemples de cette syntaxe dans cet article, publié lors de l'expédition de la syntaxe dans Chrome.
Propriétés et valeurs CSS
Safari 16.4 est compatible avec @property, ce qui permet d'enregistrer des propriétés personnalisées CSS directement dans une feuille de style. Pour en savoir plus, consultez la section @property: Submit Superpowers to CSS variables (@property : donner des superpouvoirs aux variables CSS).
Compatibilité avec l'API CSS
Les ajouts intéressants pour CSS ne cessent de s'ajouter à ceux du CSS Typed OM. Cette API expose les valeurs CSS en tant qu'objets JavaScript typés plutôt qu'en tant que chaînes. Il facilite l'utilisation de CSS à partir de JavaScript et s'avère plus performant que les méthodes existantes.
Les feuilles de style constructibles avec CSSStyleSheet() sont également acceptées. Cette option permet de partager des feuilles de style entre un document et ses sous-arborescences Shadow DOM. Dans cette version de Safari, les feuilles de style constructibles sont désormais prises en charge dans les trois moteurs.
Web Push et API Badging
Safari est désormais compatible avec Web Push, de même que l'API Badging, ce qui est une excellente nouvelle pour les développeurs d'applications. En particulier, avec cette version, les notifications push sont compatibles avec tous les principaux moteurs.
Importer des cartes
Un autre ajout qui permet d'améliorer l'état interopérable est l'ajout de l'option JavaScript Import maps, qui facilite considérablement l'importation de modules ES.
Navigateurs pris en charge
- 89
- 89
- 108
- 16.4
Versions bêta des navigateurs
Les versions bêta du navigateur vous donnent un aperçu des nouveautés de la prochaine version stable du navigateur. C'est le moment idéal pour tester de nouvelles fonctionnalités, ou des suppressions, qui pourraient avoir un impact sur votre site avant que le monde ne soit lancé. Les nouvelles versions bêta sont Firefox 112, Safari 16.5 et Chrome 112. Ces versions apportent de nombreuses fonctionnalités intéressantes à la plate-forme. Consultez les notes de version pour obtenir tous les détails, dont voici quelques-unes des principales.
Firefox 112 est compatible avec l'attribut inert, qui rend cet attribut utile disponible sur tous les moteurs. Pour en savoir plus sur le format inerte, consultez l'article Présentation de l'environnement inerte. Firefox accepte également la fonction de lissage de vitesse linear().
Chrome 112 et Safari 16.5 sont tous deux compatibles avec l'imbrication CSS, très attendue par de nombreux développeurs.
Chrome 112 est également compatible avec animation-composition. Pour en savoir plus sur le fonctionnement de cette propriété, consultez la section Spécifier la composition de plusieurs effets d'animation avec la composition d'une animation.
Si vous utilisez le mode headless de Chrome, par exemple avec Puppeteer, 112 propose un tout nouveau mode headless. Pour en savoir plus, consultez Une mise à niveau du mode headless de Chrome.
Fait partie de l'événement New to the Web Series