IE’de Hata Ayýklamak için þžartlý Yorumlar Kullanmak adlý makalede bahsettiðimiz gibi "CSS ile web sitesi kodlamanýn en büyük sorunu CSS’in özelliklerini yorumlayamayan veya yanlýþ yorumlayan web tarayýcýlarýdýr. Bu nedenle CSS ile web sitesi kodlarken bu tip hatalarý ayýklamamýz gerekiyor. CSS ile hata ayýklama web tarayýcý gruplarýnýn veya bir kýsým web tarayýcýsý için kurallarý veya bildirimleri gizlemek veya göstermek þeklinde uygulanýr."
Biz CSS’de hata ayýklamak için bir çok yöntem kullanýrýz. Bunlarýn en çok kullanýlanlarý aþaðýda anlatýlmýþtýr.
Çocuk Seçicileri Kullanarak Hata Ayýklamak
Çocuk seçicilerini incelemek için týklayýnýz. Çocuk Seçicileri CSS hata ayýklama yöntemi olarak kullanýlabilir. Çocuk Seçicileri Windows sistemlerinde kurulu olan IE6 ve alt versiyonlarýnda görüntülenmeyecektir, bu nedenle IE6 ve altý versiyonlarda görünmesi istenmeyen tanýmlar Çocuk Seçicileri kullanarak gizlenebilir.
Her tanýmlamadan sonra ikinci bir tanýmlama olarak kullanýlýr. Ýkinci tanýmlama çocuk seçicisi olmalýdýr.
.icerik h3 {height:21px;}
.icerik > h3 {height:auto; min-height:21px;}
IE 7 Çocuk Seçicilerini desteklemektedir. Bu metot uygulanýrken bu dikkate alýnmalýdýr.
Özellik(Attribute) Seçicileri Kullanarak Hata Ayýklamak
Diðer bir hata ayýklama yöntemi Özellik Seçicicileri kullanarak hata ayýklamaktýr. Bir çok yeni nesil web tarayýcýsý (FF ve Safari) bu kullanýmý destekler, ancak IE6 ve altý versiyonlar bu özelliði desteklemez. IE7 bu kullanýmý desteklemektedir. Bu hata ayýklama yöntemi yukarýda bahsettiðimiz "Çocuk Seçicileri ile Hata ayýklama" yöntemi gibi kullanýlýr.
Özellik Seçicileri kullanarak elementlerin id’lerine göre atamalar yapabiliriz. Bu bize bir çok avantaj saðlar. Bu avantajlarý hata ayýklamak içinde kullanabiliriz.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
p
{
background: red; /* Tüm web tarayýcýlarýnda görünür */
}
body[class|="sayfaYapisi"] p
{
background: green; /* IE 7 ve Yeni web tarayýcýlarýnda görünür Opera hariç */
}
</style>
</head>
<body class="sayfaYapisi">
<p>Test</p>
</body>
</html>
Genel Seçicileri (*) Kullanarak Hata Ayýklamak
Her ne kadar bu hata IE7 ile birlikte düzeltildiyse de çok kullanýþlý bir hata ayýklama metodudur. Kullanýmý çok basittir.
a:hover {
border: 1px dotted black;
}
* html a:hover { // bu tanýmlamayý ie6+ ve altý versiyonlarda görünmeyecektir.
border-style: solid;
}
Ters Bölü Ýþareti(\) Ýle Hata Ayýklama
IE5x/Win versiyonlarý bu karakteri yorumlamazlar bu nedenle IE5x/win versiyonlarýndan kodumuzu gizlemek için bu yöntemi kullanabiliriz. CSS kodu yazarken en çok ihtiyacýmýz olan geniþlik tanýmýnýn IE5x versiyonlarda yanlýþ algýlanmasýdýr. bu hatayý düzeltmek için bu yöntem kullanýlabilir.
#icerik {
width: 770px;
wid\th: 750px; /* ie5x - win bu kodu görmeyecek */
}
Ben þahsen kutu modelinde hata ayýklamak için tantek‘in kullandýðý metodu kullanýyorum, daha saðlýklý ve tüm web tarayýcýlarý göze alýnarak hazýrlanmýþ bir hata ayýklama metodudur tavsiye ederim. Ama bu yönteminde kullanýldýðýný bilelim.
Alt Çizgi (_) ile Hata Ayýklama
Bu yöntemde IE4-6 versiyonlarda hata düzeltmek için kullanýlabilir.
#menu {
position: fixed;
_position: static;
}
Burada yeni nesil web tarayýcýlarý ikinci tanýmlamayý görecek ve buna göre yorumlama yapacaktýr. Ancak IE4-6/win versiyonlarý (_) anlayamadýðý için bu kodu yorumlamayacak ve ilk koda göre hareket edecektir.
Owen Yöntemi ile Hata Ayýklama
þžimdiye kadar ki tüm yöntemler Internet Explorer içindi. Bunun nedeni bir çok hatanýn IE’den kaynaklanmasýdýr tabi. þžimdi kullanacaðýmýz metod ise Opera için bir hata ayýklamasýdýr.
.solAlan {
background-image: none
}
/* Asagidaki bolum Opera 6 ve altý veya IE6/win görünmeyecek */
head:first-child+body .solAlan {
background-image: url("menu.png");
background-attachment: fixed;
}
Bu yöntem hem Opera 6 ve altý hem de IE6 ve altý versiyonlar için geçerlidir. Sadece Opera 6 ve altý versiyonlar için kod yazmak istersek
html>body div.alt {
c\olor: red; /* sadece Opera 6 için */
}
head:first-child+body div.alt {
color: black;
}
Yorum Kodlarý içinde (\) Kullanýmý ile IE/Mac’de Hata Ayýklama
IE/Mac versiyonlarýnda yorum satýrý içindeki ters bölme iþaretini(\) yorumlamamaktadýr. Bu nedenle IE/Mac versiyonlarýnda hata ayýklamak için bu yöntem kullanýlabilir.
/* bu alani IE5/Mac den gizleyelim \*/
* html {
height: 1px;
}
/* hata ayiklama sonu */
Bunlarýn dýþýnda kutu modeli hata ayýklamasý için kullandýðýmýz tantek‘in yöntemi, Css de kodumuzu ÝE’den gizleme adlý makalede kullandýðýmýz !important yöntemi ve IE’da min-width, min-height,max-width, max-height Kullanmak makalesinde kullandýðýmýz expression() yöntemleride vardýr. Bunlardan daha önce bahsettiðimiz için deðinmedik. Bunlarýn dýþýnda kullanýlan diðer bazý yöntemler olsa da biz burada genel kabul görmüþ yöntemleri yazmayý uygun bulduk.