Novità di Chrome 105

Pete LePage

Tieni presente quanto segue:

Mi chiamo Pete LePage. Vediamo quali sono le novità di Chrome 105 per gli sviluppatori.

Query dei contenitori e proprietà CSS :has()

Le query dei contenitori, una delle funzionalità più richieste, saranno disponibili in Chrome 105. Consentono agli sviluppatori di eseguire query su un selettore principale per le informazioni sulle dimensioni e sullo stile, consentendo a un elemento secondario di avere la propria logica di stile adattabile, indipendentemente da dove si trova in una pagina.

Sono simili a una query @media, tranne per il fatto che vengono valutate in base alle dimensioni di un contenitore anziché alle 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 sul contenitore delle schede. L'impostazione di container-type su inline-size esegue una query sulle dimensioni inline-direction dell'elemento principale.

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

Ora possiamo usare il contenitore per applicare stili a tutti i suoi elementi figlio usando @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, viene attivato un layout con una sola colonna.

Pseudo classe CSS :has()

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

Ad esempio, p:has(span) indica un selettore di paragrafi con uno spazio al suo interno. Puoi utilizzarlo per applicare uno stile al paragrafo principale stesso o a qualsiasi elemento al suo interno. In alternativa, puoi utilizzare figure:has(figcaption) per applicare 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 potenti nuove API adattabili per una spiegazione più dettagliata e alcune demo divertenti.

API Sanitizer

La maggior parte delle app web gestisce spesso stringhe non attendibili, ma il rendering sicuro di questi contenuti può essere complicato. Senza la dovuta attenzione, è facile creare accidentalmente opportunità per vulnerabilità di cross-site scripting.

Esistono librerie come DomPurify che sono utili, ma comportano un piccolo onere di manutenzione. L'API HTML Sanitizer contribuisce a ridurre il numero di vulnerabilità di cross-site scripting integrando la sanitizzazione nella piattaforma.

Per utilizzarlo, crea una nuova istanza di Sanitizer. Quindi, chiama setHTML() sull'elemento in cui vuoi inserire il contenuto sanitizzato.

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 eliminando determinati elementi o autorizzando altri.

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

Per ulteriori dettagli, consulta Manipolazione sicura del DOM con l'API Sanitizer.

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, Web SQL verrà ritirato nei contesti non sicuri.

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

E tanto altro.

Ovviamente ce ne sono molti altri.

  • Ora puoi aggiornare il nome di una PWA installata sia su computer che su dispositivi mobili aggiornando il manifest dell'app web.
  • L'API Multi-screen Window Position ottiene etichette accurate per il nome della schermata.
  • L'API overlay dei controlli della finestra è ora disponibile. Consente alle PWA di offrire un'esperienza più simile a un'app sostituendo la barra del titolo esistente a larghezza intera con un piccolo overlay. In questo modo puoi inserire contenuti personalizzati nell'area della barra del titolo.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 105.

Iscriviti

Per rimanere al passo con le novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 106, sarò qui per dirti le novità di Chrome.