Nouveaux utilisateurs sur la plate-forme Web en juillet

Découvrez certaines des fonctionnalités intéressantes qui ont été intégrées aux navigateurs Web stables et bêta en juillet 2024.

Rachel Andrew

Versions stables du navigateur

En juillet 2024, Firefox 128, Safari 17.6 et Chrome 127 sont devenus stables. Cet article présente les nouvelles fonctionnalités ajoutées à la plate-forme Web.

Syntaxe des couleurs relatives CSS

Firefox 128 inclut la syntaxe des couleurs relatives CSS, ce qui vous permet de créer une couleur relative à une couleur d'origine. Le code CSS suivant désature la couleur indigo de moitié, à l'aide de hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Vous trouverez de nombreux autres exemples dans l'article de blog Syntaxe de couleur relative CSS. La syntaxe de couleur relative est l'un des axes d'attention d'Interop 2024. Cette mise à jour permet donc d'améliorer le score de Firefox stable.

Texte de substitution pour la propriété content

Firefox 128 accepte le texte de substitution pour la propriété CSS content lorsqu'elle inclut une image. Le texte alternatif est exposé à l'arborescence d'accessibilité. Cela signifie que le texte alternatif est désormais compatible avec tous les navigateurs pour content.

Une mise à jour de Chrome 127 garantit que Chrome accepte un nombre arbitraire d'éléments plutôt qu'une seule chaîne, ce qui permet d'utiliser la fonction attr(), par exemple.

Propriété font-size-adjust

Chrome 127 inclut font-size-adjust, qui est également un axe d'attention pour Interop 2024. Cette propriété est utile dans les cas où une police de remplacement peut se produire, car elle vous aide à faire correspondre la taille d'une police de remplacement à celle de la police de premier choix.

Dans cette version de Chrome, la propriété font-size-adjust fait partie de Baseline Newly Available.

Compatibilité avec l'API View Transition dans les iFrames

À partir de Chrome 127, les transitions d'affichage simultanées d'un même document dans un frame principal et dans un iFrame de même origine seront disponibles.

Auparavant, l'exécution d'une transition de vue à l'aide de document.startViewTransition dans un iframe de même origine ne fonctionnait pas si le frame principal exécutait une transition en même temps. La transition de l'iFrame sera automatiquement ignorée. Les deux transitions s'exécutent maintenant.

Conteneurs de défilement sélectionnables au clavier

À partir de Chrome 127, les barres de défilement sont sélectionnables par clic et de manière programmatique par défaut. Les barres de défilement sans enfants sélectionnables peuvent être sélectionnés par défaut au clavier.

Pour en savoir plus sur ce changement, consultez l'article Outils de défilement sélectionnables au clavier.

La règle @property

Firefox 128 est compatible avec la règle @property et les API JavaScript associées. Cela signifie que vous pouvez créer des propriétés CSS personnalisées qui définissent une syntaxe, une héritage et une valeur initiale.

Dans l'exemple suivant, la propriété personnalisée est définie pour n'accepter qu'une valeur <color>, ne pas hériter et avoir une valeur initiale de hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

La règle @property fait désormais partie de la version de référence nouvellement disponible. Pour en savoir plus, consultez @property : les variables CSS de nouvelle génération sont désormais compatibles avec tous les navigateurs.

ArrayBuffer redimensionnable et SharedArrayBuffer extensible

Les ArrayBuffer redimensionnables et les SharedArrayBuffer extensibles sont désormais compatibles avec Firefox 128. Vous pouvez ainsi modifier la taille des tampons sans avoir à allouer un nouveau tampon et à y copier des données. Ces propriétés rejoindront également la fonctionnalité de référence "Nouveautés disponibles".

Mot clé safe dans les propriétés Flexbox

Safari 17.6 est principalement une version de corrections de fonctionnalités existantes, mais elle inclut également le mot clé safe pour les propriétés d'alignement flexbox. Le mot clé safe devient ainsi interopérable dans tous les navigateurs.

Le mot clé safe empêche un alignement choisi d'afficher du contenu en dehors de la zone visible. Le CodePen suivant montre comment cela fonctionne avec des éléments alignés au centre. Si l'alignement center entraîne une perte de données, start est utilisé à la place.

Versions bêta des navigateurs

Les versions bêta du navigateur 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 qu'elle ne soit lancée publiquement. Les nouvelles versions bêta sont Firefox 129 et Chrome 128. La version bêta de Safari 18 est toujours en cours. 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.

Chrome 128 inclut la propriété CSS ruby-align, ainsi que des modifications permettant de créer des sauts de ligne dans les éléments contenant display: ruby. La propriété zoom a également été mise à jour pour correspondre à la spécification. Une mise à jour de l'API AudioContext a été effectuée pour ajouter un rappel attribué à AudiContext.onerror, qui signale les erreurs de création et de rendu d'AudioContext.

Firefox 129 inclut la règle @starting-style et la propriété transition-behavior. Ces propriétés feront partie de Baseline Newly Available une fois que Firefox 129 sera disponible en version stable.