Nieuw in Chrome 105

Piet LePage

Dit is wat u moet weten:

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 105.

Containerquery's en de CSS-eigenschap :has()

Containerquery's, een van de meest gevraagde functies, komen terecht in Chrome 105. Ze stellen ontwikkelaars in staat een bovenliggende selector te vragen naar de grootte en stijlinformatie, waardoor een onderliggend element de eigenaar kan worden van zijn responsieve stijllogica, waar het zich ook bevindt. op een pagina.

Ze lijken op een @media-query, behalve dat ze worden geëvalueerd op basis van de grootte van een container in plaats van de grootte van de viewport.

Containerquery versus mediaquery.

Als u containerquery's wilt gebruiken, moet u een bovenliggend element inperken. U hebt bijvoorbeeld een kaart met een afbeelding en wat tekst.

Enkele kaart met twee kolommen.

Als u een containerquery wilt maken, stelt u container-type in voor de kaartcontainer. Als u container-type instelt op inline-size wordt de grootte van de ouder in de inline-direction opgevraagd.

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

Nu kunnen we die container gebruiken om stijlen toe te passen op elk van zijn kinderen met @container .

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

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

In dit geval wordt, wanneer de container kleiner is dan 400 px, overgeschakeld naar een lay-out met één kolom.

CSS :has() pseudo-klasse

We kunnen nog een stap verder gaan met de CSS :has() pseudo-klasse. Hiermee kunt u controleren of een ouderelement onderliggende elementen bevat met specifieke parameters.

p:has(span) geeft bijvoorbeeld een alineakiezer aan met een span erin. U kunt dit gebruiken om de bovenliggende alinea zelf, of iets daarin, op te maken. Of u kunt figure:has(figcaption) gebruiken om een ​​figuurelement op te maken dat een bijschrift bevat.

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

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

Bekijk Una's artikel @container en :has(): twee krachtige nieuwe responsieve API's voor een meer gedetailleerde uitleg en enkele leuke demo's.

Sanitizer-API

De meeste webapps hebben vaak te maken met niet-vertrouwde tekenreeksen, maar het veilig weergeven van die inhoud kan lastig zijn. Zonder voldoende zorg is het gemakkelijk om per ongeluk mogelijkheden te creëren voor kwetsbaarheden in cross-site scripting.

Er zijn bibliotheken zoals DomPurify die helpen, maar een kleine onderhoudslast toevoegen. De HTML Sanitizer API helpt het aantal cross-site scripting-kwetsbaarheden te verminderen door opschoning in het platform in te bouwen.

Om het te gebruiken, maakt u een nieuw exemplaar van Sanitizer. Roep vervolgens setHTML() aan voor het element waarin u de opgeschoonde inhoud wilt invoegen.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

De Sanitizer API is standaard ontworpen om veilig en aanpasbaar te zijn, waardoor u verschillende configuratie-opties kunt opgeven, bijvoorbeeld bepaalde elementen kunt laten vallen of andere kunt toestaan.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Bekijk Veilige DOM-manipulatie met de Sanitizer API voor meer details.

Beëindiging van Web SQL voor niet-beveiligde contexten

Enige tijd geleden hebben we onze plannen aangekondigd om Web SQL af te schaffen. Vanaf Chrome 105 wordt Web SQL beëindigd in niet-beveiligde contexten.

Als u Web SQL in een niet-beveiligde context gebruikt, moet u zo snel mogelijk migreren naar IndexDB of een andere lokale opslagcontainer.

En meer!

Natuurlijk is er nog veel meer.

  • U kunt nu de naam van een geïnstalleerde PWA op zowel desktop als mobiel bijwerken door het webapp-manifest bij te werken.
  • De API voor vensterplaatsing op meerdere schermen krijgt nauwkeurige schermnaamlabels.
  • De overlay-API voor vensterbediening is nu beschikbaar. Hiermee kunnen PWA's een meer app-achtig gevoel geven door de bestaande titelbalk over de volledige breedte te vervangen door een kleine overlay. Hierdoor kunt u aangepaste inhoud in het titelbalkgebied plaatsen.

Verder lezen

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 105.

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 106 uitkomt, zijn we hier om je te vertellen wat er nieuw is in Chrome!