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.

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">
</ph> Screenshot einer Videokonferenz in Chrome.
Elad verwendet in einer Videokonferenz mit François eine Drittanbieter-Anwendung.

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">
</ph> Screenshot einer erfassten Drop-down-Liste.
Elads Drop-down-Liste wird über den Inhalten angezeigt, die François empfangen hat.

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">
</ph> Screenshot des Zielelements ohne Drop-down-Liste.
François sieht die Drop-down-Liste von Elad nicht.

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

  • Mit der Methode showPicker() von HTMLSelectElement 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.

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.