Css desteğinde xhtml tasarımlar çıkarırken kod düzenliliği ve w3c standartlarında olmasına dikkat edilmesi gerekir ki; bütün standartlara uygun bir tasarımda kayma problemleri olmayacak değildir. Tasarımcı arkadaşların genel sorunudur bu 'tarayıcı uyumsuzlukları'.
Bir css döküm işleminde elinizden geldiği kadar kesin değerlerle çalışmalısınız, örneğin;
"#header" adında bir div elementim var ve bir de css dosyamda "#header" adında bir kısmım var.
html kodu:
<div id="header"></div>css kodu:
#header{
width:1000px;
height:95px;
}Çalışmalarınızda "position" komutuna ağırlık verirseniz çalışmanızın tarayıcılarda bazı kısımlarının uyuşmadığını görebilirsiniz. "position" elbette kullanılacak yerler var ama daha oturaklı tasarımlar için kesin kurallarla çalışmamız gerekir diye düşünüyorum.
Yeni standartlara göre yaptığım çalışmalar Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari gibi tarayıcılarda sorunsuz görüntülenmektedir. Tabi bunda css reset'in de büyük faydası bulunmaktadır.
Size bir de ipucu vereceğim; tasarımlarınızı "şuan yaygın olan en küçük ekran çözünürlüğü" boyutlarında çıkartırsanız sorun yaşama ihtimaliniz çok aza indirgenir.
Örnek veriyorum, Grafik çalışmanızın (sayfanızın psd çalışması) genişlik değeri en fazla 1000px değerinde olmalı, bu da demek oluyor ki xhtml/css döküm yaparken sayfadaki en geniş elementin değeri 1000px sayfanız; en küçük ekran çözünürlüğünde (1024x768) kenarlara taşmayacaktır yani scroll bar çıkmayacaktır. Eğer ki html sayfanızda en geniş değer 1001px; ise scrollbar çıkacaktır.
Bir de her taraycı kendine özgü komutlar çıkartması konusuna değineceğim.
Örnek olarak oval köşe kullanımı Internet Explorer tarayıcısında kullanılan/kullanışlı bir şey değildir, çünkü Mozilla Firefox tarayıcısına has bir komuttur bu veya chrome veya safari vs. Tabi bu gibi her kafadan her tarayıcıya ayrı komut üretilmesi de bizim sektörümüzdeki insanların yollarına taş koymak gibi bir şey oluyor. Hepsiyle ayrı ayrı uğraşıyoruz veya her tarayıcı için ayrı bir css dosyası hazırlamamız gerekebiliyor.
Konuda asıl değinmek istediğim nokta; tasarımınızda esnek kısımlar (entry kısımları) hariç diğer kalan şablonsal kısımlarda katı kurallar kullanmanızdır.
Vakit ayırdığınız için teşekkürler, iyi çalışmalar.
