CSS medya sorgusunu güncelleme

Kullanıcı arayüzünüzü ekranın yenileme hızı özelliklerine uyarlayın.

Adam Argyle

CSS medya sorguları, web sitenizin veya web uygulamanızın görünümünü, görüntülendiği cihaza göre kontrol etmenize olanak tanıyan güçlü bir araçtır. Medya sorguları sayesinde farklı ekran boyutları, yönler ve diğer faktörler için farklı düzenler oluşturabilirsiniz.

update medya sorgusu, kullanıcı arayüzünü cihazın yenileme hızına uyarlamanızı sağlar. Bu özellik, farklı cihazların özellikleriyle ilgili fast, slow veya none değerini bildirebilir.

Cihazlar ve yenileme hızı

Tasarımınıza uygun cihazların çoğunun yenileme hızı yüksektir. Buna masaüstü bilgisayarlar ve çoğu mobil cihaz dahildir.

Cihazı sorgulayabilir, içeriği oluşturmak için hızlı bir yenileme hızına sahip olup olmadığını görebilir ve tek bir stil sayfası sunarken buna göre stil uygulayabilirsiniz.

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

E-kitap okuyucuların ve düşük güçlü ödeme sistemleri gibi cihazların yenileme hızı yavaş olabilir. Cihazın animasyon veya sık güncellemeleri kaldıramayacağını bilmek, pil kullanımını veya hatalı görüntü güncellemelerini azaltmanız anlamına gelir.

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

Son olarak, yalnızca tek bir oluşturma geçişi sunabilecek basılı kağıt veya e-mürekkep ekranlar gibi senaryolar da vardır. Bu tür çıkışlar hiç yenilenemez ve none olarak adlandırılır. Bu veri aşağıdaki gibi sorgulanabilir:

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

Aşağıdaki CodePen'de, bu yeni güncelleme medya sorgusunu kullanarak kademeli olarak geliştirilmiş bir fareyle üzerine gelme animasyonunu görebilirsiniz:

Diğer kaynaklar

• CSS Medya Sorguları 4. Seviye
• MDN'de medya sorgusunu güncelleme