Dazu sollten Sie Folgendes wissen:
- Containerabfragen und :has() wurden abgeglichen. im reaktionsschnellen Himmel.
- Die neue Sanitizer API bietet einen robusten Prozessor für beliebige Zeichenfolgen verwenden, um Cross-Site-Scripting-Sicherheitslücken zu reduzieren.
- Wir machen einen weiteren Schritt auf dem Weg zur Einstellung von Web SQL.
- Und es gibt noch viele weitere Funktionen.
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.
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.
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.
- Neu bei den Chrome-Entwicklertools (105)
- Chrome 105 – Einstellung und Entfernung
- ChromeStatus.com-Updates für Chrome 105
- Änderungsliste für das Chromium-Quell-Repository
- Release-Kalender für Chrome
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.