Sesuaikan UI Anda dengan kemampuan kecepatan refresh layar.
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 tersebut dapat melaporkan nilai fast, slow, atau none yang terkait dengan kemampuan berbagai perangkat.
Perangkat dan kecepatan refresh
Sebagian besar perangkat yang Anda desain cenderung memiliki kecepatan refresh yang cepat. Perangkat ini mencakup 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 */
}
eReader, dan perangkat seperti sistem pembayaran yang menggunakan 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 penerusan render. Output seperti ini tidak dapat dimuat ulang sama sekali, dan
disebut sebagai none. Kueri dapat dikueri seperti ini:
@media (update: none) {
/* one time render like printed paper */
}
Di CodePen berikut, lihat animasi pengarahan kursor yang ditingkatkan secara bertahap menggunakan kueri media update baru ini: