CSS ile Dokunmatik Ekran Tespit Etme

Merhaba. Web sitelerinde çokca kullanılan CSS özelliklerinden biri de :hover seçicisidir. Bu özellik sayesinde mouse ile bir nesnenin üzerine gelindiğinde o nesnenin stilini nasıl değiştireceğini belirleriz. Ancak dokunmatik ekranlı cep telefonlarında mouse olmadığı için :hover özelliği sağlıklı çalışmamaktadır. Yani asılı kalmaktadır. Örnek olarak bir butonun üzerine gelindiğinde nasıl bir stil değişikliği yapılacağını belirttiniz ancak dokunmatik ekranlı bir cihazda bu butona tıkladığınızda sayfada başka bir yere tıklayana kadar sanki o butona basılı tutuluyormuş gibi :hover özelliği takılı kalır. Bunu aşmak için dokunmatik ekranları tespit etmek ve stil dosyasında ona göre değişiklik yapmak gerekmektedir. öncesinde dokunmatik ekran tespiti için Modernizr gibi JavaScript kütüphaneleri kullanmak ya da kendi JavaScript fonksiyonunuzu yazmanız gerekliydi. Ancak seviye 4 CSS sorgularında bu işlem çok daha kolay hale geldi.

Medya sorgularında kullanacağımız iki özellik vardır. Bunlar pointer ve any-pointer özellikleridir. pointer özelliğinde web sitenizi ziyaret eden kullanıcının birincil işaretleme aygıtının tipini denetler. any-pointer özelliğine ise kullanıcının sisteminde birden fazla işaretleme aygıtı (mouse, touchpad gibi) var ise bunlardan en az bir tanesinin tipini denetler. Örnekler açıklamalarıyla beraber aşağıdadır.

pointer

/* Hiçbir işaretleme aygıtı tespit edilemedi. */
@media (pointer: none) {
    /* ... */
}

/* Birincil olarak mouse veya touchpad benzeri işaretleme aygıtı tespit edildi. */
@media (pointer: fine) {
    
/* ... */
}

/* Birincil olarak dokunmatik ekran (parmakla işaretleme) tespit edildi. */
@media (pointer: coarse) {
    /* ... */
}

any-pointer

/* Hiçbir işaretleme aygıtı tespit edilemedi. */
@media (any-pointer: none) {
    /* ... */
}

/* En az bir adet mouse veya touchpad benzeri işaretleme aygıtı tespit edildi. */
@media (pointer: fine) {
    
/* ... */
}

/* En az bir adet dokunmatik ekran (parmakla işaretleme) tespit edildi. */
@media (pointer: coarse) {
    /* ... */
}

YORUM FORMU