Nouveautés de Chrome 133

Rachel Andrew

Voici quelques points à retenir :

Fonction attr() CSS avancée

Cette fonctionnalité ajoute à la fonction attr() existante des fonctionnalités spécifiées dans le CSS de niveau 5. Cela permet d'utiliser des types autres que <string> et de les utiliser 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 CSS attr().

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. Vous pouvez interroger les états suivants:

  • stuck: un conteneur positionné de manière fixe est collé à l'un des bords de la zone de défilement.
  • snapped: un conteneur aligné sur le point d'ancrage de défilement est actuellement ancré horizontalement ou verticalement.
  • scrollable: indique si un conteneur de défilement peut être défilé dans la direction de la requête.

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 à couper, au-dessus ou en dessous, et la propriété text-box-edge spécifie comment la bordure doit être coupée.

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 a bien d'autres choses.

  • Animation.overallProgress vous offre une représentation pratique et cohérente de l'avancement d'une animation au fil de ses itérations, quelle que soit la nature de sa chronologie.
  • Node.prototype.moveBefore vous permet de déplacer des éléments dans une arborescence DOM, sans réinitialiser leur état.
  • 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 quelles fonctionnalités WebAuthn sont compatibles avec le client de l'utilisateur.

Pour en savoir plus sur ces fonctionnalités et sur de nombreuses autres nouveautés de Chrome, consultez les notes de version de Chrome 133.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour en savoir plus sur les modifications apportées à Chrome 133.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

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