CSS Derslerindeki CSS Sorunları ve Çözüm Önerileri kısmındaki birçok yöntemin ana mantığıda budur.

Farklı tarayıcılar için düzenleme(hack) yazarken genel anlamda iki farklı yöntem kullanırız. Farklı css dosyaları hazırlayıp bunları eklerken şartlı yorumlar yardımı ile farklı tarayıcılar için farklı css kodlarını gösteririz, ikinci yöntem ise kod içerisinde o tarayıcının gördüğü kod bloğu içinde ona göre kod yazarız. Burada birinci yöntemi(IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak) daha önce anlatmıştık. Bu yazımızda kod içindeki css düzeltmelerinden bahsedeceğiz.

CSS kodu içinde farklı tarayıcılar için farklı kod yazmanın en kolay yolu, tarayıcılara özel seçiciler içine kod yazmaktır.

Tarayıcılara Özel Seçiciler

IE 6 ve altı

* html {}

IE 7 ve altı

*:first-child+html {} * html {}

sadece IE 7 için

*:first-child+html {}

IE 7 ve yeni nesil tarayıcılar için

html>body {}

Yalnız yeni nesil tarayıcılar için (IE 7 dışında)

html>/**/body {}

sadece IE 8 için

.test { property:value; property: value\9; *property: value; }

Opera 9 ve altı sürümler için

html:first-child {}

Safari

html[xmlns*=""] body:last-child {}

Google Chrome and Safari 3.1

body:nth-of-type(1){}

Firefox 2

.foo, x:-moz-any-link { } 

FireFox 3

.foo, x:-moz-any-link, x:default { }

Firefox 2 ve 3 için yazdığımız kodu ie 7 de yorumluyor bunu engellemek için (Sonradan eklenmiştir.)

	.foo, x:-moz-any-link { }
    .foo, x:-moz-any-link, x:default { }
    *:first-child+html .foo{}/*ie7 icin normali yazin*/

Sadece Firefox 3

html>;/**/body .foo, x:-moz-any-link, x:default { }

Burada önemli olan her tarayıcı farklı görünümünde bu metoda başvurmamak gerekir, çözümü olmayan sorunlarla karşılaştığımızda bu kodları kullanmalıyız.

Bu kodları kullanma gereksinim genelde Internet Explorer 6 ve 7 için oluyor. Ama nadirende olsa diğer tarayıcıların düzeltmeleride lazım oluyor. Bir örnek yapalım

/* Firefox 1 */
.ozelSecici, x:-moz-any-link {
    background-color:#ffd560;
}
/* Firefox 2 */
.ozelSecici, x:-moz-any-link {
    background-color:#ab1b0b;
}
/* Firefox 3 */
.ozelSecici, x:-moz-any-link, x:default {
    background-color:#e6831f;
}
/* Google Chrome and Safari 3.1 */
body:nth-of-type(1) .ozelSecici{
   background-color:#e6f0fa;
}
/* Opera 9 ve altı */
html:first-child .ozelSecici{
    background-color:#a91614;
}
/* ie7 icin */
*:first-child+html .ozelSecici{
    background-color:#0098de;
}
/* ie 7 ve alt sürümler icin */
*:first-child+html .ozelSecici{
    background-color:#d4d0c8;
}
* html .ozelSecici{
    background-color:#d4d0c8;
}
/* ie6 ve alti */
* html .ozelSecici{
    background-color:#996666;
}

HTML kodu

<p class="ozelSecici">Tarayıcı</p>

Örneği görmek için tıklayınız.

Aynı XHTML kodu için aşağıdaki gibi farklı tarayıcılarda farklı sonuçları alırız.

Sayfa Google Chrome 0.3.154.9, Safari 3.1.2, Firefox 3.0.4/2.0.0.14, Internet Explorer 7/6/5.5, Opera 9.6 ile test edilmiştir.

• http://www.webdevout.net/css-hacks (*****)
• http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
• http://vikaskhera.wordpress.com/2008/08/02/css-hacks-browser-specific-selectors/ (****)
• http://centricle.com/ref/css/filters/ Önemli bir liste(****)
• http://www.siberkultur.com/?q=css-hackleri (***)
• http://www.sitepoint.com/article/browser-specific-css-hacks/ (***) sürümler eski
• http://www.artypapers.com/csshelppile/category.php?2
• http://rafael.adm.br/css_browser_selector/
• http://css-discuss.incutio.com/?page=CssHack
• http://snipplr.com/view/7043/firefox-3-css-hack/
• http://pornel.net/firefoxhack
• http://www.nealgrosskopf.com/tech/thread.asp?pid=20
• http://snipplr.com/search.php?q=CSS+hack&btnsearch=go
• http://fu2k.org/alex/css/hacks/fuzzyspecificity
• http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/ (ie6, ie7, ie8 ve ie9)

