Query supporti aggiornamento CSS

Adatta l'interfaccia utente alle funzionalità della frequenza di aggiornamento dello schermo.

Adam Argyle

Le query multimediali 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 a seconda delle dimensioni dello schermo, degli orientamenti e di altri fattori.

La query supporti update ti consente di adattare l'UI alla frequenza di aggiornamento di un dispositivo. La funzionalità può restituire un valore fast, slow o none relativo alle funzionalità di diversi dispositivi.

Dispositivi e frequenza di aggiornamento

La maggior parte dei dispositivi per cui progetti hanno una frequenza di aggiornamento elevata. Sono inclusi i computer e la maggior parte dei dispositivi mobili.

Puoi eseguire query sul dispositivo, verificare se ha una frequenza di aggiornamento elevata per il rendering dei contenuti e applicare lo stile di conseguenza, pur continuando a fornire un unico foglio di stile.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

Gli eReader e dispositivi come i sistemi di pagamento a bassa potenza potrebbero avere una frequenza di aggiornamento lenta. Sapere che il dispositivo non è in grado di gestire animazioni o aggiornamenti frequenti significa che puoi risparmiare batteria o aggiornamenti delle visualizzazioni errati.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

Infine, esistono scenari come la stampa su carta o i display e-ink che possono offrire solo un singolo passaggio di rendering. Un output come questo non può essere aggiornato e viene chiamato none. È possibile eseguire query in questo modo:

@media (update: none) {
  /* one time render like printed paper */
}

Nel codePen seguente, viene visualizzata un'animazione al passaggio del mouse migliorata progressivamente utilizzando questa nuova query multimediale di aggiornamento:

Altre risorse

• Query supporti CSS di livello 4
• Aggiornamento della query multimediale su MDN