CSS3 ile gelen yeni özellikleri tararken ilginç ve güzel bir özellik ile karşılaştım. pointer-events özelliği. SVG ile birlikte uzun süredir kullanılan bu özellik CSS3 ile birlikte HTML elemanlarında uygulanıyor.

Farenin işlevini yerine getirip getirmeyeceğini belirlemek için kullanılır. Örneğin bir menüde mevcut sayfayı gösteren menü elemanının tıklanma olayını kaldırabiliriz.

pointer-event özelliği belirlenen elemanın farenin işlevine vereceği tepkiyi belirler. Bu tepki aşağıdaki çerçevededir.

  • Kullanıcı arayüzü olayları (örneğin fare tıklaması)
  • Dinamik Sahte Sınıflar (örneğin :hover, :focus)
  • Hiperlinkler

pointer event özelliği aslında SVG içerikleri için uygulanan bir özelliktir.

Yapısı :pointer-events: (değer) Aldığı Değerler: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: Tüm Elemanlara
Kalıtsallık: Var

Aldığı değerler bakalım;

auto: pointer-events özelliğine herhangi bir tanım yapılmadı ise fare tıklamasına müdahale etmez. SVG içeriklerde, bu değer visiblePainted ile aynı etkiyi yapar.

none: Element fare olaylarını uygulamayacaktır.

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke ve all: Sadece SVG içindir.

Bir örnek ile durumu daha iyi görelim.

<ul class="menu">
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="hakkimizda.html" class=on>Hakkımızda</a></li>
<li><a href="urunler.html">Ürünler</a></li>
</ul>

Hakkımızda sayfasında olduğumuzda kullanıcının hakkımızda linkine tıklaması mantıklı değildir, hakkımızda bağlantısının fare tıklama olayını kaldırmak için

.menu a.on {
pointer-events: none;
cursor: default;
}

Tanımı istediğimiz sonucu verecektir.

CSS3 ile dinamik bileşenlerin CSS ile halledilmesi işine alıştık. Bu tip CSS ile halledebilmemiz güzel.

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ (-webkit) 11+ 3.6+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ (-webkit) 3.2+ (-webkit) 36+

Kaynaklar

Bower'ı kaldırdık

Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kend...… Devamını oku

HTML Öznitelikleri ve DOM özellikleri

22 November 2017 tarihinde yayınlandı.

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.