Web ve teknolojileri gündelik yaşamımıza gireli pek de fazla olmamasına rağmen, bu alandaki gelişmeler göz kamaştırıyor. Hergün yeni bir mucize duyar olduk. Alın birisi işte, Google! RSS değil mi bir diğeri? Flash her yerde karşımıza çıkmıyor mu?
Web teknolojilerinde gün geçtikçe vites arttıran bir gelişme süredursun, bizim yani web tasarımcıları için başımıza gelmiş en güzel mucizelerden biridir CSS…
Cascading Style Sheets’den, yani stil sayfalarından kısaca CSS diye bahsedeceğiz… CSS sayfalarının oluşturulması ve uygulanmasına bu yazıda hiç bulaşmadan, CSS’in bize sağladığı artı-değerden bahsetmek istiyorum. Böylece neden CSS öğrenmeliyiz? sorusunu da açıklığa kavuşturmuş olacağız…
CSS öğrenmeliyiz çünkü;
Yapı (Structure) ve Tasarımın (Design) Sevindirici Ayrılığı
Bir web sayfasınında içeriğini, yani yapıyı oluşturan şey yalın XHTML kodudur. Tasarımdan kasıt ise bu içeriğin görsel davranışıdır. Yani bir menünün web sayfasında nerde duracağı, bir spot haberin yazısının rengi, karakteri, sayfanın arkaplan rengi vb. görsel davranışların bir toplamıdır tasarım. Bunların birbirinden ayrılması mümkün olduğunda, bu bizim için içerik ve görselliğin farklı yerlerden yönetilmesi anlamına gelmekteydi.
Bu anlattığımız somutlamak istersek; takip ettiğim blog yazarlarında biri olan Fatih Turan‘ın web sitesine, Firefox web tarayıcınızla girdiğinizde güzel bir anasayfa sizi karşılar. Eğer tarayıcınızda CSS’i kapatırsanız, alacağınız görüntü şu şekilde olacaktır…
Yalın XHTML ve CSS
Bu sade görüntü XHTML’in CSS’siz yorumlanmasıdır… CSS ile tasarım, XHTML’den (Yapı’dan) başarılı bir şekilde ayrılmıştır…
Temiz ve Anlaşılır XHTML
Bir web sayfasında görsel unsurların ayrılması, doğalında XHTML tarafında kodsal temizliği sağlamış olur. Bu da herkes için anlaşılabilirliği arttıracaktır. Anlaşılabilir kod, müdahale edilebilir koddur.
Yönetilebilir CSS
Görünüme dair unsurları bir, ya da birkaç CSS dosyasında topladığımızda görünümü XHTML sayfalarından çıkarmış, merkezi bir yerden yönetebilir duruma gelmiş oluruz. Yapı ve tasarımın iç içe girdiği karmaşık sayfaları tek tek düzenlemek yerine, hızlıca tek merkezden CSS dosyamızı modifiye ederiz. Bu dosyaya bağlı olan web sayfaları otomatik olarak etkilenirler. Böylece bakım ve müdahaleler oldukça kolaylaşır. Zamandan ve iş yükünden tasarruf etmiş oluruz.
CSS ile Organizasyon
Doyasıya Özgürlük
CSS’in yaygınlaşması öncesinde revaçta olan tablo kullanılarak yapılan tasarımların yarattığı hantallıktan, CSS ve onun zengin özelllikleri sayesinde kurtulmuş olururuz. Web sayfasını oluşturan blokların nerede duracaklarını tabloların hücreleri değil, CSS dosyalarında tanımladığımız kurallar belirler. İstetiğimiz zaman sitemizin sağ tarafında duran bir menuyu, sitemizin soluna taşıyabilir, blokları birbirine göre konumlayabiliriz. Bu anlattıklarıma en güzel örneği www.csszengarden.com sitesinde göreceksiniz. Bu sitede sergilenen bütün örnek siteler aynı XHTML koda sahipken hepsinin görselliği, menülerin yeri, linklerin şekli özgündür. Bu siteler tasarım ve yapının birbirinden ayrılmasına en güzel örneklerdir.
CSSZenGarden Örnekleri
Platformlara Özel Tasarım
CSS kullanarak web tabanlı uygulamalarımızın bir yazıcıdan çıkış alınırken nasıl görüneceğini, bir monitörden bakıldığında nasıl davrancağını, ya da bir mobil cihazda nasıl görüneceğini, XHTML dosyalarımıza dokunmadan ayrı ayrı CSS üzerinden tanımlayabiliriz…
Daha ne olsun, bugün için mükemmel...
Kaynak
www.oztecnic.com
