Kueri Media update CSS

Sesuaikan UI Anda dengan kemampuan kecepatan refresh layar.

Adam Argyle

Kueri media CSS adalah metode penyampaian yang memungkinkan Anda mengontrol tampilan situs atau aplikasi web pada perangkat yang digunakan untuk melihatnya. Dengan kueri media, Anda dapat membuat tata letak yang berbeda untuk berbagai ukuran layar, orientasi, dan faktor lainnya.

Tujuan update kueri media memberi Anda cara untuk menyesuaikan UI dengan kecepatan refresh perangkat. Tujuan dapat melaporkan nilai fast, slow, atau none yang terkait dengan kemampuan beragam perangkat..

Perangkat dan kecepatan refresh

Sebagian besar perangkat yang Anda desain cenderung memiliki kecepatan refresh yang cepat. Ini termasuk {i>desktop<i} dan sebagian besar perangkat seluler.

Anda dapat mengkueri perangkat, melihat apakah perangkat memiliki kecepatan refresh cepat untuk rendering konten, dan gaya yang sesuai sambil tetap menampilkan satu stylesheet.

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

eReader, dan perangkat seperti sistem pembayaran berdaya rendah, mungkin memiliki kecepatan refresh. Mengetahui bahwa perangkat tidak dapat menangani animasi atau tindakan yang sering {i>update<i}, berarti Anda dapat menghemat penggunaan baterai atau pembaruan tampilan yang rusak.

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

Terakhir, ada skenario seperti kertas cetak atau layar {i>e-ink<i} yang hanya menawarkan satu penerusan render. Output seperti ini tidak dapat diperbarui 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 progresif menggunakan kueri media pembaruan terkini ini:

Referensi lainnya

• Kueri Media CSS Level 4
• Memperbarui Kueri Media di MDN