Tweet

Css ve Tarayıcı Uyum Sorunları

Merhabalar herkese. İlerleyen teknoloji ve yazılım sektöründeki hızlı büyüme çeşitli gelişmeleri de beraberinde getirmiştir. Piyasada ki tarayıcı(browser) çeşitliliği bu oranda artış göstermektedir. Günümüzde tarayıcı piyasasının büyük dilimini kapsayan, firefox,chrome,internet explorer,opera gibi tarayıcılar standart olarak birbirinden farklı yorumlama özelliğine sahiptirler. İşte bu sorunsallar zinciri tarayıcı uyumlu kod yazmanın bir standart hal almasını güçleştirmiştir.[...] Dolayısı ile bizler yani yazılımcılar bu çeşitliliğe ayak uydurmak zorunda bırakılmışızdır. Genel olarak css yazarken en çok internet explorer'da problem çıktığına tanık olabilirsiniz. Yazılan standart kodlar büyük ölçüde firefox ve chrome'da benzer yorumlanmakta ve çıktı hemen hemen aynı olmaktadır. Ancak durum internet explorer için geçerli değil. Elbette benim gibi sizlerde her css yazarken internet explorer'ın yorumlama biçimini sert bir dille eleştiriyor olabilirsiniz. Özetle bu farklılıkları ortadan kaldırmak ve tasarımın her tarayıcıda aynı görünmesini sağlamak yine biz yazılımcılara düşüyor! Tarayıcıların yorumlama biçimlerinden hareketle css'nin sınırlarını biraz daha keşfederek çözümler üretebiliriz.
Benim tavsiyem css yazan herkesin elinin altında firebug bulunması. Firefox için çıkarılan bu ücretsiz mucizevi eklentinin google chrome versiyonuda mevcut. Hatalarınızı net bir şekilde görebilirsiniz firebug ile. Buna göre düzenlemenizi yapabilirsiniz.

Öncelikle bazı püf noktalardan bahsetmek istiyorum. Css yazarken öncelikle reset kavramını bilmenizde fayda bulunuyor. Form elemanlarının stil özelliklerini varsayılan değerlerden arındırmak her tarayıcıda aynı orantıların dikkate alınması açısından gereklidir. Piyasada bir çok reset css stil tanımlaması mevcut. Ancak benim tavsiyem Yahoo! YUI reset.css Büyük oranda tarayıcılar arası stil farkılılıklarını ortadan kaldıracaktır.

YUI reset.css

CODE:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}


Diğer bir püf nokta ise sadece internet explorerın algılayacağı kod blokları kullanmak. Örneğin içerisinde yazı bulunacak bir diviniz var ve bunun için şöyle bir kod kullandınız;

CODE:
#yazi
{
font-size:12px;
color:#ffffff;
font-family:Arial,Verdana,Tahoma;

}


internet explorer bazı durumlarda font-size:12px ifadesini algılarken size 8pxlik bir çıktı verebilir. Bu durumda internet explorer için ayrı kod yazabilirsiniz.

CODE:
*html #yazi
{
font-size:16px;
color:#ffffff;
font-family:Arial,Verdana,Tahoma;

}


bu şekilde eşitliği dengeleyebilirsiniz her iki tarayıcıdada.

Diğer bir husus ise internet explorerın boş divleri yorumlayış biçimindeki farklılıktır. İnternet explorer içi boş divlerde verilen height değerini yanlış yorumlamakta ve yanlış çıktı vermektedir. Örneğin yatay bir çizgi çizmek istiyorsunuz bunun için şöyle bir kod yazdığınızı varsayalım;

CODE:
#cizgi
{
width:100%;
height:1px;
background-color:#010101;

}


bu yazdığınız kod firefox ve chrome da 1px yüksekliğinde yatay bir çizgi olarak yansıtılacaktır. Ancak internet explorerda 10px yüksekliğinde bir çizgi olarak yansıtılacaktır. Bu sorunu çözmek için şu şekilde bir yöntem izleyebilirsiniz.

CODE:
#cizgi
{
width:100%;
height:1px;
font-size:0;
background-color:#010101;

}


Bir başka sık karşılaşılan problem ise float ifadesindeki yorum farklılığıdır. Bir divinizin olduğunu varsayalım ve genişliği 500px yüksekliği ise 300px olsun. sol kısımda resim sağ kısımda yazı bulunmasını istiyoruz. bu durumda resmimize float:left; ifadesi koymamız gerekiyor. ancak eklenen resim divin yüksekliğinden biraz fazla 400px; bu durumda resim divden taşacaktır. Elbette bu hoş bir durum değildir çünkü backgroundda gradient kullandıysanız ve div bir box dan ibaretse resmin taşması görsel anlamda iticilik yaratacaktır. Normal şartlarda divin eklenen resimin boyutuna göre genişlemesi gerekmektedir. Bu kapsama sorununa css3 ile birlikte çözüm kazandırıldı. Buna göre kapsayan elemente şu ifadenin eklenmesi yeterli oluyor;

CODE:
clear-after: both;


