Dazu sollten Sie Folgendes wissen:
- Verleihen Sie Ihrem Text mit
font-palette
-Animation und anderen CSS-Updates eine einzigartige Note. - Die Speculation Rules API wurde verbessert.
- Sie können die Element Capture API in einem Ursprungstest ausprobieren.
- Und es gibt noch viele weitere Funktionen.
Mein Name ist Adriana Jara. Sehen wir uns nun an, was es bei Chrome 121 für Entwickler Neues gibt.
Preisvergleichsportal-Updates
Beginnen wir mit den CSS-Aktualisierungen:
Die Properties scrollbar-color
und scrollbar-width
sind jetzt verfügbar. Damit lassen sich Bildlaufleisten anpassen und Farbe und Breite ändern.
Mit der Eigenschaft font-palette
können Sie eine bestimmte Palette auswählen, um eine Farbschrift zu rendern. Diese Eigenschaft unterstützt jetzt Animationen, sodass der Wechsel zwischen den Paletten zu einem gleichmäßigen Übergang zwischen den beiden ausgewählten Vorlagen führt.
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 Gestaltungselemente hervorheben und eine benutzerdefinierte Rechtschreibprüfung mit einer ganzheitlichen 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, durch die SVG jetzt neue Masken unterstützt wird (mehrere Masken sowie mask-mode
, mask-composite
, mask-position
und mask-repeat
). Außerdem werden jetzt Remote-SVG-Masken (z. B. mask: url(masks.svg#star)
) unterstützt.
Korrektur: In einer früheren Version dieses Artikels wurden supports()
-Bedingungen für @import
unterstützt, 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 verbessert sich die Nutzerfreundlichkeit, da 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 das spekulative Laden aus Elementen einer Seite abrufen kann. Dokumentregeln können Kriterien enthalten, für die diese Links verwendet werden können. In Kombination mit dem neuen Feld Eagerness können Sie Links auf Seiten automatisch vorab abrufen oder vorab rendern, wenn Sie den Mauszeiger darauf bewegen oder den Mauszeiger darauf bewegen.
Hier ein Beispiel für Dokumentregeln:
{
"prerender": [
{"where": {"and": [
{"href_matches": "/*"},
{"not": {"href_matches": "/logout"}},
{"not": {"selector_matches": ".no-prerender"}}
]}}
]
}
Mit einer separaten Änderung können Spekulationsregeln mithilfe des HTTP-Antwortheaders „Speculation-Rules“ angegeben werden. Der Header ist eine Alternative zu 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.
Der No-Vary-Search
-Hinweis sorgt außerdem dafür, dass spekulative Prefetches auch dann abgeglichen werden, wenn sich URL-Suchparameter ändern. Der No-Vary-Search
-HTTP-Antwortheader deklariert, dass einige oder alle Teile einer URL-Anfrage zu Abgleichszwecken ignoriert werden können. Darin kann deklariert werden, dass die Reihenfolge der Suchparameter Schlüssel nicht verhindern soll, dass bestimmte Suchparameter Übereinstimmungen nicht verhindern sollen oder dass nur bestimmte bekannte Suchparameter zu Abweichungen führen.
Weitere Informationen zu diesen Änderungen finden Sie unter Verbesserungen an der Speculation Rules API.
Element Capture API-Ursprungstest
Die Element Capture API ist in einem Ursprungstest verfügbar. Mit dieser API können Sie ein bestimmtes HTML-Element erfassen und aufzeichnen. Sie wandelt die Erfassung des gesamten Tabs in eine Erfassung einer bestimmten DOM-Unterstruktur um, wobei nur direkte Nachfolgerelemente des Zielelements erfasst werden. Mit anderen Worten: Sie schneidet sowohl verdeckende als auch verdeckte Inhalte zu und entfernt sie.
Die Element Capture API ist zum Beispiel in einer Videokonferenz-App nützlich, mit der Sie Drittanbieteranwendungen in einen iFrame einbetten können. In diesem Szenario bietet es sich an, den iFrame als Video zu erfassen und an die Remote-Teilnehmer zu senden.
<ph type="x-smartling-placeholder">![Screenshot einer Videokonferenz in Chrome.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/1.png?authuser=6&hl=de)
Hinweis: Sie können hierfür Region Capture verwenden. Wenn in diesem Fall jedoch ein Teil des Inhalts, z. B. eine Drop-down-Liste, über dem ausgewählten Inhalt gezeichnet wird, ist dieses Drop-down Teil der Aufzeichnung.
<ph type="x-smartling-placeholder">![Screenshot einer erfassten Drop-down-Liste.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/3.png?authuser=6&hl=de)
Die Element Capture API löst dieses Problem, da Sie ein Targeting auf das Element vornehmen können, das Sie teilen möchten.
<ph type="x-smartling-placeholder">![Screenshot des Zielelements ohne Drop-down-Liste.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/4.png?authuser=6&hl=de)
Codebeispiele unter Videostream aus beliebigen Elementen aufzeichnen und für den ElementCapture-Ursprungstest registrieren
…und vieles mehr
Natürlich gibt es noch viele weitere.
Die Methoden
resizeBy()
undresizeTo()
, die Teil der Document Picture-in-Picture API sind, erfordern jetzt eine Nutzergeste.Mit der Methode
showPicker()
vonHTMLSelectElement
können Sie die Optionsauswahl eines<select>
-Elements programmatisch öffnen.scope_extensions
befindet sich im Ursprungstest und ermöglicht es, das Verhalten einer Web-App auf andere Ursprünge auszudehnen, wenn zwischen dem primären Ursprung einer Web-App und den zugehörigen Ursprüngen eine Übereinstimmung besteht.
Weitere Informationen
Hier werden nur einige wichtige Punkte behandelt. Unter den folgenden Links finden Sie zusätzliche Änderungen in Chrome 121.
- Neu bei den Chrome-Entwicklertools (121)
- Einstellung und Entfernung von Chrome 121
- ChromeStatus.com-Updates für Chrome 121
- Änderungsliste für das Chromium-Quell-Repository
- Release-Kalender für Chrome
Abonnieren
Um immer auf dem Laufenden zu bleiben, abonniere die YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.
Hallo Adriana Jara, und sobald Chrome 122 veröffentlicht wird, melde ich mich, um Ihnen die Neuerungen in Chrome mitzuteilen.