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. Vediamo quali sono le novità di Chrome 99 per gli sviluppatori.

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 numero della nuova 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.

Pagina dei flag di Chrome che mette in evidenza 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 "Stringa user agent Firefox 100". È buona prassi testare il 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. Ciò è particolarmente utile per codebase di grandi dimensioni, sistemi di progettazione e stili di terze parti nelle applicazioni.

Introducono un nuovo livello per il file CSS cascade. Con gli stili a livelli, la precedenza di un livello supera sempre la specificità di un selettore.

Illustrazione della demo del progetto di suddivisione dell&#39;interfaccia utente

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 saperne di più, consulta I livelli Cascade saranno disponibili 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. È disponibile un nuovo metodo showPicker() nell'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.

Screenshot dei selettori del browser
Selettori delle date dei browser per computer Chrome, Chrome per dispositivi mobili, Safari desktop, Safari mobile e Firefox per computer (luglio 2021).

Per utilizzarlo, chiama showPicker() sull'elemento <input>. In questo esempio, l'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.

Naturalmente c'è molto altro.

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 a mano libera.

Per approfondire

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

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.

Mi chiamo Pete LePage e non appena uscirà Chrome 100, saranno qui per dirti le novità di Chrome.