Neu in Chrome 131

Mariko Kosaka
X

Dazu sollten Sie Folgendes wissen:

Ich heiße Mariko Kosaka. Sehen wir uns an, was es in Chrome 131 für Entwickler Neues gibt.

Verbesserungen am Design von <details> und <summary>

Sie haben jetzt mehr Möglichkeiten, die Struktur der Elemente <details> und <summary> zu gestalten, um Ausklapp- oder Akkordeon-Widgets zu erstellen.

Durch die Änderungen in dieser Version kann die Eigenschaft display verwendet werden. Außerdem wird das Pseudo-Element ::details-content hinzugefügt, um den Teil zu stylen, der maximiert und minimiert werden kann.

Bisher war es nicht möglich, den Darstellungstyp des details-Elements zu ändern. Diese Einschränkung wurde jetzt gelockert, sodass Sie beispielsweise Raster- oder Flex-Layouts verwenden können.

In diesem Beispiel für ein exklusives Akkordeon, das aus mehreren details-Elementen besteht, wird der Inhalt eines der details-Elemente neben dem summary platziert, wenn es maximiert wird.

Akkordeon-Widget mit Flex-Layout

Dazu wird ein Flex-Layout für das Element details verwendet. Sie können auch weitere Layoutmuster mit anderen Anzeigewerten wie grid ausprobieren.

Eine ausführlichere Erklärung findest du im Artikel Weitere Optionen zum Stilisieren von <details> von Bramus.

@page Rahmen für Ränder

Es wird jetzt unterstützt, beim Drucken eines Webdokuments oder beim Exportieren als PDF Seitenrandfelder zu verwenden.

Mit den Seitenrandfeldern können Sie den Inhalt im Randbereich einer Seite definieren. So können Sie benutzerdefinierte Kopf- und Fußzeilen angeben, anstatt die vom Browser generierten integrierten Kopf- und Fußzeilen zu verwenden.

Der Seitenrand wird in CSS mit der Regel @page definiert.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

Das Aussehen und der Inhalt eines Ränder-Elements werden mit CSS-Eigenschaften in den At-Rules angegeben, die die 16 Ränder-Elemente mithilfe generierter Inhalte darstellen.

Für die Seitennummerierung werden auch Zähler unterstützt, wobei page für die aktuelle Seitenzahl und pages für die Gesamtzahl der Seiten steht.

Eine ausführlichere Erklärung finden Sie im Artikel Inhalte in den Rändern von Webseiten beim Drucken mit CSS hinzufügen von Rachel.

…und vieles mehr

Und natürlich gibt es noch viel mehr.

  • Unterstützung für externe SVG-Ressourcen für „clip-path“, „fill“, „stroke“ und „marker“.
  • WebHID ist in speziellen Worker-Kontexten aktiviert.
  • Mit der CSS-Property font-variant-emoji können Sie das Verhalten von Emojis steuern.

Weitere Informationen

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

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.

Ich bin Mariko Kosaka. Sobald Chrome 132 veröffentlicht wird, informieren wir Sie hier über die Neuigkeiten in Chrome.