Neu in Chrome 105

Pete LePage

Dazu sollten Sie Folgendes wissen:

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

Containerabfragen und das CSS-Attribut :has()

Containerabfragen, eine der am häufigsten nachgefragten Funktionen, sind Chrome 105. Sie ermöglichen es Entwicklern, einen übergeordneten Selector nach seiner Größe und Stilinformationen, sodass ein untergeordnetes Element unabhängig davon, wo sie sich auf einer Seite befinden.

Sie ähneln einer @media-Abfrage, werden jedoch anhand der Größe von anstatt der Größe des Darstellungsbereichs.

Containerabfrage und Medienabfrage im Vergleich.

Wenn Sie Containerabfragen verwenden möchten, müssen Sie die Begrenzung für ein übergeordnetes Element festlegen. Das kann zum Beispiel eine Karte mit einem Bild und Text sein.

Eine 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 inline-direction abgefragt Größe des übergeordneten Elements.

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

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

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

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

Wenn der container kleiner als 400 px ist, wird in diesem Fall ein einspaltiges Layout.

CSS-:has()-Pseudoklasse

Mit der CSS-Pseudoklasse :has() können wir noch einen Schritt weiter gehen. Es können Sie überprüfen, ob ein übergeordnetes Element untergeordnete Elemente mit bestimmten Parameter.

Beispielsweise gibt p:has(span) einen Absatzselektor mit einem Span innerhalb des Bereichs an. davon. Hiermit können Sie den Stil des übergeordneten Absatzes oder eines beliebigen darin enthalten sind. Du kannst auch figure:has(figcaption) verwenden, um ein Figurenelement zu gestalten mit einer Bildunterschrift.

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

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

Artikel von Una lesen @container und :has(): zwei leistungsstarke neue responsive APIs finden Sie eine ausführlichere Erläuterung und ein paar unterhaltsame Demos.

Sanitizer API

Die meisten Webanwendungen kommen häufig mit nicht vertrauenswürdigen Strings um, rendern diese aber sicher kann knifflig sein. Ohne ausreichende Sorgfalt kann es leicht passieren, schaffen Chancen für Cross-Site-Scripting-Sicherheitslücken.

Bibliotheken wie DomPurify können helfen, aber fügen Sie Wartungsaufwand. Die HTML Sanitizer API reduziert die Anzahl der Cross-Site-Scripting-Sicherheitslücken auf der Plattform einbauen.

Erstellen Sie eine neue Instanz von Sanitizer, um ihn zu verwenden. Rufen Sie dann setHTML() im Element, 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 oder das Zulassen anderer.

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. Beginnt in Chrome 105 (Web SQL) wird in nicht sicheren Kontexten eingestellt.

Wenn Sie Web SQL in unsicheren Kontexten verwenden, sollten Sie zu IndexDB migrieren. oder einen anderen lokalen Speichercontainer.

…und vieles mehr

Natürlich gibt es noch viele weitere.

  • Sie können jetzt den Namen einer installierten PWA sowohl auf dem Computer als auch auf Mobilgeräten aktualisieren indem Sie das Web-App-Manifest aktualisieren.
  • Die Multiscreen-Fenster-Placement-API erhält genaue Labels für Bildschirmnamen.
  • Die Overlay-API für Fenstersteuerelemente ist jetzt verfügbar. So bieten PWAs App-ähnliches Gefühl haben, indem Sie die bestehende Titelleiste in voller Breite gegen eine kleinen Overlay. Damit können Sie benutzerdefinierten Inhalt im Bereich der Titelleiste platzieren.

Weitere Informationen

Hier werden nur einige der wichtigsten Vorteile behandelt. Klicken Sie auf die Links unten, zusätzliche Änderungen in Chrome 105.

Abonnieren

Um immer auf dem Laufenden zu bleiben, abonniere die YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 106 veröffentlicht ist, erfährst du, was es Neues bei Chrome gibt.