In Chrome 74 abbiamo aggiunto il supporto di:
- La creazione di campi privati delle classi in JavaScript è ora molto più pulita.
- Puoi rilevare quando l'utente ha richiesto un'esperienza di movimento ridotta.
- Eventi di transizione CSS
- Aggiunge nuove API dei criteri delle funzionalità per verificare se le funzionalità sono abilitate o meno.
E c'è molto altro.
Mi chiamo Pete LePage. Diamo un'occhiata alle novità di Chrome 74 per gli sviluppatori.
Log delle modifiche
Queste informazioni riguardano solo alcuni dei punti salienti. Consulta i link di seguito per ulteriori modifiche in Chrome 74.
- Novità di Chrome DevTools (74)
- Deprecazioni e rimozioni di Chrome 74
- Aggiornamenti di ChromeStatus.com per Chrome 74
- Novità di JavaScript in Chrome 74
- Elenco delle modifiche al repository di codice sorgente di Chromium
Campi privati del corso
I campi delle classi semplificano la sintassi delle classi evitando la necessità di funzioni del costruttore solo per definire le proprietà dell'istanza. In Chrome 72, abbiamo aggiunto il supporto per i campi dei corsi pubblici.
class IncreasingCounter {
// Public class field
_publicValue = 0;
get value() {
return this._publicValue;
}
increment() {
this._publicValue++;
}
}
Ho detto che i campi privati del corso erano in lavorazione. Sono felice di dire che i campi privati
delle classi sono arrivati in Chrome 74. La nuova sintassi dei campi privati è simile a quella dei campi pubblici, ad eccezione del fatto che puoi contrassegnare il campo come privato utilizzando un #
(simbolo di cancelletto). Pensa a #
come a parte del nome del campo.
class IncreasingCounter {
// Private class field
#privateValue = 0;
get value() {
return this.#privateValue;
}
increment() {
this.#privateValue++;
}
}
Ricorda che i campi private
sono privati. Sono accessibili
in classe, ma non al di fuori del corpo del corso.
class SimpleClass {
_iAmPublic = 'shared';
#iAmPrivate = 'secret';
doSomething() {
...
}
}
Per ulteriori informazioni sui corsi pubblici e privati, consulta il post di Mathias sui campi dei corsi.
prefers-reduced-motion
Alcuni utenti hanno segnalato che si sono verificati problemi di movimento durante la visualizzazione dello scorrimento con parallasse, dello zoom e di altri effetti di movimento. Per risolvere questo problema, molti sistemi operativi offrono la possibilità di ridurre il movimento.
Chrome ora fornisce una query supporti, prefers-reduced-motion
, che fa parte della
specifica di livello 5 delle query supporti, che ti consente di rilevare quando questa
opzione è attivata.
@media (prefers-reduced-motion: reduce)
Immagina di avere un pulsante di iscrizione che attira l'attenzione su se stesso con un leggero movimento. La nuova query mi consente di interrompere il movimento solo per il pulsante.
button {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Leggi l'articolo di Tom Muoviti! O forse no, se l'utente preferisce-reduced-motion! per ulteriori dettagli.
Eventi transition
CSS
La specifica delle transizioni CSS richiede che gli eventi di transizione vengano inviati quando una transizione viene accodata, inizia, termina o viene annullata. Questi eventi sono supportati da altri browser da un po'...
Finora, però, non erano supportati in Chrome. Ora in Chrome 74 puoi ascoltare:
transitionrun
transitionstart
transitionend
transitioncancel
Monitorando questi eventi, è possibile monitorare o modificare il comportamento durante l'esecuzione di una transizione.
Aggiornamenti dell'API delle norme relative alle funzionalità
I criteri delle funzionalità consentono di abilitare, disabilitare e modificare selettivamente il comportamento delle API e di altre funzionalità web. A tale scopo, utilizza l'intestazione Feature-Policy o l'attributo allow in un iframe.
Feature-Policy: geolocation 'self'
<iframe ... allow="geolocation self">
</iframe>
In Chrome 74 viene introdotto un nuovo insieme di API per verificare quali funzionalità sono attive:
- Puoi ottenere un elenco di funzionalità consentite con
document.featurePolicy.allowedFeatures()
. - Puoi verificare se una funzionalità specifica è consentita con
document.featurePolicy.allowsFeature(...)
. - Inoltre, puoi ottenere un elenco di domini utilizzati nella pagina corrente che consentono
una funzionalità specificata con
document.featurePolicy.getAllowlistForFeature()
.
Per ulteriori dettagli, consulta il post Introduzione alle norme relative alle funzionalità.
E tanto altro.
Queste sono solo alcune delle modifiche di Chrome 74 per gli sviluppatori, e ovviamente ce ne sono molte altre. Personalmente, sono molto entusiasta di KV Storage, un servizio di archiviazione chiave/valore asincrono superveloce, disponibile come prova dell'origine.
La conferenza Google I/O si terrà a breve
Non dimenticare che mancano solo poche settimane (dal 7 al 9 maggio) alla conferenza Google I/O e troverai tante nuove fantastiche novità. Se non puoi partecipare, tutte le sessioni saranno trasmesse in live streaming e in seguito saranno disponibili sul nostro canale YouTube Chrome Developers.
Abbonati
Se vuoi tenerti al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.
Sono Pete LePage e non appena uscirà Chrome 75 sarò qui per dirti le novità di Chrome.