Kueri Media update CSS

Sesuaikan UI Anda dengan kemampuan kecepatan refresh layar.

Adam Argyle
Adam Argyle
X GitHub

Kueri media CSS adalah alat canggih yang memungkinkan Anda mengontrol tampilan situs atau aplikasi web berdasarkan perangkat yang digunakan untuk melihatnya. 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 cenderung memiliki kecepatan refresh yang cepat. 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 gaya yang sesuai sambil tetap mengirimkan satu stylesheet.

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

Perangkat eReader, dan perangkat seperti sistem pembayaran dengan daya rendah, mungkin memiliki kecepatan refresh yang lambat. Dengan mengetahui bahwa perangkat tidak dapat menangani animasi atau update yang sering, Anda dapat menghemat penggunaan baterai atau update tampilan yang salah.

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

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

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

Dalam CodePen berikut, lihat animasi pengarahan kursor yang ditingkatkan secara bertahap menggunakan kueri media pembaruan baru ini:

Referensi lainnya