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

CSS ile büyük kardeşe söz geçirme

Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML'deki elemanların birbiriyle olan ilişkilerini anlatm...… Devamını oku

Javascript ile medya kontrolü

17 February 2017 tarihinde yayınlandı.

Yenilenen Google Çeviri hizmeti

31 January 2017 tarihinde yayınlandı.