Kueri Media update CSS

Sesuaikan UI Anda dengan kemampuan kecepatan refresh layar.

Adam Argyle

Kueri media CSS adalah alat yang canggih yang memungkinkan Anda mengontrol tampilan situs atau aplikasi web berdasarkan perangkat tempat situs atau aplikasi web tersebut dilihat. Dengan kueri media, Anda dapat membuat tata letak yang berbeda untuk berbagai ukuran layar, orientasi, dan faktor lainnya.

Kueri media update memberi Anda cara untuk menyesuaikan UI dengan kecepatan refresh perangkat. Fitur ini dapat melaporkan nilai fast, slow, atau none yang terkait dengan kemampuan berbagai perangkat.

Dukungan Browser

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

Sumber

Perangkat dan kecepatan refresh

Sebagian besar perangkat yang Anda desain kemungkinan memiliki kecepatan refresh yang cepat. Hal ini termasuk desktop dan sebagian besar perangkat seluler.

Anda dapat membuat kueri perangkat, melihat apakah perangkat memiliki kecepatan refresh yang cepat untuk merender konten, dan menata gayanya dengan tepat sambil tetap mengirimkan satu stylesheet.

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

Perangkat pembaca e-book, dan perangkat seperti sistem pembayaran dengan daya rendah, mungkin memiliki kecepatan refresh yang lambat. Mengetahui bahwa perangkat tidak dapat menangani animasi atau update yang sering, berarti Anda dapat menghemat penggunaan baterai atau update tampilan yang salah.

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

Terakhir, ada skenario seperti kertas cetak atau layar e-ink yang mungkin hanya menawarkan satu render pass. Output seperti ini tidak dapat dimuat ulang sama sekali, dan disebut sebagai none. Data ini dapat dikueri seperti ini:

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

Di CodePen berikut, lihat animasi pengarahan kursor yang ditingkatkan secara progresif menggunakan kueri media update baru ini:

Referensi lainnya