Neu in Chrome 105

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 105 für Entwickler neu ist.

Containerabfragen und das CSS-Attribut :has()

Containerabfragen sind eine der am häufigsten angefragten Funktionen und werden in Chrome 105 eingeführt. Sie ermöglichen es Entwicklern, einen übergeordneten Selector nach seinen Größen- und Stilinformationen zu fragen. So kann ein untergeordnetes Element seine eigene Logik für responsives Styling haben, unabhängig davon, wo es sich auf der Seite befindet.

Sie ähneln einer @media-Abfrage, werden jedoch anhand der Größe eines Containers und nicht anhand der Größe des Darstellungsbereichs ausgewertet.

Containerabfrage und Medienabfrage im Vergleich

Wenn Sie Containerabfragen verwenden möchten, müssen Sie die Begrenzung auf ein übergeordnetes Element festlegen. Angenommen, Sie haben eine Karte mit einem Bild und etwas Text.

Einzelne zweispaltige Karte.

Wenn Sie eine Containerabfrage erstellen möchten, setzen Sie container-type auf den Kartencontainer. Wenn Sie container-type auf inline-size festlegen, wird die inline-direction-Größe des übergeordneten Elements abgefragt.

.card-container {
  container-type: inline-size;
}

Jetzt können wir mit diesem Container mithilfe von @container Stilelemente auf alle untergeordneten Elemente anwenden.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

In diesem Fall wird bei einem Container mit weniger als 400 Pixeln zu einem einspaltigen Layout gewechselt.

CSS-Pseudoklasse :has()

Mit der CSS-Pseudoklasse :has() können wir noch einen Schritt weiter gehen. Damit können Sie prüfen, ob ein übergeordnetes Element untergeordnete Elemente mit bestimmten Parametern enthält.

p:has(span) steht beispielsweise für einen Absatzselektor mit einem Span darin. So können Sie den übergeordneten Absatz selbst oder alles darin formatieren. Alternativ können Sie figure:has(figcaption) verwenden, um ein Abbildungselement mit einer Bildunterschrift zu formatieren.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Im Artikel von Una @container und :has(): zwei leistungsstarke neue responsive APIs finden Sie eine ausführlichere Erklärung und einige interessante Demos.

Sanitizer API

Die meisten Webanwendungen arbeiten häufig mit nicht vertrauenswürdigen Strings, das sichere Rendern dieser Inhalte kann jedoch schwierig sein. Ohne ausreichende Sorgfalt können leicht versehentlich Sicherheitslücken für Cross-Site-Scripting entstehen.

Es gibt Bibliotheken wie DomPurify, die helfen, aber einen kleinen Wartungsaufwand erfordern. Die HTML Sanitizer API trägt dazu bei, die Anzahl der Cross-Site-Scripting-Sicherheitslücken zu reduzieren, indem die Plattform mit einer Sanitizer-Funktion ausgestattet wird.

Erstellen Sie zum Verwenden eine neue Instanz von Sanitizer. Rufen Sie dann setHTML() für das Element auf, in das Sie die gefilterten Inhalte einfügen möchten.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Die Sanitizer API ist standardmäßig sicher und kann angepasst werden. Sie können verschiedene Konfigurationsoptionen angeben, z. B. bestimmte Elemente entfernen oder andere zulassen.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Weitere Informationen finden Sie unter Sichere DOM-Manipulation mit der Sanitizer API.

Einstellung von WebSQL für nicht sichere Kontexte

Vor einiger Zeit haben wir angekündigt, Web SQL einzustellen. Ab Chrome 105 wird Web SQL in nicht sicheren Kontexten eingestellt.

Wenn Sie WebSQL in nicht sicheren Kontexten verwenden, sollten Sie so schnell wie möglich zu IndexDB oder einem anderen lokalen Speichercontainer migrieren.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Sie können den Namen einer installierten PWA jetzt sowohl auf dem Computer als auch auf Mobilgeräten aktualisieren, indem Sie das Manifest der Webanwendung aktualisieren.
  • Die Window Placement API für mehrere Bildschirme erhält genaue Bildschirmlabels.
  • Die API für das Einblenden von Fenstersteuerelementen ist jetzt verfügbar. So können PWAs ein App-ähnlicheres Erscheinungsbild bieten, indem die vorhandene Titelleiste in voller Breite durch ein kleines Overlay ersetzt wird. So können Sie benutzerdefinierte Inhalte in den Bereich der Titelleiste einfügen.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 105.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 106 veröffentlicht wird, informieren wir Sie hier über die Neuigkeiten in Chrome.