Novità di Chrome 105

Pete LePage

Tieni presente quanto segue:

Mi chiamo Pete LePage. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 105.

Query del contenitore e proprietà CSS :has()

Una delle funzionalità più richieste è disponibile in Chrome 105 per le query dei container. Consentono agli sviluppatori di eseguire query su un selettore padre per conoscere le sue dimensioni e le informazioni sullo stile, consentendo a un elemento secondario di possedere la propria logica di stile adattabile, indipendentemente da dove si trova nella pagina.

Sono simili a una query @media, tranne per il calcolo in base alle dimensioni di un contenitore anziché a quelle dell'area visibile.

Query container e query multimediali.

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 di schede. L'impostazione di container-type su inline-size esegue la query sulla dimensione inline-direction dell'elemento padre.

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

Ora possiamo utilizzare quel container per applicare stili a tutti i suoi asset secondari utilizzando @container.

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

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

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

Pseudo-classe :has() CSS

Possiamo fare un ulteriore passo in avanti con la pseudo-classe CSS :has(). Consente di verificare se un elemento principale contiene elementi secondari con parametri specifici.

Ad esempio, p:has(span) indica un selettore di paragrafo con un intervallo all'interno. Puoi utilizzarlo per definire lo stile del paragrafo principale o di qualsiasi elemento al suo interno. In alternativa, puoi usare figure:has(figcaption) per definire uno stile a un elemento 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 ha spesso stringhe non attendibili, ma eseguire un rendering sicuro dei contenuti può essere difficoltoso. Senza adeguata attenzione, è facile creare accidentalmente opportunità per vulnerabilità cross-site scripting (XSS).

Esistono librerie come DomPurify che possono aiutare, ma richiedono un piccolo onere di manutenzione. L'API HTML Sanitizer aiuta a ridurre il numero di vulnerabilità cross-site scripting grazie alla sanitizzazione della piattaforma.

Per utilizzarlo, crea una nuova istanza di Sanitizer. Quindi, chiama setHTML() sull'elemento in cui vuoi inserire i contenuti convalidati.

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 per impostazione predefinita e personalizzabile, consentendoti di specificare diverse opzioni di configurazione, ad esempio l'eliminazione di determinati elementi o la possibilità di autorizzarne altri.

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

Per maggiori dettagli, consulta Maneggiamento sicuro del DOM con l'API Sanitizer.

Ritiro dell'SQL web per contesti non sicuri

Qualche tempo fa abbiamo annunciato il nostro piano per il ritiro dell'SQL web. A partire da Chrome 105, SQL web verrà deprecato in contesti non sicuri.

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

E tanto altro.

Ovviamente c'è molto altro.

  • Ora puoi aggiornare il nome di una PWA installata sia su desktop che su dispositivi mobili aggiornando il manifest dell'app web.
  • L'API per il posizionamento di finestre multischermo ottiene etichette accurate dei nomi delle schermate.
  • È ora disponibile l'API overlay dei controlli delle finestre. Consente alle PWA di offrire un aspetto più simile a quello delle app sostituendo la barra del titolo a larghezza intera esistente con un overlay piccolo. In questo modo puoi inserire contenuti personalizzati nell'area della barra del titolo.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 105.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Sono Pete LePage e non appena verrà rilasciata la versione 106 di Chrome, saremo qui per dirti le novità di Chrome.