Novità di Chrome 112

Adriana Jara

Tieni presente quanto segue:

Sono Adriana Jara. Analizziamo le novità di Chrome 112 per gli sviluppatori.

Supporto CSS per la nidificazione.

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

Prima della nidificazione, ogni selettore doveva essere dichiarato esplicitamente, separatamente l'uno dall'altro. Questo porta alla ripetizione, al blocco del foglio di stile e a un'esperienza di creazione dispersa.

Prima
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Dopo la nidificazione, i selettori possono essere continuati e le relative regole di stile possono essere raggruppate.

Dopo
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

La nidificazione aiuta gli sviluppatori riducendo la necessità di selettori ripetuti e consentendo al contempo di collocare le regole di stile per gli elementi correlati. Inoltre, può contribuire ad applicare gli stili al codice HTML che scelgono 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ò essere utile per:

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

Consulta questo articolo per suggerimenti su come utilizzare al meglio la nidificazione di CSS. Per informazioni sul supporto della nidificazione in DevTools, fai clic qui.

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

L'elemento HTML <dialog> è il modo standardizzato per rappresentare una finestra di dialogo o un altro componente interattivo, come un avviso ignorabile o una finestra secondaria, che devono essere visualizzati sopra tutti gli altri contenuti di una pagina web.

Questo elemento HTML è il modo consigliato per creare contenuti di questo tipo, perché le sue funzioni sono state concepite per garantire usabilità e accessibilità migliori e coerenti.

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

D'ora in poi:

I passaggi della finestra di dialogo incentrati sugli elementi attivabili dalla tastiera esaminano gli elementi attivabili dalla tastiera anziché qualsiasi elemento attivabile L'elemento <dialog> viene impostato in modo attivo se ha impostato l'attributo di messa a fuoco automatica.

L'elemento <dialog> viene impostato come elemento di riserva invece di essere "reimpostato" all'elemento <body>.

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

Omissione dei gestori del recupero autonomo dei service worker.

Da Chrome 112, l'avvio del service worker e l'invio del listener dal percorso critico di navigazione vengono omessi, se uno user agent identifica che tutti i listener di recupero del service worker sono autonome.

Questa funzionalità velocizza la navigazione nelle pagine.

Il gestore del recupero era uno dei requisiti delle PWA perché un'app web fosse installabile. Sospettiamo che potrebbe essere il motivo per cui alcuni siti hanno essenzialmente un gestore del recupero vuoto. Tuttavia, avviare un service worker ed eseguire un listener no-op comporta solo un overhead, senza portare nessuno dei vantaggi che potrebbero essere implementati con il service worker giusto, come la memorizzazione nella cache o le funzionalità offline. Per questo motivo Chrome ora 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 sono autonomi e inviterà gli sviluppatori a rimuovere questi listener.

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

E tanto altro.

Ovviamente c'è molto altro.

  • Il 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 i selettori di perforazione.

Per approfondire

Vengono trattati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 112.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Sono Adriana Jara e non appena uscirà Chrome 113 sarò qui per raccontarti le novità di Chrome.