Neu in Chrome 133

Rachel Andrew

Dazu sollten Sie Folgendes wissen:

Erweiterte CSS-attr()-Funktion

Mit dieser Funktion werden der vorhandenen attr()-Funktion Funktionen hinzugefügt, die in CSS Level 5 spezifiziert sind. So sind neben <string> auch andere Typen möglich und die Verwendung in allen CSS-Properties (zusätzlich zur bestehenden Unterstützung für den Inhalt von Pseudoelementen).

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>-Element geparst. Der Fallback-Wert ist auf red festgelegt.

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

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

Weitere Informationen zum Upgrade von CSS attr()

Containerabfragen für den CSS-Scrollstatus

Mit Containerabfragen können Sie die Nachkommen 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 fix positionierter Container ist an einem der Ränder des Scrollfelds angeklebt.
  • snapped: Ein Container, der an einem Scroll-Snap ausgerichtet ist, ist derzeit horizontal oder vertikal angedockt.
  • scrollable: Gibt an, ob ein Scrollcontainer in eine abgefragte Richtung gescrollt werden kann.

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 Demos finden Sie unter Abfragen zum Scrollstatus von Preisvergleichsportalen.

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

Mit der Property text-box-trim werden die Seiten angegeben, die zu trimmen sind (oben oder unten), und mit der Property text-box-edge wird angegeben, wie die Kante zu trimmen ist.

Mit diesen Eigenschaften können Sie den vertikalen Abstand mithilfe der Schriftmetriken 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;
}

Weitere Informationen zur Verwendung dieser neuen Properties in CSS text-box-trim

…und vieles mehr

Natürlich gibt es noch viel mehr.

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

Weitere Informationen zu diesen und vielen weiteren neuen Funktionen in Chrome finden Sie in den vollständigen Versionshinweisen für Chrome 133.

Weitere Informationen

Dies sind nur einige wichtige Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 133.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

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