Bir süredir ilginizi çeken bir konu web tasarımı, web tabanlı uygulamalar… Ama kafanız karışık, tam olarak ne öğrenmek istediğinizi bilmiyorsunuz. Nereden başlayacağınızı bilmemeniz de üzerine tuz biber oluyor. Bir adım ileri, iki adım geri… Bir ilerleme kaydedemiyorsunuz. Eğer durumunuz bu, ya da buna yakın bir şeyse; işte bu yazı tam size göre.

Bir W3C tavsiyesi olan CSS standardının,  ara yüz geliştiricileri tarafından -istenilen seviyede olmasa da- tercih ediliyor olması bizi sevindiriyor. Web geliştiricileri arasında <table> etiketini kullanarak ara yüzleri oluşturmayı tercih eden arkadaşlarımız bulunuyor. CSS ve XHTML’in amacına uygun kullanılmaması durumu yaygınlığını koruyor. Bu teknolojilerin varoluş amaçlarının bilinmemesi, yani bu konudaki bilgi eksikliği,  bu durumu yaratan sebeplerin başında geliyor. Bir diğer önemli sebep ise; IE6 merkezli tarayıcı yorum farklılıkları… Bu yorum farklılıkları, XHTML ve CSS’i etkin kullanmak isteyen arkadaşlarımızın ellerini bağlayan bir durum. Bu sorunla ilgilenmek için akla gelen ilk çözüm ise, CSS-Reset (Sıfırlama) tekniği…

CSS ile web uygulamaları geliştirirken benzer tanımlamalar yapmak durumunda kalırız. Teknoloji ne olursa olsun, bir işlemin gerçekleştirilmesi için aynı kodun tekrar tekrar yazılması ciddi bir emek kaybı ve yönetilebilirlik zaafı oluşturmaktadır. CSS dosyaların optimize edilmesi ve gereksiz kural tekrarının önüne geçilmesi amacıyla mümkün olduğunca CSS seçicilerini gruplayarak, gereksiz kod yazımının önüne geçmiş oluruz.

Genel olarak çalışmalarımızda rollover image’leri uygulamayı zenginleştirmek adına kullanırız. Rollover Image, bir imajın üzerine fare ile gelindiğinde, ilgili imajın değişmesi durumudur. Eskiden bu işlemi Javascript kullanarak gerçekleştiriyorduk. Bugün ise CSS kullanarak oldukça hoş rollover image’ler hazırlayabiliyoruz.

XHTML elementlere sınıf atamasını class özelliği ile gerçekleştiririz. Sınıflar, XHTML elementlerin birer özelliği olduğundan, CSS Özellik Seçicileri kullanılarak XHTML elementleri, sınıflarına göre seçebiliriz.

İçerik ve sunumun birbirinden ayrıldığı modern web uygulamalarında, CSS ile içeriği şekillendirmenin ilk adımı, şekillendirilecek XHTML etiketlerin doğru bir şekilde seçilmesidir. Bu seçme işlemi CSS Seçicileri ile gerçekleştirilir. Bazı durumlarda CSS dokümanı içerisinde bir XHTML elemana ait, birden fazla seçme işlemi yapılabilir ve kural tanımlanabilir. Burada kritik olan, hangisinin tarayıcı tarafından öncelikle yorumlanacağı konusudur. Bu da CSS’de Belirlilik (Specificity) ilkesine göre belirlenir.

Bir web uygulamasında imajları görselliği zenginleştirmek adına kullanırız.  Bu birbirinden bağımsız imajlar tarayıcı tarafında yüklenirken, sunucundan her biri için ayrı HTTP isteğinde bulunulur. Ne kadar çok imaj, o kadar çok istek demektir.  Bu istekler ne kadar çoksa, sunucuya da o kadar çok yük biner. CSS Sprite olarak bilinen bu teknikle, web uygulamasında kullanılan imajların mümkün olduğunca birleştirilerek, HTTP istek sayısının düşürülmesi ve dolayısıyla sunucuya binen yükün mümkün olduğunca azaltılması sağlanır.