Sesuaikan UI Anda dengan kemampuan kecepatan refresh layar.
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: