Ali's Surprisingly Web

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…

LABjs isimli bir proje (http://labjs.com), web sayfalarına dışarıdan yüklediğimiz (js gibi) dış kaynakların yüklenmesini optimize etmeye yönelmiş bir Javascript kaynağı. Dış kaynakların aynı anda (veya sizin belirteceğiniz bir sıralama ile) yüklenmeye başlamasını sağlayabiliyorsunuz.

Bu tip bir iyileştirmenin Firefox 3.5 ile geldiğini biliyoruz. Kısmen (tarayıcının tanımlayabildiği) ilişkisi bulunmayan kaynaklar aynı anda yüklenmeye başlanarak önemli bir kaynak artışı sağlamışlardı.

Firefox 3.0′da bazı kaynakların yüklenmesi aşağıdaki şekildeyken (16.84 saniye):

Firefox 3.5′te kaynakların yüklenmesi bir miktar hızlanmıştı (10.69 saniye):

Ancak görebildiğiniz gibi hala bazı kaynaklar paralel yüklemeye maruz kalmıyorlar. Bunun sebebi yukarıda bahsetmeye çalıştığım tarayıcının kararverdiği öngereklilik koşulları.

Bu örnekte de LABjs tarafından önceliğe konulmuş dış kaynakların yüklenmesini görebilirsiniz (6.24 saniye):

Görüldüğü gibi LABjs önemli bir performans artışı daha sağlamış oluyor. Konuyla ilgili detaylı bir incelemeyi (resimleri da aldığım kaynak olan) http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading adresinden okuyabilirsiniz.

Ancak tavsiye, yukarıda belirttiğim sitede yazan uyarılara gözatmadan sistemlerinize entegre etmeyin. Bu uyarıları “Are there any negative side effects?” başlığı altında görebilirsiniz.

Kendim yaptığım testleri derli toplu hale getirebilirsem burada yayınlayacağım…