Découvrez certaines des fonctionnalités intéressantes qui ont été intégrées aux navigateurs Web stables et bêta en mars 2023.
Versions stables du navigateur
En mars 2023, Firefox 111, Chrome 111 et Safari 16.4 sont devenus stables. Voyons ce que cela implique pour la plate-forme Web.
Attributs HTML globaux
Firefox 111 est compatible avec quelques attributs HTML globaux utiles. L'attribut autocapitalize détermine si le texte peut être automatiquement mis en majuscule 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 ajoute la compatibilité avec le système de fichiers privés d'origine (OPFS, Origin Private File System) lors de l'utilisation de l'API File System Access. En savoir plus sur le service 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 en créant des instantanés des vues et en permettant au DOM de changer sans qu'il y ait de chevauchement entre les états.
Pour en savoir plus, consultez le lancement des transitions d'affichage de l'application monopage dans Chrome 111 après le lancement.
Nouveaux espaces de couleur et fonctions CSS
Chrome 111 propose également de nouvelles façons d'utiliser la couleur sur le Web. Chrome accepte désormais les espaces de couleur qui accèdent aux couleurs en dehors de la gamme RVB, ainsi que les fonctions color() et color-mix(). Pour en savoir plus, consultez notre guide des couleurs CSS en haute définition et notre article de blog sur color-mix().
Cette version inclut également de nouveaux outils de développement qui vous aideront à utiliser cette nouvelle fonctionnalité de couleur.
Plus de contrôle sur les sélections :nth-child()
Chrome 111 permet de transmettre une liste de sélection à :nth-child() et nth-last-child(). Pour en savoir plus et consulter des exemples, consultez l'article Contrôler davantage les sélections :nth-child() avec la syntaxe de S.
Navigateurs pris en charge
- 111
- 111
- 113
- 9
Prise en charge des diapositives précédente et suivante dans l'API Media Session
Enfin, dans cette liste des ajouts de Chrome 111, vous trouverez 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
Prise en charge de la pseudo-classe dans Safari
Safari 16.4 est une version incroyable pour la plateforme Web. Cet article ne couvrira pas tous les ajouts. Consultez 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 la syntaxe de plage bien plus élégante et utile pour les requêtes média interopérables sur les trois moteurs. Vous trouverez des exemples de cette syntaxe dans cet article, publié au même moment que Chrome.
Propriétés et valeurs CSS
Safari 16.4 est compatible avec @property, ce qui permet d'enregistrer une propriété CSS personnalisée directement dans une feuille de style. Pour en savoir plus, consultez l'article @property: donner des superpouvoirs aux variables CSS.
Compatibilité avec l'API CSS
Les ajouts intéressants pour CSS ne cessent d'apparaître, avec la prise en charge de CSS Typed OM. Cette API expose les valeurs CSS en tant qu'objets JavaScript typés plutôt que sous la forme de chaînes. Elle facilite l'utilisation de CSS à partir de JavaScript et est plus performante que les méthodes existantes.
Les feuilles de style constructibles avec CSSStyleSheet() sont également compatibles. Cela permet le partage de feuilles de style entre un document et ses sous-arborescences DOM. Avec cette version de Safari, les feuilles de style constructibles sont désormais compatibles avec les trois moteurs.
Web Push et API Badging
Safari est désormais compatible avec Web Push, ainsi que l'API Badging, ce qui est une excellente nouvelle pour les développeurs d'applications. En particulier, cette version signifie que les notifications push sont compatibles avec tous les principaux moteurs.
Importer des cartes
Un autre ajout d'une fonctionnalité à l'état interopérable est l'ajout de JavaScript Import Maps, qui facilite considérablement l'importation des modules ES.
Navigateurs pris en charge
- 89
- 89
- 108
- 16.4
Versions bêta des navigateurs
Les versions bêta vous donnent un aperçu de ce qui sera disponible dans 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 qu'elles soient publiées. 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. Pour en savoir plus, consultez les notes de version, dont quelques-unes des principales caractéristiques.
Firefox 112 est compatible avec l'attribut inert, ce qui rend cet attribut utile disponible sur tous les moteurs. Pour en savoir plus sur l'inertie, consultez la section Présentation de l'inerte. Firefox est également compatible avec la fonction de lissage de vitesse linear().
Chrome 112 et Safari 16.5 sont tous deux compatibles avec l'imbrication CSS, une fonctionnalité 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 comment plusieurs effets d'animation doivent être composés avec animation-composition.
Si vous utilisez le mode headless de Chrome, par exemple avec Puppeteer, la version 112 apporte un tout nouveau mode headless. Pour en savoir plus, consultez la mise à niveau du mode headless de Chrome.
Fait partie de la série Web "New to the Web Series"