Neu in Chrome 112

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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.

Vorher
.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.

Nachher
.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.

Warnungen in den Entwicklertools für leere Service Worker-Abruf-Handler.

…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.

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.