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>
comedate
,color
edatalist
. - 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.
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.
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.
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
eContextRestored
- 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.
- Novità di Chrome DevTools (99)
- Deprecazioni e rimozioni di Chrome 99
- Aggiornamenti di ChromeStatus.com per Chrome 99
- 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.
Mi chiamo Pete LePage e non appena verrà rilasciata la versione 100 di Chrome, sarò qui per farti conoscere le novità di Chrome.