Novità di Chrome 99

Pete LePage

Tieni presente quanto segue:

  • Mancano solo poche settimane al conto alla rovescia alla versione 100 di Chrome e Firefox.
  • I livelli a cascata CSS offrono un maggiore controllo sul CSS e aiutano a evitare conflitti di specifichetà di stile.
  • Il metodo showPicker() consente di mostrare in modo programmatico un selettore del browser per gli elementi <input> come date, color e datalist.
  • E ce ne sono molte altre.

Mi chiamo Pete LePage. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 99.

Chrome 100 e Firefox 100

Chrome 100 verrà spedito a fine marzo (2022) e Firefox 100 verrà rilasciato poco dopo all'inizio di maggio. Entrambe rappresentano un importante traguardo per il numero di versione e vengono distribuite a tre cifre. Tuttavia, se il codice prevede due cifre, il nuovo numero di versione potrebbe causare problemi.

Qualsiasi codice che controlla i numeri di versione o analizza la stringa dello user agent deve essere controllato per assicurarsi che non ci siano problemi.

Chrome segnala una pagina che evidenzia la nuova opzione #force-major-version-to-100

In Chrome, il flag #force-major-version-to-100 modificherà il numero di versione corrente in 100.

Nel menu Impostazioni di Firefox Nightly, puoi abilitare l'opzione "Firefox 100 User-Agent String". È buona norma testare il tuo sito per assicurarti che tutto funzioni come previsto.

Per informazioni dettagliate, dai un'occhiata a Chrome e Firefox a breve arriveranno alla versione principale 100.

Livelli a cascata CSS

Il supporto per i livelli Cascade CSS e la regola CSS @layer sarà disponibile in Chrome 99. Offrono un controllo più esplicito dei file CSS per evitare conflitti di specificità di stile. Ciò è particolarmente utile per codebase di grandi dimensioni, sistemi di progettazione e per la gestione di stili di terze parti nelle applicazioni.

Introducono un nuovo livello nella cascade CSS. Con gli stili a più livelli, la precedenza di un livello supera sempre la specificità di un selettore.

Illustrazione dalla demo di un progetto della suddivisione della UI

Se stai cercando di definire un link, all'interno di un .card, all'interno di un .post noterai che verrà applicato il selettore più specifico. Se utilizzi la regola @layer, puoi indicare in modo più esplicito la specificità di ogni stile e assicurarti che lo stile del link nella tua scheda sostituisca lo stile del link nel tuo post.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Questo è dovuto alla precedenza a cascata. Gli stili a livelli creano nuovi piani a cascata.

I livelli a cascata che utilizzano la regola CSS @layer sono supportati in Chrome 99, Firefox 97 e Safari 15.4 beta. Per ulteriori informazioni, consulta I livelli Cascade sono in arrivo nel tuo browser.

showChooseer() per gli elementi di input

Per molto tempo abbiamo dovuto ricorrere a librerie di widget personalizzati o trucchi per mostrare un selettore di date. È disponibile un nuovo metodo showPicker() nell'HTML InputElements. È il modo più classico per mostrare un selettore del browser, non solo per gli elementi date, ma anche per time, color e altri <input> con selettori.

Screenshot dei selettori del browser
Selettori della data del browser in Chrome per computer, Chrome per dispositivi mobili, Safari per computer, Safari per dispositivi mobili e Firefox per computer (luglio 2021).

Per usarlo, chiama showPicker() sull'elemento <input>. In questo esempio, l'ho inserito in un blocco try…catch. Se il browser non supporta l'API o non può mostrare il selettore, posso fornirti un'opzione di riserva. In questo modo, garantire agli utenti un'esperienza comunque positiva.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Per informazioni dettagliate, consulta Mostra un selettore del browser per data, ora, colore e file e tutti i diversi tipi di <input> per i quali puoi utilizzare showPicker().

E tanto altro.

Ovviamente c'è molto altro.

L'API Canvas2D è stata aggiornata e ha aggiunto nuove funzionalità, tra cui:

  • Due nuovi eventi per ContextLost e ContextRestored
  • Un'opzione willReadFrequently
  • Maggiore supporto dei modificatori di testo CSS
  • e molto altro.

È disponibile una nuova prova dell'origine per consentire alle PWA di fornire colori alternativi nel manifest dell'app web per la modalità Buio.

Ora puoi utilizzare l'API Riconoscimento della scrittura a mano libera.

Per approfondire

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

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.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 100 di Chrome, sarò qui per farti conoscere le novità di Chrome.