Ancak bu desteğin olmadığı tarayıcılarda kapsayıcı içerisindeki en son elementten hemen sonra boş bir div ve bu dive clear:both; stil tanımlaması yapılması sorunu çözecektir.

Diğer bir püf nokta ise opacitydir. Bir resimin ya da yazının opacity ile çözünürlüğünü saydamlaştırabiliriz. Firefox ve Chromeda şu şekildeki ifade çalışmaktadır;

örneğin sayfadaki resmimizi saydam olarak gösterelim ve üzerine mouse ile gelindiğinde orjinal halinin çıkmasını sağlayalım;

CODE:
#resim
{
width:50px;
height:50px;
background-image:url("resim.jpg");
opacity:0.5;

}


CODE:
#resim:hover
{
width:50px;
height:50px;
background-image:url("resim.jpg");

}


internet explorer bu opacity değerini dikkate almayacak ve resmi orjinal halinde yansıtacaktır. Bunun için şu iki tanımlamayı birlikte kullanmanız gerekiyor;

CODE:
opacity:0.5;
filter:alpha(opacity=50);


Tasarım yaparken sayfanın bir bütün içerisinde ortalanması çok sık başvurduğumuz yöntemlerden biridir. Kapsayıcı bir dive margin:0 auto; ifadesinin verilmesi divi orantılı bir biçimde ortalayacaktır. Ancak bunun internet explorerdada çalışması için kodlarınıza text-align:center; ifadesini eklemeniz gerekmektedir.

Bildiğiniz gibi internet explorer5 ve 6 sürümleri her ne kadar piyasada artık kullanılmadığını söylemek istesemde ne yazıkki genel internet kullanıcılarının yaklaşık %30'u halen internet explorer 5 ya da 6 kullanıyor. Bu durumda büyük bir çoğunluğu ya dikkate almayacağız ya da çözüm arayışına gireceğiz.İnternet explorer 6 ve öncesi sürümler png formatındaki resimleri transparent olarak yorumlamıyor malesef. Tasarımcıyı kısıtlayabilecek bir aksilik gibi görünsede çözümü için bir çok yöntem geliştirilmiş durumda. Araştırmalarım sonucunda bu sorunun şu şekilde çözülebildiğini söyleyebilirim;

CODE:
* html img,

* html .png{

position:relative;

behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)

);

}



Bu stil tanımlamasını farklı bir isim ile kaydedin. Daha sonra sadece internet explorer6 ile sayfa ziyaret edildiğinde bu css in yüklenmesini sağlayın;

Yani şu şekilde;

CODE:
<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="ie6_pngfix.css" />

<![endif]-->


İnternet explorer6 ile sayfanıza girildiğinde bu kod blogu devreye girecek ve ie6_pngfix.css dosyamız yüklenecek sayfadaki tüm .png uzantılı resim dosyaları için görünümü fixleyen kod çalışacaktır.

Bir diğer internet explorer sorunsalımız ise link stillendirmeleridir. Bir örnek üzerinden inceleyelim;

CODE:
.menu A:link {text-decoration: none; color: #0a50a0; font-family: Arial; font-size:11px;font-weight: bold;}
.menu A:visited {text-decoration: none; }
.menu A:active {text-decoration: none; }
.menu A:hover {text-decoration: underline;}


Bu örneğimizde bir menu div classımızın içerisindeki tüm a etiketlerini stillendirdik. Üzerine gelindiğinde ise yazıların altının çizilmesini sağladık. Bu şekilde yazıldığında internet explorer haricindeki tarayıcılarda herhangi bir sorun yaşanmayacaktır. Ancak internet explorerda bazen sorunla karşılaşabilirsiniz. Default olarak linkimizin rengi ve fontunda sorun çıkmaz. İlk sayfa yüklendiğinde font elementlerindede herhangi bir sorun çıkmayacaktır. Ancak linke tıkladığınızda devreye girecek olak visited sözdiziminde herhangi bir görüntü değişmesinin yaşanmaması gerekiyor.

Varsayılan olarak A:link deki tanımlamayı kullanmalısınız mantık olarak ki chrome ve firefox bu şekilde algılar herzaman. İnternet explorerda ise herhangi bir tanımlama bu elementlere yapılmadığı için kendi varsayılanını atayacaktır. Linke tıkladığınızda fontun büyüklüğünün 3-4 px kadar büyüdüğünü belirttiğiniz fontun dikkate alınmadığını görebilirsiniz. Bunun için diğer elementler içinde aynı tanımlamaları yapmak durumundasınız. visited,active ve hover içinde standart olmasını istediğiniz özellikleri belirtmelisiniz. Kodunuzu bu şekilde düzenlediğinizde sorun çözülecektir.

Şimdilik bu kadar. Genel itibari ile en sık yaşanan problemlere değindim. Daha farklı sorunlar ile karşılaşıyorsanız konu altında belirtebilirsiniz. İyi çalışmalar.


Oguzz
oguz@thecoders.net
25 Ocak 2012 20:06

İlgili Olabilecek Makaleler


Yorumlar (0)




Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg