Neu in Chrome 131

Mariko Kosaka
X

Dazu sollten Sie Folgendes wissen:

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

CSS-Highlight übernehmen

Die Übernahme von CSS-Highlights für die Pseudoklassen ::selection und ::target-text ändert sich. Dadurch wird ein intuitiveres Modell für die Stilübernahme geschaffen, das den kürzlich hinzugefügten Pseudoklassen ::highlight, ::spelling-error und ::grammar-error entspricht.

Sehen Sie sich dieses Code-Snippet mit hervorgehobenem Text an.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

In früheren Versionen von Chrome wurde die Farbe des Texts nicht blau, wenn Sie hervorgehobenen Text auswählten, obwohl Sie die Pseudoklasse ::selection für das übergeordnete Absatzelement festgelegt hatten.

Markierter Text in Rosa

Das liegt daran, dass es mit dem Modell der abgeleiteten Elemente implementiert wurde. Die Pseudoklasse ::selection entspricht in diesem Fall also nur Elementen mit der Klasse „blau“, die das Element in diesem Absatz nicht hat.

Nach der Änderung der Übernahme von Hervorhebungen wird derselbe Text in Chrome 131 blau hervorgehoben.

Blau hervorgehobener Text

Es gibt noch einige weitere Änderungen in diesem Zusammenhang. Lesen Sie dazu den Artikel Inheritance changes for CSS selection styling (Änderungen bei der Vererbung für das CSS-Auswahl-Styling) von Stephen Chenney von Igalia, der an dieser Funktion gearbeitet hat.

Verbesserte Stile für <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 können Sie die Property display verwenden und das Pseudo-Element ::details-content hinzufügen, um den Teil zu stylen, der maximiert und minimiert wird.

Bisher war es nicht möglich, den Anzeigetyp des details-Elements zu ändern. Diese Einschränkung wurde jetzt aufgehoben. Sie können also jetzt z. B. Raster- oder Flex-Layouts verwenden.

In diesem Beispiel mit einem exklusiven Akkordeon, das aus mehreren details-Elementen besteht. Wenn eines der details-Elemente maximiert wird, wird dessen Inhalt neben dem summary-Element platziert.

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

Unterstützung für Felder am Seitenrand, wenn ein Webdokument gedruckt oder als PDF exportiert wird, wurde hinzugefügt.

Mit Feldern für den Seitenrand 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 Attributregeln angegeben, die die 16 Ränder-Elemente mithilfe generierter Inhalte darstellen.

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

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 der wichtigsten 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.