Dazu sollten Sie Folgendes wissen:
- Die Funktion CSS-Highlight übernehmen wird geändert.
- Weitere CSS-Stile für das Element
<details>
- Einfacheres Drucklayout mit Rahmen für Seitenränder.
- Und es gibt noch viele weitere.
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.
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.
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.
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.
- Versionshinweise für Chrome 131
- Neu bei den Chrome-Entwicklertools (131)
- Liste der Änderungen am Chromium-Quellcode-Repository
- Chrome-Veröffentlichungskalender
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.