Query supporti aggiornamento CSS

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

Adam Argyle
Adam Argyle
X GitHub

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...

Supporto dei browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Origine

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