Query supporti aggiornamento CSS

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

Adam Argyle

Le query sui media 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 viene visualizzato. Con le query supporti, puoi creare diversi layout per dimensioni dello schermo, orientamenti e altri fattori diversi.

La query media update consente di adattare l'interfaccia utente 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 ha 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 come questa:

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

Nel seguente CodePen, puoi vedere un'animazione di passaggio del mouse migliorata progressivamente utilizzando questa nuova query sui media aggiornata:

Altre risorse

• Livello 4 delle query CSS per i media
• Aggiornare la query sui contenuti multimediali su MDN