Nouveautés de Chrome 133

Rachel Andrew

Voici quelques points à retenir :

Fonction CSS avancée attr()

Cette fonctionnalité s'ajoute à la fonction attr() existante et aux fonctionnalités spécifiées dans CSS niveau 5. Cela permet d'utiliser des types autres que <string> dans toutes les propriétés CSS (en plus de la compatibilité existante avec le contenu du pseudo-élément).

Dans l'exemple suivant, la valeur de la propriété color pour div utilise la valeur de l'attribut data-color. La valeur de cet attribut est analysée dans un <color> à l'aide de attr() et type(). La valeur de remplacement est définie sur red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Pour en savoir plus, consultez Mise à niveau de attr() pour les SCP.

Requêtes de conteneur d'état de défilement CSS

Utilisez des requêtes de conteneur pour styliser les descendants de conteneurs en fonction de leur état de défilement.

Le conteneur de requête est un conteneur de défilement ou un élément affecté par la position de défilement d'un conteneur de défilement. Les états suivants peuvent être interrogés :

  • stuck : un conteneur à positionnement fixe est collé à l'un des bords de la zone de défilement.
  • snapped : un conteneur aligné sur l'accrochage de défilement est actuellement accroché horizontalement ou verticalement.
  • scrollable : indique si un conteneur de défilement peut défiler dans une direction donnée.

Un nouveau type de conteneur : scroll-state permet d'interroger les conteneurs. Exemple :

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Pour en savoir plus et voir des démonstrations, consultez Requêtes d'état de défilement CSS.

CSS text-box, text-box-trim et text-box-edge

La propriété text-box-trim spécifie les côtés à découper (au-dessus ou en dessous), et la propriété text-box-edge spécifie la façon dont le bord doit être découpé.

Ces propriétés vous permettent de contrôler précisément l'espacement vertical à l'aide des métriques de police.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Découvrez comment utiliser ces nouvelles propriétés dans CSS text-box-trim.

Et bien plus !

Bien sûr, il y en a beaucoup d'autres.

  • Animation.overallProgressvous offre une représentation pratique et cohérente de l'avancement d'une animation au cours de ses itérations, quelle que soit la nature de sa timeline.
  • Node.prototype.moveBefore vous permet de déplacer des éléments dans une arborescence DOM sans réinitialiser l'état de l'élément.
  • L'interface FileSystemObserver informe les sites Web des modifications apportées au système de fichiers.
  • La méthode getClientCapabilities() PublicKeyCredential vous permet de déterminer les fonctionnalités WebAuthn compatibles avec le client de l'utilisateur.

Pour en savoir plus sur ces fonctionnalités et sur bien d'autres nouveautés de Chrome, consultez les notes de version complètes de Chrome 133.

Documentation complémentaire

Cette liste ne couvre que quelques points essentiels. Consultez les liens suivants pour découvrir d'autres modifications apportées à Chrome 133.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo.

Dès que Chrome 133 sera disponible, nous vous présenterons les nouveautés de Chrome.