Neu in Chrome 105

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 105 gibt.

Containerabfragen und die CSS-Eigenschaft :has()

Containerabfragen, eine der am häufigsten gewünschten Funktionen, sind in Chrome 105 verfügbar. Damit können Entwickler einen übergeordneten Selektor nach seiner Größe und seinen Stilinformationen abfragen. So kann ein untergeordnetes Element seine eigene responsive Stillogik haben, unabhängig davon, wo es sich auf einer Seite befindet.

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

Containerabfrage im Vergleich zur Media-Query

Wenn Sie Containerabfragen verwenden möchten, müssen Sie die Containment-Eigenschaft für ein übergeordnetes Element festlegen. Sie haben beispielsweise eine Karte mit einem Bild und etwas Text.

Einzelne zweispaltige Karte.

Wenn Sie eine Containerabfrage erstellen möchten, legen Sie container-type für den Kartencontainer fest. 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 diesen Container verwenden, um mit @container Stile auf seine untergeordneten Elemente anzuwenden.

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

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

In diesem Fall wird bei einer Containerbreite von weniger als 400 Pixeln zu einem einspaltigen Layout gewechselt.

CSS-Pseudoklasse :has()

Mit der CSS-Pseudoklasse :has() können wir noch einen Schritt weitergehen. 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. Damit können Sie den übergeordneten Absatz selbst oder Elemente darin formatieren. Alternativ können Sie figure:has(figcaption) verwenden, um ein „figure“-Element zu formatieren, das eine Bildunterschrift enthält.

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

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

Im Artikel @container and :has(): two powerful new responsive APIs von Una finden Sie eine detailliertere Erklärung und einige interessante Demos.

Sanitizer API

Die meisten Web-Apps verarbeiten häufig nicht vertrauenswürdige Strings. Das sichere Rendern dieser Inhalte kann jedoch schwierig sein. Ohne ausreichende Sorgfalt können leicht Cross-Site-Scripting-Sicherheitslücken entstehen.

Es gibt Bibliotheken wie DomPurify, die helfen, aber einen geringen Wartungsaufwand verursachen. Die HTML Sanitizer API trägt dazu bei, die Anzahl der Cross-Site-Scripting-Sicherheitslücken zu verringern, indem die Bereinigung in die Plattform integriert wird.

Erstellen Sie dazu eine neue Instanz von Sanitizer. Rufen Sie dann setHTML() für das Element auf, in das Sie den bereinigten Inhalt 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 anpassbar. 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 Safe DOM manipulation with the Sanitizer API.

WebSQL für nicht sichere Kontexte wird eingestellt

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

Wenn Sie Web SQL in unsicheren 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 jetzt den Namen einer installierten PWA sowohl auf dem Computer als auch auf dem Mobilgerät aktualisieren, indem Sie das Web-App-Manifest aktualisieren.
  • Die Window Placement API für mehrere Bildschirme erhält genaue Bildschirmnamen-Labels.
  • Die API zum Einblenden von Fenstersteuerelementen ist jetzt verfügbar. So können PWAs app-ähnlicher wirken, indem die vorhandene Titelleiste in voller Breite durch ein kleines Overlay ersetzt wird. So können Sie benutzerdefinierte Inhalte im Bereich der Titelleiste platzieren.

Weitere Informationen

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

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 106 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.