Adatta la tua UI alle funzionalità di frequenza di aggiornamento dello schermo.
Le query supporti CSS sono un potente strumento che ti consente di controllare l'aspetto del tuo sito web o della tua app web in base al dispositivo su cui vengono visualizzati. Con le query supporti puoi creare layout diversi per schermi di dimensioni diverse, orientamenti e altri fattori.
La query supporti di update offre un modo per adattare l'UI alla frequenza di aggiornamento di un dispositivo. La
funzionalità può segnalare un valore di fast, slow o none relativo alle
funzionalità dei diversi dispositivi.
Dispositivi e frequenza di aggiornamento
La maggior parte dei dispositivi per cui progetti ha probabilmente una frequenza di aggiornamento veloce. Sono inclusi i computer e la maggior parte dei dispositivi mobili.
Puoi eseguire query sul dispositivo per controllare se ha una frequenza di aggiornamento veloce per il rendering dei contenuti e applicare uno stile di conseguenza, continuando a pubblicare un singolo foglio di stile.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Gli eReader e i dispositivi come i sistemi di pagamento a bassa potenza, potrebbero avere una frequenza di aggiornamento lenta. Sapendo che il dispositivo non è in grado di gestire animazioni o aggiornamenti frequenti, puoi risparmiare batteria o aggiornare le visualizzazioni in modo errato.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Infine, ci sono scenari come i display cartacei o e-ink che possono
offrire un solo pass per il rendering. Un output come questo non può aggiornarsi e viene denominato none. Può essere eseguita una query nel seguente modo:
@media (update: none) {
/* one time render like printed paper */
}
Nel seguente CodePen, puoi visualizzare un'animazione al passaggio del mouse migliorata progressivamente utilizzando questa nuova query multimediale di aggiornamento: