Novità di Chrome 99

Pete LePage

Tieni presente quanto segue:

• Mancano solo poche settimane al lancio della versione 100 di Chrome e Firefox.
• I livelli di cascata CSS ti consentono di avere un maggiore controllo sul CSS e aiutano a evitare conflitti di specificità dello stile.
• Il metodo showPicker() consente di mostrare in modo programmatico un selettore del browser per gli elementi <input> come date, color e datalist.
• E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 99.

Chrome 100 e Firefox 100

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

È necessario verificare che qualsiasi codice che controlli i numeri di versione o analizzi la stringa dell'user agent non presenti problemi.

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

Nel menu Impostazioni di Firefox Nightly, puoi attivare l'opzione "Stringa dello user agent di Firefox 100". Ti consigliamo di testare il tuo sito per assicurarti che tutto funzioni come previsto.

Per informazioni dettagliate, consulta l'articolo Chrome e Firefox raggiungeranno presto la versione principale 100.

Livelli CSS con struttura a cascata

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

Introducono un nuovo livello alla cascata CSS. Con gli stili a livelli, la precedenza di un livello supera sempre la specificità di un selettore.

Se stai cercando di applicare uno stile a un link all'interno di un .card, all'interno di un .post verrà applicato il selettore più specifico. Utilizzando la regola @layer, puoi specificare in modo più esplicito la specificità dello stile di ciascuno e assicurarti che lo stile del link nella scheda sostituisca quello nel post.

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

  .link {
    color: blue;
  }
}

Questo accade a causa della precedenza in cascata. Gli stili a livelli creano nuovi piani con effetto cascata.

I livelli in 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 in cascata arriveranno nel tuo browser.

showPicker() per gli elementi di input

Per molto tempo abbiamo dovuto ricorrere a librerie di widget personalizzate o ad hack per mostrare un selettore della data. Esiste un nuovo metodo showPicker() in HTML InputElements. È il modo canonico per mostrare un selettore del browser, non solo per date, ma anche per time, color e altri elementi <input> con selettori.

Per utilizzarlo, chiama showPicker() sull'elemento <input>. In questo esempio, lo ho inserito in un blocco try…catch. In questo modo posso fornire un'opzione di riserva se il browser non supporta l'API o non riesce a mostrare il selettore. In questo modo, gli utenti continueranno a usufruire di un'esperienza 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.
  }
});

Consulta Mostrare un selettore del browser per data, ora, colore e file per informazioni complete e tutti i diversi tipi di <input> che puoi utilizzare per showPicker().

E tanto altro.

Ovviamente ce ne sono molti altri.

L'API Canvas2D è stata aggiornata con l'aggiunta di nuove funzionalità, tra cui:

• Due nuovi eventi per ContextLost e ContextRestored
• Un'opzione willReadFrequently
• Maggiore supporto per i 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à oscura.

Ora è disponibile anche l'API di riconoscimento della scrittura.

Per approfondire

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

• Novità di Chrome DevTools (99)
• Ritiramenti e rimozioni in Chrome 99
• Aggiornamenti di ChromeStatus.com per Chrome 99
• Elenco delle modifiche al repository di origine di Chromium
• Calendario delle release di Chrome

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 100, sarò qui per dirti le novità di Chrome.