Novità di Chrome 105

Pete LePage

Tieni presente quanto segue:

Mi chiamo Pete LePage. Esaminiamo nel dettaglio scopri le novità di Chrome 105 per gli sviluppatori.

Query contenitore e proprietà CSS :has()

Le query container, una delle funzionalità più richieste, Chrome 105. Consentono agli sviluppatori di eseguire query su un selettore padre per conoscere le dimensioni e informazioni sugli stili, consentendo a un elemento secondario di possedere i propri una logica di stile reattiva, indipendentemente dalla posizione in cui si trovano sulla pagina.

Sono simili a una query @media, con l'eccezione che vengono valutate in base alle dimensioni un container anziché le dimensioni dell'area visibile.

Confronto tra query container e query multimediale.

Per utilizzare le query contenitore, devi impostare il contenimento su un elemento principale. Ad esempio, potresti avere una scheda con un'immagine e del testo.

Scheda singola a due colonne.

Per creare una query contenitore, imposta container-type nel contenitore della scheda. L'impostazione di container-type su inline-size esegue la query su inline-direction dimensione dell'elemento principale.

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

Ora possiamo usare quel container per applicare stili a qualsiasi elemento secondario usando @container.

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

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

In questo caso, quando il container è inferiore a 400 px, passa a una layout a colonna singola.

Pseudo-classe :has() CSS

Possiamo fare un ulteriore passo in questa direzione con la pseudo-classe CSS :has(). it consente di verificare se un elemento principale contiene elementi secondari con specifiche parametri.

Ad esempio, p:has(span) indica un selettore di paragrafo con un intervallo all'interno da questa parte. Puoi usarlo per definire lo stile del paragrafo principale stesso o di qualsiasi altro elemento al suo interno. In alternativa, puoi utilizzare figure:has(figcaption) per applicare uno stile a un elemento di figura che contiene una didascalia.

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

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

Dai un'occhiata all'articolo di Una @container and :has(): due nuove potenti API adattabili per una spiegazione più dettagliata e alcune demo divertenti.

API Sanitizer

La maggior parte delle app web riguarda spesso stringhe non attendibili, ma esegue il rendering in modo sicuro contenuti può essere difficile. Se non si prestano cure sufficienti, è facile ottenere creare opportunità per le vulnerabilità cross-site scripting (XSS).

Esistono librerie come DomPurify che aiutano, ma aggiungono una piccola per la manutenzione. L'API HTML Sanitizer aiuta a ridurre il numero di vulnerabilità cross-site scripting (XSS) con la creazione di sistemi di sanificazione nella piattaforma.

Per utilizzarlo, crea una nuova istanza di Sanitizer. Poi chiama setHTML() sul l'elemento in cui vuoi inserire i contenuti sanitizzati.

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

L'API Sanitizer è progettata per essere sicura e personalizzabile, permettendoti di specificare diverse opzioni di configurazione, ad esempio eliminando determinati elementi o ammetterne altri.

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

Scopri la manipolazione sicura del DOM con l'API Sanitizer. per ulteriori informazioni.

Ritiro di SQL web per contesti non sicuri

Qualche tempo fa abbiamo annunciato i nostri piani per il ritiro di SQL web. A partire da Chrome 105, SQL web verrà ritirato in contesti non sicuri.

Se utilizzi SQL web in contesti non sicuri, devi eseguire la migrazione a IndexDB, o un altro container di archiviazione locale.

E tanto altro.

Naturalmente c'è molto altro.

  • Ora puoi aggiornare il nome di una PWA installata sia su computer che su dispositivo mobile aggiornando il file manifest dell'app web.
  • L'API Multi-screen Window Position ottiene etichette accurate per il nome della schermata.
  • L'API Window Controls overlay è ora disponibile. Consente alle PWA di fornire sostituendo la barra del titolo a larghezza intera esistente con una overlay di piccole dimensioni. In questo modo puoi inserire contenuti personalizzati nell'area della barra del titolo.

Per approfondire

Descrive solo alcuni dei punti salienti. Consulta i link qui sotto per le modifiche aggiuntive in Chrome 105.

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al Canale YouTube per sviluppatori di Chrome, e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Sono Pete LePage e non appena uscirà Chrome 106, saremo qui per dirti le novità di Chrome.