Dazu sollten Sie Folgendes wissen:
- Verleihen Sie Ihrem Text eine persönliche Note mit
font-palette
-Animationen und anderen CSS-Updates. - Es gibt Verbesserungen an der Speculation Rules API.
- Sie können die Element Capture API in einem Ursprungstest ausprobieren.
- Und es gibt viele weitere.
Mein Name ist Adriana Jara. Jetzt sehen wir uns an, was es für Entwickler Neues in Chrome 121 gibt.
CSS-Updates
Beginnen wir mit den CSS-Aktualisierungen:
Die Properties scrollbar-color
und scrollbar-width
sind jetzt verfügbar. Damit können Sie Bildlaufleisten anpassen und – wie Sie wahrscheinlich schon gedacht haben – ihre Farbe und Breite ändern.
Mit der Eigenschaft font-palette
können Sie eine bestimmte Palette zum Rendern einer Farbschrift auswählen. Diese Eigenschaft unterstützt jetzt Animationen, sodass der Wechsel zwischen den Paletten zu einem weichen Übergang zwischen den beiden ausgewählten Paletten wird.
Mit den Pseudoelementen ::spelling-error
und ::grammar-error
können Sie die Farben für Rechtschreib- und Grammatikfehler anpassen, falsch geschriebene Wörter durch Hintergrundfarben oder andere Dekorationen hervorheben und eine benutzerdefinierte Rechtschreibprüfung mit einer stärker integrierten Darstellung implementieren.
Die CSS-Maskierung für SVG wurde verbessert. Dies ist eine Ergänzung zur verbesserten Unterstützung von CSS-Masken in Chrome 120. SVG wird jetzt um neue Masken unterstützt (mehrere Masken sowie mask-mode
, mask-composite
, mask-position
und mask-repeat
). Darüber hinaus werden jetzt auch Remote-SVG-Masken (z. B. Maske: url(masks.svg#star)
) unterstützt.
Korrektur: In einer früheren Version dieses Artikels wurde erwähnt, dass supports()
-Bedingungen zu @import
unterstützt werden, was nicht der Fall war. Die Änderung ist in Chrome 122 enthalten.
Aktualisierungen der Speculation Rules API
Websites können die Speculation Rules API verwenden, um Chrome programmatisch mitzuteilen, welche Seiten vorab gerendert werden sollen. Dadurch wird die Nutzerfreundlichkeit verbessert, indem die Seitennavigationszeit verkürzt wird.
Die API unterstützt jetzt Dokumentregeln: Sie sind eine Erweiterung der Syntax für Spekulationsregeln, mit der der Browser die Liste der URLs für spekulatives Laden aus Elementen auf einer Seite abrufen kann. Dokumentregeln können Kriterien für die Verwendung dieser Links enthalten. In Kombination mit dem neuen Feld eagerness können Sie Links auf Seiten sofort, wenn der Mauszeiger darauf bewegt wird oder wenn der Mauszeiger darauf bewegt wird, automatisch vorab abrufen oder rendern.
Hier ein Beispiel für Dokumentregeln:
{
"prerender": [
{"where": {"and": [
{"href_matches": "/*"},
{"not": {"href_matches": "/logout"}},
{"not": {"selector_matches": ".no-prerender"}}
]}}
]
}
Eine separate Änderung ermöglicht die Angabe von Spekulationsregeln mithilfe des Speculation-Rules-HTTP-Antwort-Headers. Der Header ist eine Alternative zur Verwendung von Inline-<script>
-Elementen. Der Wert dieses Headers muss eine URL sein, die auf eine Textressource mit dem MIME-Typ "application/speculationrules+json"
verweist. Die Regeln der Ressource werden dem Regelsatz des Dokuments hinzugefügt.
Außerdem ermöglicht der Hinweis No-Vary-Search
den Abgleich spekulativer Prefetches, selbst wenn sich URL-Suchparameter ändern. Der HTTP-Antwortheader No-Vary-Search
deklariert, dass einige oder alle Teile der Anfrage einer URL für den Abgleich ignoriert werden können. Sie kann deklarieren, dass Übereinstimmungen nicht durch die Reihenfolge der Suchparameterschlüssel oder nur durch bestimmte bekannte Suchparameter verhindert werden oder dass nur bestimmte bekannte Suchparameter zu Abweichungen führen.
Weitere Informationen zu diesen Änderungen finden Sie unter Verbesserungen an der Speculation Rules API.
Ursprungstest der Element Capture API
Die Element Capture API ist in einem Ursprungstest verfügbar. Mit dieser API können Sie ein bestimmtes HTML-Element erfassen und aufzeichnen. Es wandelt eine Erfassung des gesamten Tabs in eine Erfassung einer bestimmten DOM-Unterstruktur um, wobei nur direkte Nachfolger des Zielelements erfasst werden. Das heißt, verdeckende und verdeckende Inhalte werden abgeschnitten und entfernt.
Die Element Capture API ist beispielsweise in einer Videokonferenz-App nützlich, mit der Sie Anwendungen von Drittanbietern in einen iFrame einbetten können. In diesem Szenario möchten Sie diesen iFrame als Video erfassen und an Remote-Teilnehmer übertragen.
Sie können dafür Region Capture verwenden. Wenn jedoch Inhalte, z. B. aus einer Drop-down-Liste, über dem ausgewählten Inhalt gelagert werden, ist das Drop-down-Menü Teil der Aufnahme.
Die Element Capture API löst dieses Problem, indem Sie eine Ausrichtung auf das Element vornehmen, das Sie freigeben möchten.
Codebeispiele erhalten: Videostream von jedem Element aufnehmen und für den Ursprungstest von ElementCapture registrieren
…und vieles mehr
Natürlich gibt es noch viel mehr.
Die Methoden
resizeBy()
undresizeTo()
, die Teil der Document Picture-in-Picture API sind, erfordern jetzt eine Nutzergeste.Sie können die Optionsauswahl eines
<select>
-Elements programmatisch mit der MethodeshowPicker()
vonHTMLSelectElement
öffnen.scope_extensions
befindet sich im Ursprungstest. Damit kann das Verhalten einer Web-App auf andere Ursprünge erweitert werden, sofern eine Vereinbarung zwischen dem primären Ursprung einer Web-App und den zugehörigen Ursprüngen besteht.
Weitere Informationen
Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 121.
- Neu in den Chrome-Entwicklertools (121)
- Einstellung und Entfernung von Chrome 121
- ChromeStatus.com-Updates für Chrome 121
- Änderungsliste des Chromium-Quell-Repositorys
- Release-Kalender für Chrome
Abo
Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.
Hallo Adriana Jara, und sobald Chrome 122 veröffentlicht wird, informiere ich dich über die Neuheiten in Chrome.