Nouveaux utilisateurs sur la plate-forme Web en décembre

Découvrez certaines des fonctionnalités intéressantes qui ont été disponibles dans les navigateurs Web stables et bêta en décembre 2023.

Versions stables du navigateur

En décembre 2023, Firefox 121, Chrome 120 et Safari 17.2 sont devenus stables. Cet article explique ce que cela signifie pour la plate-forme Web.

Analyse flexible pour l'imbrication CSS

Chrome 120 et Safari 17.2 incluent une analyse flexible pour l'imbrication CSS. Comme il est pris en charge dans Firefox depuis la version 117, cela signifie que tous les principaux moteurs prennent en charge ce changement de syntaxe.

Accordéons exclusifs avec l'élément <details>

Chrome 120 et Safari 17.2 sont compatibles avec l'attribut name pour l'élément <details>. Cela signifie que vous pouvez créer des composants en accordéon exclusifs en regroupant plusieurs éléments <details>.

Apprenez-en plus en accordéon exclusif.

Navigateurs pris en charge

  • 120
  • 120
  • x
  • 17.2

Sélecteur :has()

Firefox 121 inclut le sélecteur CSS :has(). Cette version rend :has() interopérable sur tous les principaux moteurs.

Pour en savoir plus, consultez :has(): l'outil de sélection de famille.

Navigateurs pris en charge

  • 105
  • 105
  • 121
  • 15,4

Source

API CSS Custom Highlight

Safari 17.2 inclut l'API CSS Custom Highlight qui vous permet de créer des plages de texte et d'appliquer un style, étendant ainsi les pseudo-classes de mise en surbrillance standards telles que ::selection.

Navigateurs pris en charge

  • 105
  • 105
  • 17.2

Source

API CloseWatcher

Chrome 120 inclut l'API CloseWatcher, une nouvelle API permettant d'écouter les requêtes de fermeture et d'y répondre. Ces requêtes sont déclenchées par la touche ESC sur ordinateur et par le geste ou le bouton Retour sur Android. Elles peuvent être difficiles à implémenter.

En plus de l'API, Chrome 120 met à niveau <dialog> et l'attribut popover pour réagir au bouton Retour d'Android.

Navigateurs pris en charge

  • 120
  • 120
  • x
  • x

CSS text-wrap: balance et stable

Firefox 121 inclut les valeurs balance et stable pour text-wrap. La valeur balance est utile pour les blocs de contenu courts, tels que les titres, afin de créer un texte plus agréable et facile à lire. La valeur stable empêche le retour à la ligne du contenu modifiable pendant la modification.

En savoir plus sur text-wrap: balance.

text-wrap: balance

Navigateurs pris en charge

  • 114
  • 114
  • 121

Source

text-wrap: stable

Navigateurs pris en charge

  • x
  • x
  • 121

Source

Chargement différé d'éléments <iframe>

Firefox 121 accepte l'attribut loading sur les éléments <iframe>. Cela signifie que le chargement différé des iFrames est désormais compatible avec tous les principaux moteurs.

Navigateurs pris en charge

  • 77
  • 79
  • 121
  • 16.4

Compatibilité avec la fonction de lissage de vitesse linear()

Safari 17.2 est également compatible avec la fonction de lissage de vitesse linear(), qui permet de créer des effets de rebond et de rebond.

Navigateurs pris en charge

  • 113
  • 113
  • 112
  • 17.2

Versions bêta des navigateurs

Les versions bêta vous donnent un aperçu des éléments qui seront disponibles dans la prochaine version stable du navigateur. C'est le moment idéal pour tester de nouvelles fonctionnalités, ou suppressions, qui pourraient avoir un impact sur votre site avant que le reste du monde ne soit publié. Les nouvelles versions bêta sont Firefox 122, Chrome 121 et Safari 17.3. Ces versions apportent de nombreuses fonctionnalités intéressantes à la plate-forme. Consultez les notes de version pour en savoir plus. Voici quelques-unes des principales nouveautés.

Firefox 122 et Chrome 121 incluent la méthode showPicker() pour HTMLSelectElement. Cette commande affiche le même sélecteur qui s'affiche lorsque l'élément est sélectionné, mais peut être déclenché par un appui sur un bouton ou une autre interaction de l'utilisateur.

Chrome 121 inclut les propriétés de style de barre de défilement scrollbar-color et scrollbar-width, ainsi que le masquage CSS amélioré pour le format SVG, et met en évidence les pseudo-éléments pour le texte mal orthographié ou grammaticalement incorrect.