Dazu sollten Sie Folgendes wissen:
- Containerabfragen und :has() sind responsive Übereinstimmungen.
- Die neue Sanitizer API bietet einen robusten Prozessor für beliebige Strings, um Cross-Site-Scripting-Sicherheitslücken zu verringern.
- Wir machen einen weiteren Schritt in Richtung der Einstellung von Web SQL.
- Und es gibt viele weitere.
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.
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.
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.
- Neu in den Chrome-Entwicklertools (105)
- Einstellung und Entfernung von Chrome 105
- Updates auf ChromeStatus.com für Chrome 105
- Änderungsliste des Chromium-Quell-Repositorys
- Release-Kalender für Chrome
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.