Query supporti aggiornamento CSS

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

Adam Argyle

Le query multimediali CSS sono un potente strumento strumento che ti consente di controllare l'aspetto del tuo sito web o della tua app web in base sul 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 update ti consente di adattare l'interfaccia utente alla frequenza di aggiornamento di un dispositivo. La può riportare il valore fast, slow o none relativo alla funzionalità dei diversi dispositivi...

Dispositivi e frequenza di aggiornamento

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

Puoi eseguire una query sul dispositivo per verificare se ha una frequenza di aggiornamento elevata per il rendering contenuti e applicare stili di conseguenza, pur pubblicando un unico foglio di stile.

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

Gli eReader e i dispositivi, come i sistemi di pagamento a basso consumo, potrebbero avere un e la frequenza di aggiornamento. Sapere che il dispositivo non è in grado di gestire animazioni o frequenti , significa che puoi risparmiare l'utilizzo della batteria o visualizzare aggiornamenti errati.

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

Infine, ci sono scenari come la carta stampata o i display e-ink che possono offrono un unico passaggio di rendering. Un output come questo non può essere aggiornato e viene denominata none. È possibile eseguire query in questo modo:

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

Nel CodePen riportato di seguito viene visualizzata un'animazione al passaggio del mouse progressivamente migliorata utilizzando questa nuova query multimediale di aggiornamento:

Altre risorse

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