Hazırladığım projenin amacı sayfamızda bulunan ama ısrarla görsel olarak mudahaleye cevap vermeyen selectboxları bir javascript dosyası yardımı ile görsel olarak biçimleyebilmek.

Evet yanlış duymadınız. Artık sayfamızda bulunan selectboxlar üzerinden görsel olarak mudahale şansınız olacak. Tabiki bu bir ilk değil. Web dünyasında aşağıda linklerini verdiğim siteler gibi daha bir çok örneğini görebilirsiniz.

• http://www.emblematiq.com/projects/niceforms/
• http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/

Peki Volkan neden bu kastın, zaten alem yapmış neden Amerikayı baştan keşfetmek istiyorsun diyen çıkacaktır aranızda. Belki haklısınız! Belkide;

Biraz BEN yaptım, hazırladım diyerek kendimi iyi hissetmem haricinde Türkiye içinde bu tarzda uygulamaları hazırlayan ve dahada iyilerini hazırlayabilecek bir çok insan tanıyorum. Ama üretmenin yanında hep tüketen, takip eden insanlar olacağımıza birazda üreten ve takip edilen insanlar olmak hoşunuza gitmezmi? Açıkcası benim gidiyor ve fırsatlar oldukça bu tarzda uygulamaları yazmaya devam edicem.

Hazırlamış olduğum kod şu anda tam anlamı ile bitmiş ve optimize değil. İşlerimden kalan zamanlarda kodlamaya devam ediyorum. Yaptığım çalışmaya aşağıdaki linklerden ulaşabilirsiniz.

• Dosyanın ilk hali
• Görselliği Zenginleştirilmiş Selectbox Eklentisi İle Beraber

Kendileri deneme yapmak isteyen arkadaşlar Demo linkine tıklayıp proje ilgili dosyaları indirebilirler.

Sizlerden gelen görüşler doğrultusunda kodları iyileştirmeye ve geliştirmeye devam edicem. Bu proje ile ilgili gelişmeleri Projelerim bölümü altından izleyebilirsiniz.

Yukarıdaki kuralı sayfamıza eklediğimizde sadece Google Chrome ve Safari 3.1 tarayıcılarında paragrafların renginin gri olduğunu göreceksiniz. Kod tam olarak nasıl çalışır anlatmak istersek:

• Bilindiği gibi bir web sayfası içinde sadece bir tek body elemanı bulunur.
• :nth-of-type() bir pseudo sınıfıdır ve sadece bahsedilen tarayıcılar tarafından desteklenir
• body:nth-of-type(1) tanımın sonucunda ilk ve tek olan body elementi ile eşleşir

Tüm bu pseduo’lara ait detaylı bilgiye http://www.w3.org/TR/CSS2/selector.html altından erişebilir ve daha fazla bilgi sahibi olabilirsiniz.

Bugün sizlerle CSS tabanlı hazırlanan sayfalardaki farklı browserlar içinde aynı sonucu almamızı sağlayacak ve daha esnek kurallar yazabileceğimiz CSS Hack yöntemlerini anlatan bir siteyi paylaşmak olacak. Favorilerimiz arasında eklenmesi gereken ve daha uzun zaman işimize yaracak bu sayfaya http://centricle.com/ref/css/filters/ adresi altından ulaşabilirsiniz. Siteyi açtığımızda karşımıza gelen tablo içinde en sol tarafta CSS dosyamız içinde belirleyeceğimiz kuralları ve ilerleyen kolonlarda ise farklı işletim sistemleri altında kullanabileğimiz tarayıcılar ve versiyonları altında belirtilen kuralların çalışıp çalışmadığını gösteren bir tabloya ulaşacaksınız. Kurallar üzerindeki linkler şu anda çalışmıyorlar fakat daha fazla bilgi edinmek isteyenler için sitenin altında ilişkili sayfalar üzerinden gidilerek daha fazla bilgiye sahip olunabilir. Bu liste sayesinde dilediğimiz tarayıcı için ona özel ve sadece o tarayıcının yorumlayabildiği kurallar belirleyebilecez ki buda bize sayfamız üzerinde daha fazla yetkiye sahip olmamızı sağlayacak.

Dilerim ileride birbiri ile daha uyumlu çalışan tarayıcılara sahip olur ve bu tarzda hack yöntemleri kullanmadan sayfalarımız rahatlıkla kodlama şansı buluruz.

gibi belli kategoriler altında toplanmış 70 uzman görüşün verildiği smashingmagazine sitesini ziyaret etmenizi şiddetle tavsiye ediyorum. Mayıs ayında yayınlanan bir blog yazısı olmasına rağmen halen dün gibi geçerliliğini koruyor.

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/