Novità di Chrome 112

Adriana Jara

Tieni presente quanto segue:

Mi chiamo Adriana Jara. Vediamo quali sono le novità di Chrome 112 per gli sviluppatori.

Supporto CSS per la nidificazione.

Una delle nostre funzionalità di preprocessore CSS preferite è ora integrata nel linguaggio: le regole di stile di nidificazione.

Prima della nidificazione, ogni selettore doveva essere dichiarato esplicitamente, separatamente l'uno con l'altro. Questo porta a ripetizioni, in blocco di fogli di stile e a una un'esperienza senza intervento manuale.

Prima
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Dopo la nidificazione, i selettori possono essere le regole di stile continue e correlate possono essere raggruppate al suo interno.

Dopo
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

La nidificazione aiuta gli sviluppatori a ridurre la necessità di ripetere i selettori, co-localizzando al contempo le regole di stile per gli elementi correlati. Inoltre, consente di abbinare gli stili al codice HTML scelto come target.

Se il componente .nesting nell'esempio è stato rimosso dal progetto, puoi eliminare l'intero gruppo anziché cercare nei file le istanze del selettore correlate.

La nidificazione può aiutarti con:

  • Organizzazione.
  • Riduzione delle dimensioni del file.
  • Refactoring

Consulta questo articolo per suggerimenti su come sfruttare al meglio la nidificazione in CSS. Qui puoi trovare assistenza per la nidificazione in DevTools.

Aggiornamento dell'algoritmo per lo stato iniziale di <dialog>.

L'elemento HTML <dialog> è il metodo standardizzato per rappresentare una finestra di dialogo o un altro componente interattivo, ad esempio un avviso ignorabile o una finestra secondaria, che deve essere visualizzato sopra tutti gli altri contenuti di una pagina web.

Questo elemento HTML è il metodo consigliato per creare contenuti di questo tipo perché le sue funzionalità sono state concepite per fornire usabilità e accessibilità migliori e coerenti.

Una di queste funzionalità consente di gestire l'elemento su cui impostare lo stato attivo all'apertura della finestra di dialogo. In questa versione l'algoritmo che seleziona quell'elemento è stato aggiornato.

D'ora in poi:

I passaggi per l'attivazione della finestra di dialogo esaminano gli elementi attivabili dalla tastiera anziché qualsiasi elemento attivabile L'elemento <dialog> stesso viene messo a fuoco se ha impostato l'attributo della messa a fuoco automatica

L'elemento <dialog> stesso viene impostato come elemento di riserva anziché come "reimpostazione" all'elemento <body>.

Per ulteriori dettagli sull'elemento <dialog>, consulta la documentazione.

Ignorare i gestori di recupero dei lavoratori di servizio.

A partire da Chrome 112, l'avvio del service worker e l'invio del listener dal percorso critico di navigazione verranno omessi se uno user agent rileva che tutti i listener di recupero del service worker sono autonome.

Questa funzionalità rende la navigazione di queste pagine più veloce.

Avere il gestore di recupero era uno dei requisiti della PWA perché un'app web fosse installabile. Sospettiamo che questa possa essere la ragione per cui alcuni siti hanno essenzialmente un gestore di recupero vuoto. Tuttavia, avviare un service worker ed eseguire un listener autonomo porta solo l'overhead, senza offrire nessuno dei vantaggi che potrebbero essere implementati con il service worker giusto, come la memorizzazione nella cache o le funzionalità offline. Quindi ora Chrome le ignora per migliorare la navigazione.

Nell'ambito di questa modifica, Chrome mostrerà avvisi della console se tutti i listener di recupero del Service worker non sono operativi e inviterà gli sviluppatori a rimuovere questi listener di recupero.

Avvisi in DevTools per i gestori di recupero dei service worker vuoti.

E tanto altro.

Naturalmente c'è molto altro.

  • Il setter per document.domain è stato deprecato.
  • È in corso una prova dell'origine per il ritiro di X-Requested-With header in WebView
  • Il Registratore in Devtools ora può registrare con selettori di pierce.

Per approfondire

Vengono illustrati solo alcuni dei punti salienti. Consulta i link qui sotto per altre modifiche in Chrome 112.

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.

Mi chiamo Adriana Jara e non appena verrà rilasciato Chrome 113 sarò qui per dirti le novità di Chrome.