Neu in Chrome 121

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist Adriana Jara. Sehen wir uns nun an, was es bei Chrome 121 für Entwickler Neues gibt.

Aktualisierungen des Preisvergleichsportals

Beginnen wir mit den CSS-Aktualisierungen:

Die Properties scrollbar-color und scrollbar-width sind jetzt verfügbar. Mit ihnen können Sie Bildlaufleisten anpassen und ihre 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 Farben für Rechtschreib- und Grammatikfehler anpassen, falsch geschriebene Wörter mit Hintergrundfarben oder anderen Verzierungen 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, bei der SVG eine neue Maskenunterstützung hinzugefügt wurde (mehrere Masken sowie mask-mode, mask-composite, mask-position und mask-repeat). Außerdem werden jetzt Remote-SVG-Masken (z. B. Maske: 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

Mit der Speculation Rules API können Websites Chrome programmatisch mitteilen, welche Seiten vorzeitig gerendert werden sollen. Dadurch wird die Nutzerfreundlichkeit verbessert, 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 von Elementen auf 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 laden oder vorrendern, wenn der Mauszeiger darauf bewegt oder die Maustaste gedrückt wird.

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.

Außerdem ermöglicht der Hinweis No-Vary-Search, dass spekulative Vorab-Ladevorgänge auch dann übereinstimmen, wenn sich URL-Suchparameter ändern. Der HTTP-Antwortheader No-Vary-Search gibt an, dass einige oder alle Teile der Abfrage einer URL zum Abgleich ignoriert werden können. Sie können festlegen, dass Übereinstimmungen nicht durch die Reihenfolge der Abfrageparameterschlüssel verhindert werden sollen, dass bestimmte Abfrageparameter keine Übereinstimmungen verhindern sollen oder dass nur bestimmte bekannte Abfrageparameter zu Nichtübereinstimmungen führen sollen.

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. Dabei wird eine Aufnahme des gesamten Tabs in eine Aufnahme eines bestimmten DOM-untergeordneten Knotens umgewandelt, wobei nur direkte Nachkommen des Zielelements erfasst werden. Mit anderen Worten: Es werden sowohl verdeckende als auch verdeckte Inhalte zugeschnitten und entfernt.

Ein Beispiel für den Einsatz der Element Capture API ist eine Videokonferenz-App, 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.

Screenshot einer Videokonferenz in Chrome.
Elad verwendet eine Drittanbieteranwendung in einem Videokonferenzanruf mit François.

Sie können dazu die Region Capture-Funktion verwenden. Wenn sich jedoch Inhalte wie eine Drop-down-Liste über den ausgewählten Inhalt legen, wird diese Drop-down-Liste in die Aufnahme aufgenommen.

Screenshot einer Drop-down-Liste
Die Drop-down-Liste von Elad wird über den von François empfangenen Inhalten angezeigt.

Die Element Capture API löst dieses Problem, da Sie das Element anpeilen können, das Sie teilen möchten.

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

Hier finden Sie Codebeispiele für die Videostream-Aufnahme über beliebige Elemente und können sich für den ElementCapture-Test registrieren.

…und vieles mehr

Natürlich gibt es noch viele weitere.

  • Für die Methoden resizeBy() und resizeTo(), die Teil der Document Picture-in-Picture API sind, ist jetzt eine Nutzergeste erforderlich.

  • Du kannst die Optionsauswahl eines <select>-Elements programmatisch mit der Methode showPicker() von HTMLSelectElement öffnen.

  • scope_extensions befindet sich in der Testphase für Ursprünge. Damit können die Verhaltensweisen einer Webanwendung auf andere Ursprünge ausgeweitet werden, wenn zwischen dem primären Ursprung einer Webanwendung und den zugehörigen Ursprüngen eine Übereinstimmung besteht.

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 121.

Abonnieren

Wenn du auf dem Laufenden bleiben möchtest, abonniere den YouTube-Kanal für Chrome-Entwickler. Du wirst dann per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Adriana Jara und sobald Chrome 122 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.