Nouveaux utilisateurs sur la plate-forme Web en juillet

Découvrez quelques-unes des fonctionnalités intéressantes qui sont disponibles en version stable et bêta. les navigateurs Web pendant juillet 2024.

Versions stables des navigateurs

En juillet 2024, Firefox 128 a Safari 17.6 et Chrome 127 est devenu stable. Cet article passe en revue les nouvelles fonctionnalités ajoutées à la plate-forme Web.

<ph type="x-smartling-placeholder">

Syntaxe des couleurs relatives CSS

Firefox 128 inclut Syntaxe des couleurs relatives CSS Cela 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 des couleurs relatives CSS La syntaxe des couleurs relatives est l'un des domaines d'action de l'interopérabilité 2024, Cette mise à jour permet donc d'améliorer le score pour la version stable de Firefox.

Texte alternatif pour la propriété content

Firefox 128 accepte un texte alternatif pour la propriété CSS content, lorsqu'elles incluent une image. Le texte alternatif est affiché dans l'arborescence d'accessibilité. Cela signifie que le texte alternatif est désormais accepté par tous les navigateurs pour content.

Une mise à jour de Chrome 127 garantit que Chrome accepte un nombre arbitraire de au lieu d'une simple chaîne, ce qui permet d'utiliser attr() par exemple.

Propriété font-size-adjust

Chrome 127 inclut font-size-adjust, qui fait également partie des priorités de l'interopérabilité 2024. Cette propriété est utile dans les cas où un remplacement de police peut se produire, car elle vous aide à faire correspondre la taille d'une police de remplacement à la police de premier choix.

Avec cette version de Chrome, la propriété font-size-adjust fait partie de Nouvelle version de référence disponible.

Compatibilité de 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 vont maintenant s'exécuter.

Conteneurs de défilement sélectionnables au clavier

À partir de Chrome 127, les curseurs peuvent être sélectionnés par un clic et par programmation par défaut. Par défaut, les défilements sans enfants sélectionnables sont sélectionnables au clavier.

Pour en savoir plus sur ce changement, lisez le post. Défilements sélectionnables au clavier :

La règle @property

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

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

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

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

ArrayBuffer redimensionnable et SharedArrayBuffer extensible

Redimensionnable ArrayBuffer et évolutif SharedArrayBuffer sont désormais pris en charge dans Firefox 128, permettant de modifier la taille des tampons sans avoir à allouer un un nouveau tampon et y copier des données. Ces propriétés joignent également le niveau Baseline Newly Available.

Le mot clé safe dans les propriétés Flexbox

Safari 17.6 est avant tout une version de correctifs aux fonctionnalités existantes, Toutefois, il inclut également le mot clé safe pour les propriétés d'alignement du Flexbox. Le mot clé safe devient ainsi interopérable dans tous les navigateurs.

Le mot clé safe empêche un alignement choisi de provoquer l'affichage du contenu en dehors de 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.

<ph type="x-smartling-placeholder">

Versions bêta des navigateurs

Les versions bêta des navigateurs vous donnent un aperçu des nouveautés version stable du navigateur. C'est le moment idéal pour tester de nouvelles fonctionnalités, ou susceptibles d'avoir un impact sur votre site avant qu'il ne soit mis en ligne. Nouveau les bêtas sont Firefox 129 et Chrome 128. La Safari 18 est toujours en cours. Ces versions apportent de nombreuses fonctionnalités intéressantes à la plate-forme. Découvrir la version des notes pour tous les détails. En voici quelques-unes.

Chrome 128 inclut la propriété CSS ruby-align, ainsi que les modifications apportées à permet de faire des sauts de ligne dans les éléments qui comportent display: ruby, le paramètre La propriété zoom a également été mise à jour pour correspondre à la spécification. Il y a Une mise à jour de l'API AudioContext pour ajouter un rappel attribué à AudiContext.onerror, qui signale les erreurs de création et d'affichage d'AudioContext.

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