Dazu sollten Sie Folgendes wissen:
- CSS unterstützt jetzt Verschachtelungsregeln.
- Der Algorithmus zum Festlegen des anfänglichen Fokus auf
<dialog>
Elemente wurde aktualisiert. - Managementfreie
fetch()
-Handler für Service Worker werden von nun an übersprungen, um die Navigation zu beschleunigen. - Und es gibt viele weitere.
Mein Name ist Adriana Jara. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 112 gibt.
CSS-Unterstützung für Verschachtelung.
Eine unserer beliebtesten CSS-Präprozessorfunktionen ist jetzt in die Sprache integriert: die verschachtelten Stilregeln.
Vor der Verschachtelung muss jeder Selektor explizit und getrennt voneinander deklariert werden. Dies führt zu Wiederholungen, Bulk-Änderungen des Stylesheets und unübersichtlicher Erstellungsprozess.
.nesting { color: hotpink; } .nesting > .is { color: rebeccapurple; } .nesting > .is > .awesome { color: deeppink; }
Nach der Verschachtelung können Selektoren fortgesetzt und zugehörige Stilregeln gruppiert werden.
.nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } }
Verschachtelte Elemente helfen Entwicklern, Selektoren nicht zu wiederholen, und gleichzeitig Stilregeln für verwandte Elemente an einem Ort zu speichern. Außerdem können Stile so leichter mit dem HTML-Code übereinstimmen, auf den sie ausgerichtet sind.
Wenn die Komponente .nesting
im Beispiel aus dem Projekt entfernt wurde, können Sie die gesamte Gruppe löschen, anstatt in Dateien nach zugehörigen Selektorinstanzen zu suchen.
Verschachtelung kann bei Folgendem helfen:
- Organisation.
- Die Dateigröße wird reduziert.
- Refaktorierung
Tipps zur optimalen Nutzung der CSS-Verschachtelung finden Sie in diesem Artikel. Unterstützung für Verschachtelungen in Entwicklertools finden Sie hier.
Algorithmusupdate für Anfangsfokus von <dialog>
.
Das HTML-Element <dialog>
ist die standardisierte Darstellung eines Dialogfelds oder einer anderen interaktiven Komponente, z. B. einer schließbaren Warnung oder eines Unterfensters, die über allen anderen Inhalten einer Webseite angezeigt werden muss.
Dieses HTML-Element wird für die Erstellung solcher Inhalte empfohlen, da seine Funktionen für eine bessere und einheitlichere Nutzerfreundlichkeit und Zugänglichkeit sorgen sollen.
Eine dieser Funktionen legt fest, welches Element beim Öffnen des Dialogfelds fokussiert wird. In dieser Version wurde der Algorithmus, mit dem das Element ausgewählt wird, aktualisiert.
Ab sofort:
Bei den Schritten zum Fokussieren des Dialogfelds werden mit der Tastatur fokussierbare Elemente anstelle von fokussierbaren Elementen betrachtet.
Das <dialog>
-Element selbst wird fokussiert, wenn das Autofokus-Attribut festgelegt ist.
Das <dialog>
-Element selbst wird als Fallback fokussiert. Der Fokus wird also nicht auf das <body>
-Element zurückgesetzt.
Weitere Informationen zum Element <dialog>
finden Sie in der Dokumentation.
No-Op-Abruf-Handler für Service Worker werden übersprungen.
Ab Chrome 112 wird der Service Worker gestartet und die Listener-Weiterleitung aus dem kritischen Navigationspfad wird weggelassen, wenn ein User-Agent feststellt, dass alle Abruf-Listener des Service Workers managementfrei sind.
Diese Funktion beschleunigt die Navigation auf diesen Seiten.
Der Abruf-Handler gehört zu den PWA‐Anforderungen für die Installation einer Web-App. Wir vermuten, dass dies der Grund dafür sein könnte, dass einige Websites einen im Wesentlichen leeren Abruf-Handler verwenden. Einen Service Worker zu starten und einen No-Op-Listener auszuführen, ist jedoch nur mit Aufwand verbunden, ohne die Vorteile zu nutzen, die mit dem richtigen Service Worker implementiert werden könnten, wie Caching oder Offline-Funktionen. Diese werden jetzt von Chrome übersprungen, um die Navigation zu verbessern.
Im Rahmen dieser Änderung zeigt Chrome Konsolenwarnungen an, wenn alle Abruf-Listener des Service Workers managementfrei sind. Der Entwickler wird aufgefordert, diese Abruf-Listener zu entfernen.
…und vieles mehr
Natürlich gibt es noch viel mehr.
- Der Setter für
document.domain
wurde eingestellt. - Es gibt einen Ursprungstest für die Einstellung von
X-Requested-With header
in WebView - Der Rekorder in den Entwicklertools kann jetzt mit Pierce-Selektoren aufzeichnen.
Weitere Informationen
Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 112.
- Neu in den Chrome-Entwicklertools (112)
- Einstellung und Entfernung von Chrome 112
- ChromeStatus.com-Updates für Chrome 112
- Ä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.
Ich bin Adriana Jara. Sobald Chrome 113 veröffentlicht wird, melde ich mich mit Informationen zu den Neuheiten in Chrome.