Henüz 4. beta sürümü yayınlanmış olan Firefox 3.6 da gördüğüm ve bence biraz daha geliştirmeyle bir CSS standardı haline gelebilecek bir style var.
pointer-events:none;Bu style none ve auto olmak üzere iki değer alabiliyor. Yaradığı işi de şu şekilde açıklayayım. Üstüste binen nesnelerde (örneğin iki div), mouse event'leri, biliyorsunuz üstteki nesnede yakalanır, alttaki nesneye geçmez. Bu sebepten dolayı, aşağıdaki nesnede a gibi, input gibi nesneler mevcutsa, kullanıcının bunlarla mouse aracılığı ile etkileşime girmesi mümkün değildir. Firefox 3.6 bu gibi durumlarda, üstteki elemana pointer-events:none style'ı verilerek sorunun çözülmesini sağlıyor. Bu özelliğe sahip nesne mouse işlemlerini yakalamıyor, alttaki elemana geçiriyor. Bu sayede alt nesnede bulunan nesneler çalışıyor, bu nesne ile etkileşime girilebiliyor.
Bazı noktalarda gerçekten hayat kurtarıcı olabilecek bu özelliğin kısa sürede CSS standardı olmasını diliyorum. Canlı bir örneği görebilmek için en az bir Firefox 3.6b4'e ihtiyacınız olacak. Henüz resmi olarak yayınlanmadığı için bu sürümü http://www.mozilla.com/en-US/firefox/all-beta.html adresinden indirip kurmanız gerekmekte. 3.5.5 sürümü ile yanyana çalışabiliyor sürüm.
Kurulumunuzu tamamladıktan sonra http://demos.hacks.mozilla.org/openweb/pointer-events adresini ziyaret ederek canlı bir uygulama görebilirsiniz. Üstünde gradient bir dolgu efekti olan div, a nesnelerinin dizili olduğu başka bir div'in üzerine getirilmiş. Burada gradient efektinin olduğu sağ bölgedeki linklere erişmek mümkün olmuyor, çünkü mouse event'ları üstteki gradient div'i tarafından yakalanıyor. Ancak hemen alttaki işaret kutusunu seçtiğinizde artık bu linklere de erişilebilmeye başlıyor.
Gerçekten web programcılarının ve tasarımcılarının hayatını kurtarabilecek bir özellik. Umarım kısa sürede Trident ve Webkit engine'lerine de girer ve biz de gönül rahatlığı ile kullanmaya başlayabiliriz...
*** Ekleme: 02.12.2009 17:51 ***
Bu sayfayı Google Chrome, Safari, Opera ve IE üzerinde de denedim. Chrome ve Safari'de de özelliğin çalıştığını gördüm (we love webkit). Opera üzerine gelen div'i yorumlayamadığı için deneme şansım olmadı. Linkler hep çalışıyordu. IE ise sayfayı açamadı bile :) Yorum sizin...
Yorum Gönder