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>
comedate
,color
edatalist
. - 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
eContextRestored
- 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.