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, eine der am häufigsten angeforderten Funktionen, werden in Chrome 105 eingeführt. Entwickler können damit einen übergeordneten Selektor nach Größe und Stilinformationen abfragen. So kann ein untergeordnetes Element Inhaber der responsiven Stillogik sein, unabhängig davon, wo es sich auf einer 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. Das kann beispielsweise eine Karte mit einem Bild und Text sein.

Einzelne zweispaltige Karte.

Um eine Containerabfrage zu erstellen, 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 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;
  }
}

Wenn der container in diesem Fall kleiner als 400 px ist, wechselt er zu einem einspaltigen Layout.

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 */
}

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

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 eine neue Instanz von Sanitizer, um ihn 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 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 unsere Pläne zur Einstellung von Web SQL angekündigt. 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. PWAs verleihen der App ein App-ähnliches Gefühl, da sie die vorhandene Titelleiste über die gesamte Breite durch ein kleines Overlay ersetzen. 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.