Neu in Chrome 133

Rachel Andrew

Dazu sollten Sie Folgendes wissen:

Erweiterte attr()-Funktion für Preisvergleichsportale

Diese Funktion ergänzt die vorhandene attr()-Funktion um Funktionen, die in CSS Level 5 angegeben sind. Dadurch können neben <string> auch andere Typen verwendet werden und das in allen CSS-Properties (zusätzlich zur vorhandenen Unterstützung für das Pseudo-Element „content“).

Im folgenden Beispiel wird für den Wert der Property color für div der Wert aus dem Attribut data-color verwendet. Dieser Attributwert wird mit attr() und type() in ein <color> geparst. Der Fallback-Wert wird auf red festgelegt.

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

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

Weitere Informationenattr()

CSS-Containerabfragen für den Scrollstatus

Mit Containerabfragen können Sie untergeordnete Elemente von Containern basierend auf ihrem Scrollstatus formatieren.

Der Abfragecontainer ist entweder ein Scrollcontainer oder ein Element, das von der Scrollposition eines Scrollcontainers beeinflusst wird. Die folgenden Status können abgefragt werden:

  • stuck: Ein Container mit fester Positionierung ist an einem der Ränder des Scroll-Containers fixiert.
  • snapped: Ein scroll-snap-ausgerichteter Container ist derzeit horizontal oder vertikal eingerastet.
  • scrollable: Gibt an, ob ein Scroll-Container in eine abgefragte Richtung gescrollt werden kann.

Ein neuer Containertyp: scroll-state ermöglicht das Abfragen von Containern. Beispiel:

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

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

Weitere Informationen und einige Demos

Preisvergleichsportale text-box, text-box-trim und text-box-edge

Mit der Eigenschaft text-box-trim wird angegeben, welche Seiten oben oder unten abgeschnitten werden sollen, und mit der Eigenschaft text-box-edge wird angegeben, wie die Kante abgeschnitten werden soll.

Mit diesen Eigenschaften können Sie den vertikalen Abstand mithilfe der Schriftartmesswerte genau steuern.

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;
}

Informationen zur Verwendung dieser neuen Eigenschaften in CSS text-box-trim

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Animation.overallProgressbietet eine praktische und einheitliche Darstellung des Fortschritts einer Animation über die Iterationen hinweg und unabhängig von der Art des Zeitachse.
  • Mit Node.prototype.moveBefore können Sie Elemente in einem DOM-Baum verschieben, ohne den Status des Elements zurückzusetzen.
  • Über die FileSystemObserver-Schnittstelle werden Websites über Änderungen am Dateisystem benachrichtigt.
  • Mit der Methode PublicKeyCredential getClientCapabilities() können Sie ermitteln, welche WebAuthn-Funktionen vom Client des Nutzers unterstützt werden.

Vollständige Versionshinweise für Chrome 133

Weitere Informationen

Hier werden nur einige wichtige Punkte behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 133.

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Sobald Chrome 133 veröffentlicht wird, informieren wir Sie hier über die Neuerungen.