Novità di Chrome 105

Pete LePage

Tieni presente quanto segue:

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 ulteriori 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 dei 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 quali sono le novità di Chrome.