Novità di Chrome 105

Pete LePage

Ecco cosa devi sapere:

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 105.

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.

Query contenitore e query supporti.

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 utilizzare questo contenitore per applicare stili a qualsiasi elemento secondario 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, 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 */
}

Consulta l'articolo di Una @container e :has(): due nuove potenti 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 sanificazione nella piattaforma.

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

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 eliminare determinati elementi o consentirne 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 Manipolazione sicura del DOM con l'API Sanitizer.

Ritiro di Web SQL per i contesti non sicuri

Qualche tempo fa abbiamo annunciato l'intenzione di ritirare SQL web. A partire da Chrome 105, Web SQL verrà ritirato nei contesti non sicuri.

Se utilizzi Web SQL in contesti non sicuri, devi eseguire la migrazione a IndexDB o a un altro contenitore 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 di posizionamento delle finestre multischermo riceve etichette dei nomi degli schermi precise.
  • 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 non perderti nessuna 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.