Neu in Chrome 121

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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.

Screenshot eines Videoanrufs in Chrome.
Elad verwendet eine Drittanbieteranwendung in einem Videokonferenzaufruf mit François.

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.

Screenshot einer aufgenommenen Drop-down-Liste.
Elads Drop-down-Liste wird über den Inhalten angezeigt, die François erhalten hat.

Die Element Capture API löst dieses Problem, indem Sie eine Ausrichtung auf das Element vornehmen, das Sie freigeben möchten.

Screenshot des Zielelements ohne Drop-down-Liste
François sieht die Drop-down-Liste von Elad nicht.

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() und resizeTo(), die Teil der Document Picture-in-Picture API sind, erfordern jetzt eine Nutzergeste.

  • Sie können die Optionsauswahl eines <select>-Elements programmatisch mit der Methode showPicker() von HTMLSelectElement ö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.

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.