Neu in Chrome 105

Pete LePage

Dazu sollten Sie Folgendes wissen:

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es für Entwickler in Chrome 105 Neues gibt.

Containerabfragen und das CSS-Attribut :has()

Containerabfragen, eine der am häufigsten nachgefragten Funktionen, kommen in Chrome 105. Damit können Entwickler einen übergeordneten Selektor nach Größe und Stilinformationen abfragen. So kann ein untergeordnetes Element die Logik für den responsiven Stil unabhängig davon, wo es sich auf der Seite befindet, besitzen.

Sie ähneln @media-Abfragen, mit der Ausnahme, dass sie anhand der Größe eines Containers und nicht der Größe des Darstellungsbereichs ausgewertet werden.

Containerabfrage vs. Medienabfrage.

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

Einspaltige Karte

Um eine Containerabfrage zu erstellen, lege für den Kartencontainer container-type fest. Wenn Sie container-type auf inline-size setzen, wird die inline-direction-Größe des übergeordneten Elements abgefragt.

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

Jetzt können wir diesen Container verwenden, um Stile mithilfe von @container auf jedes seiner untergeordneten Elemente anzuwenden.

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

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

Wenn der Container in diesem Fall weniger als 400 Pixel groß ist, wechselt er zu einem einspaltigen Layout.

Pseudoklasse „:has()“ für CSS

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.

Beispielsweise steht p:has(span) für einen Absatzselektor, der einen Bereich enthält. Damit können Sie den übergeordneten Absatz selbst oder einen beliebigen Inhalt darin gestalten. Sie können auch figure:has(figcaption) verwenden, um ein Abbildungselement zu gestalten, das eine Bildunterschrift enthält.

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

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

Eine ausführlichere Erläuterung und einige unterhaltsame Demos finden Sie im Una-Artikel @container and :has(): two faster responsive APIs.

Desitizer-API

Die meisten Webanwendungen haben oft mit nicht vertrauenswürdigen Strings zu tun, aber es kann schwierig sein, diese Inhalte sicher zu rendern. Ohne ausreichende Sorgfalt kann es leicht passieren, dass sich aus Versehen Möglichkeiten für Cross-Site-Scripting-Sicherheitslücken ergeben.

Es gibt Bibliotheken wie DomPurify, die zwar hilfreich sind, aber einen geringen Wartungsaufwand verursachen. Die HTML Sanitizer API trägt dazu bei, die Anzahl der Sicherheitslücken beim Cross-Site-Scripting zu reduzieren, indem eine Desinfektion in die Plattform integriert wird.

Erstellen Sie eine neue Sanitizer-Instanz, um sie zu verwenden. 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, sodass Sie verschiedene Konfigurationsoptionen angeben können, z. B. bestimmte Elemente löschen 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 mit der Sanitizer API.

Einstellung von Web SQL für nicht sichere Kontexte

Vor einiger Zeit haben wir unsere Pläne zur Einstellung von Web SQL bekannt gegeben. 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 Mobilgeräten aktualisieren. Aktualisieren Sie dazu das Manifest der Web-App.
  • Die Multi-Screen API Placement API erhält genaue Bildschirmnamen-Labels.
  • Die Overlay API für Fenstersteuerelemente ist jetzt verfügbar. PWAs können damit ein App-ähnliches Design erzeugen, indem die vorhandene Titelleiste mit voller Breite durch ein kleines Overlay ersetzt wird. Auf diese Weise können Sie benutzerdefinierte Inhalte im Bereich der Titelleiste platzieren.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 105 finden Sie unter den folgenden Links.

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 Pete LePage. Sobald Chrome 106 veröffentlicht wird, informieren wir Sie über die Neuheiten in Chrome.