ALTI ÜSTÜ TASARIM – Mehmet Doğan

CSS FIR Teknigi

09 Mart 2005

Gecenlerde yazdigim CSS Diyeti ile ilgili yazima yorumunu yazan Onur Ozan (Cemshid’in yazari), belki de bircok kisinin bilmedigi ya da farkinda olmadigi fakat bence onemli olan olan bir konuya benim dikkatimi cekti. Tesekkurler Ozan.

Kisaca meseleyi ozetlemek gerekirse, CSS icinde kullanilan display:none; biz tasarimcilara cok yardimci olmakta. display:none; ile istedigimiz bir HTML elementini ya da tasarim icindeki gorsel bir ogeyi, CSS’i destekleyen browserlarda gorunmez yapabiliyoruz. Bir nevi "gorunmezlik iksiri"

display:none; bircok HTML elementi icin kullanilabilir fakat en cok kullanildigi yer, bir tekstin, resim ile degistirilmesi teknigidir. Bu teknige "FIR"(Fahrner Image Replacement) adi veriliyor.

Kanadali Joe Clark (nam-i diger webin erişilebilirlik avukati) display:none; elementinin yanlizca browserlara degil ayrica engellilerin kullandigi ekran okuyucularina da gorunmez oldugunu soyledi (en populer olan JAWS disindaki diger programlara).

Bu yazida birkac degisik FIR teknigini inceleyecegiz:

Diyelim ki bir yazinin basligini CSS ile belirtmek istiyorsunuz ve ayrica bu yaziyi FIR teknigini kullanarak, bir resim ile degistirmek istiyorsunuz. Basliginiz asagidaki gibi olsun:

<h2>Sitenizin Basligi</h2>

Gelin yukaridaki teksti birkac degisik metod ile resime donusturelim. Asagida 3 tane degisik teknikten bahsedecegim. Bu tekniklerin nasil bir sonuc yarattigini gormek isterseniz, buradaki sayfaya goz atabilirsiniz.

1. Teknik

Ilk metod, yukarida bahsettigimiz display:none; elementini kullanacak. Iste yazmamiz gereken CSS:

1. #baslik1 {background: url(images/baslik.gif) no-repeat; width:403px; height:64px;}
2. #baslik1 span {display:none;}

Bu CSS’in calismasini saglayacak HTML ise su sekilde olacaktir:

1. <h2 id="baslik1"><span>Sitenizin Basligi</span></h2>

Gordugunuz gibi, CSS icindeki #baslik1 icin bir arkaplan resmi verdik. Resmin dosya ismi baslik.gif ve boyutlari ise 403px'e 64 piksel. Bu arkaplan resimi, bizim degistirmek istedigimiz tekstin yerini aldi. Teksti ise <span> elementi icine aldik. CSS icinde de #baslik1 id’si icinde gordugun her <span> icin display:none; uygula yani "gorunmez yap" dedik. Bu metod en yaygin kullanilan FIR metodu olmasina ragmen, hem Joe Clark’in dedigi gibi ekran okuyucularinda gorunmuyor hem de herhangi bir nedenle resim erisimini browserlarinda kapatmis kisiler, hem yaziyi hem de resmi goremiyorlar. Bu teknik erişilebilir bir teknik degil.

2. Teknik

Bu teknik ise display:none; ve <span> elementini kullanmadan, bir teksti, resim ile degistirilmesini sagliyor.

Bu teknik icin gerekli CSS asagidaki gibi:

1. #baslik2 {background: url(images/baslik.gif) no-repeat; width:403px; height:64px; text-indent: -999px;}

Bu CSS’in calismasini saglayacak HTML ise:

1. <h2 id="baslik2">Sitenizin Basligi</h2>

Gordugunuz gibi, bu teknikte, display:none; ya da <span> kullanmadik. Yukaridaki CSS’de yapilan is, <H2> icin bir arkaplan resmi verilmesi ve <H2> elementi icinde kalan yazilar text-indent:-999px; ile ekran goruntusunden disari cikarilmasi. Tekst, -999px, eksi degeri nedeniyle browserinizin gorunen kisminda yer almayacagindan, teks, resim ile yer degistirmis gibi gorunur. Bu teknik, ekran okuyucularina dost iken, resimleri kapatarak sitenize gelecekler, ne yaziyi ne de resmi goreceklerdir. Yani erişilebilir degil.

3. Teknik

Bu teknik, display:none; kullanmaz iken, <span> kullanmaktadir. <span>’i web standartlari ile tasarim yapan bircok kisi, joker olarak kullanir. Bizde bu joker elemani kullanicagiz bu teknikte. Iste bu teknigin CSS’i:

1. #baslik3 {position:relative; width:403px; height:64px; overflow:hidden;}
2. #baslik3 span {display:block; position:absolute; width:403px; height:64px; background:url (baslik.gif) no-repeat;}

Ve yukaridaki CSS’in calismasini saglayacak HTML ise:

1. <h2 id="baslik3"><span></span>Sitenizin Basligi</h2>

Gordugunuz gibi, <span> kullaniyoruz fakat <span> degerinin icine hicbir sey yazmiyoruz. Yukaridaki CSS bize sunlari soyluyor. #baslik3 id’si icinde tekst olabilir ve fakat bu tekst verilen sinirlari yani 403 ile 64 pikseli asamamalidir. Bunu saglayan CSS ise overflow:hidden elementidir. Ayrica yine CSS’de sunlar deniyor, eger #baslik3 <span> iceriyorsa, bu <span> icin arkaplan uygula. Iste boylece, bizim resmimiz, tekstin tam uzerine yer almis oluyor. Bunu saglayan ise position:absolute; oluyor. Bu metod hem ekran okuyucularina hem de browserlarinda resmin fonksiyonunu kapatmis kullanicilara iyi bir sonuc veren bir teknik. Yani erişilebilir.

Fakat bu metodun bos, anlamsiz, ekstra bir <span> elementi ile gerceklestirilmesi, "web anlamliligi" bakimindan iyi bir davranis degil. "Web Anlamliligi" bize her HTML elementinin bir gorevi olmasi gerektigi ve gereksiz kodlamadan kacmamizi soyluyor. Fakat maalesef simdilik, FIR'i hem erişilebilir hem de anlamli yapacak cok fazla bir secenek yok.

Son olarak, yukaridaki uc teknigin sonuclarini gormek isterseniz, bu sayfayi ziyaret edebilirsiniz.

Yeniden tesekkurler Ozan. Siteni (www.cemshid.com) dort-gozle bekliyorum.