Tieni presente quanto segue:
- CSS ora supporta le regole di nidificazione.
- L'algoritmo per impostare lo stato attivo iniziale sugli elementi
<dialog>
è stato aggiornato. - D'ora in poi i gestori
fetch()
autonomi sui service worker verranno ignorati per velocizzare la navigazione. - E ce ne sono molti altri.
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.
.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.
.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.
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.
- Novità di Chrome DevTools (112)
- Deprecazioni e rimozioni di Chrome 112
- Aggiornamenti di ChromeStatus.com per Chrome 112
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario delle release di Chrome
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.