p{
	color:red !important; /* bu kısmı ie6 görmeyecek*/
	color:blue;
}

sayfa için kullandığımız paragraflar ie6 mavi ff kırmızı görünecektir.

!important css ile etkinlik için kullanılan bir etikettir. !important tanımlı özellik daha önce yapılmış aynı özelliğin üzerine çıkar. CSS ile etkinlik hakkında daha fazla bilgi için tıklayınız.

CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:

Margin’ler her zaman transparandır. Border’lar üç şekilde( solid, dashed ve dotted) olabilir. Background sadece border içerisine uygulanabilir, yani padding ve içerik alanı kısmını içerir.

Bir elementin toplam genişliği; sol+sağ marginleri, sol+sağ padding’leri, sol+sağ border’ları ve elementin içeriğini kapsar. Margin’ler, padding’ler ve border’lar opsiyonel elementlerdir fakat başlangıçta bunların değerleri ’0′ olarak belirlenmiştir. Yükseklik içinde durum aynıdır. üst-alt margin değerleri, üst-alt padding değerleri, üst-alt border değerleri ve içerik alanı yükseliği toplamı yükseklik değerini oluşturur.

Box modeli iki elementi bulunur. Blok-level elementler ve inline-level elementler.

Blok-level elementler : Blok-level elementin görünüş formatı bir kutu gibidir. Blok-level elementler inline elementleri ve diğer blok-level elementleri içerebilir. Tipik özellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li vd.

Inline-level Elementler : Inline elementler bir içerik gibi görünür, diğer bir inline elelementi veye bir metni içere bilir. Genelde yeni satır veya boşluk oluşturmazlar. Örnek: a, strong, span vd.

Tüm kutu modelleri aşağıdaki bölümleri içerir:

İçerik Alanı: Elementin asıl içeriğini oluşturan kısmıdır. Metin ve nesneler içerir.

Padding : Elementin kenarındaki dolgu alanıdır.

Border : Elementin kenarlıklarıdır.

Margin: Elementin kenar boşluklarıdır.

Box Model Sorunu ve Çözümü

W3C’ye göre genişlik(ve yükseklik) değeri içerik alanı değeridir. padding ve border değerleri buna ek olarak toplam kutu genişliğine eklenir. Eğer toplam kutu değeri eklenecekse içerik alanı ve etrafındaki padding ve border değerleri toplamıdır.

Buraya kadar çok güzel ancak tüm web tarayıcıları bu durumu aynı şekilde yorumlamaz. IE’un IE6/strict’den önceki versiyonları yukarıda anlattığımız standart yorumun dışına çıkar, genişlik veya yükseklik değeri tüm kutu model element değerini ifade eder. Yani tüm padding ve border değerlerini içerir kalan kısmıda içerik alanı değeri olarak belirlenir.

#icerik{
    width:200px;
    padding:10px;
    border:5px solid #000;
}

Standart web tarayıcıları bu durumu şöyle yorumlayacaklardır.

200px + 10px sol kenar iç boşluğu + 5px sol kenar çizgisi + 10px sağ kenar iç boşluğu + 5px sağ kenar çizgisi = 230px toplam genişlik

kutu elemetinin genişliği 230px olacaktır.

Ancak IE‘un IE6/strict’den önceki versiyonlar için kutu elementinin genişlik değeri 200px’dir.

Margin(Kenar dış boşluğu) değeri width değerini direk etkilemese de dolaylı olarak etkiler. Kutular arasındaki genişliği hesaplarken margin değerlerinide dikkate almalıyız. CSS ile sayfa yapıların oluştururken kenar dış boğluklarını(margin) da dikkate elmalıyız.

Bu sorunun çözümü için üretilmiş bir çok yöntem vardır. Ancak bence en sağlamı tantek‘in ürettiği koddur ve burada bundan bahsedeceğim.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}

Burdaki ilk genişilk değeri(2. satırdaki) IE’un IE6/strict’den önceki versiyonların yorumlayacağı genişlik değeri, ikinci genişlik değeri(7. satırdaki) ise standart yorumu destekleyen web tarayıcılarının kullanacağı değerdir.

Bu kodlamada son olarak Opera 5 için bir kod ekleyeceğiz.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}
html>body #icerik {
	width:200px;
}

Not: Aynı şeyler yükseklik(height) içinde geçerlidir.

Kaynaklar

• http://tantek.com/CSS/Examples/boxmodelhack.html
• http://css-discuss.incutio.com/?page=BoxModelHack
• http://www.createwebmagic.com/css101/lesson2/?inc=part3
• CSS Hacks and Filters : Making Cascading Stylesheets Work