:target seçicisi CSS3 ile birlikte gelen yeni seçilerden biri. :target
seçicisi doküman içi linklere odaklanmamızı sağlıyor. Daha önce bu işi
yapmak için javascript ile yapıyorduk. CSS3’ün bizlere kazandırdığı
birçok yenilikte olduğu gibi bu özellikte basit bir şekilde
sayfalarımıza güzel etkiler kazandırır. :target sözde sınıfı :hover
seçicisi gibi dinamik bir seçicidir.
Tarayıcı Desteği
2.0+
9+
1.0+
Mobil Tarayıcılar
2.1+
3.2+
36+
Sayfa içi bağlantıları nasıl yaptığımı hatırlayalım.
Benzer yapının yatay kaydırma çubuğu ile olanını yapabiliriz
Sayfa içi linklerden farklı olarak name ile değil id ile
tanımlanan alanları hedef seçiyoruz. Buda bizi fazla kod yazmaktan
kurtarıyor.
Aşağıda bu özellik kullanılarak yapılmış bir iki güzel örneğe link
verdim.
Örnek1: Dipnot
Bu özellik wikipedia tarafında dipnoların takibi için çok güzel bir
şekilde
kullanılmaktadır.http://tr.wikipedia.org/wiki/Trabzon_%28il%29
mesela Trabzon ili hakkında bilgiyi okurken herhangi bir dipnot linkine
tıkladığımızda ilgili dipnot ardalan rengi değiştirilerek
belirginleştirilmiştir.
Bunun dışında eğlenceli örnekler geliştirilmiştir.
Örnek 2: Basit Akordiyon
http://kaioa.com/b/0903/target_faq_demo.html
örnekte gizle-göster ile basit bir akordeon içerik yapısı
oluşturulabilir.
Geçen sene 49 adet makale yayınlamışım. Amacım daha çok paylaşımda
bulunmaktı. Ama maalesef her zaman aynı heveste olamıyor insan. Her sene
daha fazla paylaşım yapmak istesem de ancak bu kadar oluyor.
Önümüzdeki sene daha çok HTML5, CSS3, Javascript, Jquery ve mobil
platform üzerine paylaşım yapmayı planlıyorum. Zaman bu konuda ne kadar
başarılı olduğumuzu gösterecek.
Geçen seneki istatistikler;
49 adet makale
306.423 ziyaretçi sayısı
761.738 sayfa görüntüleme
Toplam 6.253 yorum var sitede. 77.402 çöp yorum engellenmiş.
Javascript dosyaları bir web sitesine iki şekilde eklenir. Birincisi
satıriçi(inline), ikincisi ayrı bir javascript dosyası hazırlayıp harici
olarak eklemek.
İlk javascript’i Hakkı Öcal’ın javascript kitapçığından öğrenmeye
başlamıştım.
İlk örnek şöyle idi;
Bu satıriçi kodlamaya örnek olarak verilebilir.
Aynı kodu ayrı bir javascript dosyası olarak hazırlayıp .js uzantısı ile
kaydedersek ve bunu html dokümana eklersek buda harici bir javascript
dosyası ekleme kısmına girer.
Bu dosyayı merhaba.js olarak kaydedip, sonra
Şeklinde HTML dokümanına ekleriz.
Yukarıda kullandığımız her iki yöntem ile de aynı sonucu alırız. Harici
javascript dosyası ile eklemenin avantajları vardır;
Bir dosya ile tüm sitedeki javascript dosyalarını idare ederiz ve
güncellemeleri tek dosya ile daha kolay yaparız.
Sayfa daha hızlı yüklenir, tek dosya ön belleğe alınınca diğer
sayfalarda tekrar tekrar yüklenmediği için sayfalar daha hızlı
açılır.
Javascript o günden bu yana daha fazla önem kazandı ve artık javascript
kodumuzu en iyi hale getirmek için daha çok zaman harcıyoruz ve bize
zaman kazandıracak her durumu inceleyip uyguluyoruz.
HTML dokümanında javascript dosyasını nereye eklemeliyiz?
Web sitelerinin en iyi hale getirmek için çeşitli araçlar ile sitemizi
test ederiz. Bunlardan biri Firefox’ın YSlow eklentisidir. YSlow
eklentisi ile web sitemizi test ettiğimizde javascript dosyalarımızı
html dokümanının sonuna eklememizi öneren bir başlık ile karşılaşırız,
burada bu başlığı biraz inceleyeceğiz.
CSS dosyalarının <head> içine konmasının öneren YSlow Javascript
dosyalarının HTML dokümanının sonuna(</body>’nin hemen öncesine)
konmasını öneriyor. Burada bir çelişki var gibi görünüyor. Buradaki
mantık şudur; javascript blokları <head> içine konduğu zaman sayfa ilk
açıldığında bu javascript blokları yüklenir ve işlenir. Javascript
dosyası yüklenip, işlendikten sonra diğer sayfa üyeleri yüklenir.
Javascript dosyası yüklenip işlenmesi bitene kadar sayfa boş bir sayfa
olarak görünür, tabi buda istenen bir durum değildir.
Sayfa başına konan javascript dosyalarının yüklenme zamanı aşağıdaki
grafikte görüldüğü gibidir
Javascript dosyalarını html dokümanın sonuna koyunca sayfa öğeleri
tamamen yüklenecek ve sonra javascript dosyaları yüklenecek ve
işlenecektir. Böylece ziyaretçi sayfayı açtığı anda görsel öğeler
yüklenecek ve ziyaretçi sayfa içeriğini görecektir ve sonra javascript
yüklenecek ve işlenecektir.
Paralel Yükleme
Bir diğer problem ise javascript dosyaları paralel yüklemeyi bloklar.
Paralel yükelemeyi şöyle açıklayabiliriz; web sitemiz yüklenirken her
öğe tek tek yüklemek yerine iki ve daha fazla yükleme, yani paralel
olarak yükleme yapabiliyoruz. HTTP/1.1 şartnamesinde her barındırma
servisinden(hositng) iki paralel yüklemeye izin verir, buradan şunuda
anlayabiliriz ki farklı barındırma servislerinden ikiden fazla yükleme
yapabiliriz. Ancak script dosyaları yüklenirken pararlel yüklemeye izin
vermez. Bu durumu göz önünde bulundurarak script dosyalarımızı dokümanın
sonuna koyarak sayfamızın daha hızlı yüklenmesini sağlayabiliriz.
Uygulanamayan Durumlar
Bazı durumlarda script dosyasını dokümanın altına koymamız mümkün olmaz.
Örneğin script içinde documen.write ile doküman içine bir şey
eklememiz gerektiğinde. Ancak bu durumlar içinde bazı çözümlerin olduğu
aklımızın bir köşesinde kalsın.
defer Özelliği
HTML4 ile birlikte <script> etiketi içine defer özelliği eklenmiştir.
defer özelliği tanımlanmış script dosyaları hemen uygulanmayıp tüm
sayfa yüklendikten sonra yüklenir ve çalıştırılır. Bu özelliği İnternet
Explorer 4+ ve Firefox3.5+ desteklemektedir.
şeklinde kullanılır. Bu dosyayı html dokümanının istediğimiz yerine
koyabiliriz. Tüm tarayıcıların desteklmemesi kullanımı konusunda bizi
biraz düşündürüyor.
Sonuç
Sonuç olarak javascript dosyalarımızı html dokümanımız sonuna koymak web
sitelerimizin daha hızlı açılmasını sağlayacak bir yöntemdir.