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 il nidificazione.

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

Prima dell'annidamento, ogni selettore doveva essere dichiarato esplicitamente, separatamente da un altro. Ciò comporta ripetizione, accumulo di stili e un'esperienza di creazione frammentata.

Prima
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Dopo l'nidificazione, i selettori possono essere proseguiti e le relative regole di stile possono essere raggruppate al loro 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 le istanze del selettore correlate nei file.

L'organizzazione in nidificazioni può aiutarti a:

  • Organizzazione.
  • Riduci le dimensioni del file.
  • Refactoring.

Consulta questo articolo per suggerimenti su come sfruttare al meglio il nidificazione CSS e qui puoi trovare il supporto per la nidificazione in devtools.

Aggiornamento dell'algoritmo per l'attenzione iniziale di <dialog>.

L'elemento HTML <dialog> è il modo 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 modo consigliato per creare questi contenuti perché le sue funzionalità sono state create per offrire usabilità e accessibilità migliori e coerenti.

Una di queste funzionalità è la gestione dell'elemento su cui viene applicato il fuoco quando si apre la finestra di dialogo. In questa versione è stato aggiornato l'algoritmo che seleziona l'elemento.

D'ora in poi:

I passaggi per lo stato attivo della finestra di dialogo esaminano gli elementi attivabili tramite tastiera anziché qualsiasi elemento attivabile L'elemento <dialog> stesso acquisisce lo stato attivo se è impostato l'attributo autofocus

L'elemento <dialog> stesso viene impostato come elemento di riserva anziché essere "reimpostato" sull'elemento <body>.

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

Ignorazione dei gestori di recupero no-op del service worker.

A partire da Chrome 112, l'avvio del worker del servizio e l'invio dell'ascoltatore dal percorso critico di navigazione verranno omessi se un user agent identifica che tutti gli ascoltatori di recupero del worker del servizio sono no-op.

Questa funzionalità velocizza la navigazione in queste pagine.

Avere il gestore di recupero era uno dei requisiti della PWA perché un'app web fosse installabile. Sospettiamo che questo possa essere il motivo per cui alcuni siti hanno un gestore di recupero sostanzialmente vuoto. Tuttavia, l'avvio di un servizio worker ed esecuzione di un ascoltatore no-op comporta solo un sovraccarico, senza offrire nessuno dei vantaggi che potrebbero essere implementati con il servizio 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 nella console se tutti gli ascoltatori di recupero del service worker sono no-op e incoraggerà gli sviluppatori a rimuoverli.

Avvisi in DevTools per gli handler di recupero dei worker di servizio vuoti.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • Il metodo setter per document.domain è stato ritirato.
  • È disponibile 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

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

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 Adriana Jara e, non appena verrà rilasciata la versione 113 di Chrome, sarò qui per dirti quali sono le novità.