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 (any-pointer: fine) {
    
/* ... */
}

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

YORUMLAR (2)

  1. Nihal
    Nihal
    Merhaba, tam olarak şuan bu problemi yaşıyorum günlerdir çözmeye çalışıyorum elinizde örnek kod varmı acaba. Ben resmin üzerine dokununca resim değişsin istiyorum. css den çok da anlamam grafik tasarımcıyım kendi çabamla sitemi yaptım.
    guzelisler.online a bakabilirsiniz. üzerine geline değişen resimler mobilde üzerine gelince değişmiyor ne yazık ki. Günlerdir uğraşıyorum. Yardım ederseniz çok mutlu olacağım.
    • Mehmet YAYLACI
      Mehmet YAYLACI
      Merhaba. Yazıda zaten örnek mevcut. Örnekten kendi durumunuza uyarlama yapabilirsiniz. Yapmak istediğiniz şeyi sadece CSS ile yapamazsınız diye düşünüyorum. JavaScript de kullanmanız gerekiyor. Kolay gelsin.

YORUM FORMU