CSS3 Renk Geçişinin body elemanına uygulamasındaki sorun ve çözümü

CSS3 yeniliklerinde yaralanıyoruz, tabi bazı sorunlar ortaya çıkıyor. Hatasız kod olmayacağı için, hata olur ama bir çözümüde vardır elbet diye düşünmemiz lazım.

Sorun tam olarak bir sayfanın ardalanının tamamına renk geçişi uygulamak istediğimizde belli bir yere kadar uygulayıp kalan kısmını tekrar ettirerek istemediğimiz bir durum oluşmasına neden oluyor.

Sorunun çözümünü aradığımda ilk sonuç http://stackoverflow.com/ sitesinde buldum biraz daha araştırınca benzer cevaplar gördüm ve sizlerle paylaşmak istedim.

background-image özelliğine eklenen renk geçişi kodu tekrar edecektir, biz bu tekrarı istemediğimiz için.

background-repeat: no-repeat;

ekledik. Ayrıca uygulana renk geçişinin sayfa zemininde sabitlenmesi için

background-attachment: fixed;

kodunu ekledik.

Diğer kod eklemeleri farklı tarayıcılar içindir.

Kaynaklar

Yenilenmiş Flex(Esnek Kutu) Modülü

Bildiğiniz gibi CSS3 modülleri halen geliştirilmeye devam ediyor. Bu modüllerden değişikliğe uğrayanlar oluyor. Flex modülü değişikliğe uğrayan modüllerden birisi. Daha önce yazdığım CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout) makalemde anlattığım esnek kutu özelliği bu özelliğin ilk standartlaşmış hali idi. Daha sonra iki kere daha değişti bu modül.

  • display:box tanımı benim yazımda anlattığım 2009’da standartlaşmıştı ve şu an kullanılmıyor. Sadece mobildeki bazı tarayıcılar destekliyor.
  • display:flexbox tanımı 2011’de tanımlandı, hibrit bir çözüm. Şu an kullanılmıyor. Sadece İE 10 destekliyor.
  • display:flex tanımı son olarak 2014’ün mart’ında standartlaştı ve şu an kullanımda olan tanım. Yeni nesil tarayıcıların hepsi destekliyor.

Yenilenen Flexbox modülünün belirsiz ve/veya esnek boyutlarda bile sayfa planına daha verimli bir çözüm üretmek, hizalama ve kapsayıcı eleman içindeki öğeleri dağıtmayı hedeflemeketedir.

Flexbox modülünün ana fikrinin arkasında kullanılıbilir boş alana öğeleri en iyi şekilde pozisyonlamak olarak tanımlanabilir.

Tabi CSS ile sayfa yerleşimi kodlamanın birçok avantajı var. Bunun yanında bazı karışık sayfa yerleşimlerinde ise bizi zorladığı bir gerçek. Özellikle esnek yapılı sayfa düzenleri ve dikey eksendeki yerleşimlerdeki sorunlarını gören W3C bize bu konuda yardımcı olacak yöntemleri üretmeye başladı. Bunlardan bir tanesi Esnek Kutu Yerleşimi Modülüdür(EKYM).

Esnek Kutu Yerleşimi Modülü kapsayıcı bir eleman içindeki alt elemanların esnek bir şekilde yerleşimini sağlamaktadır. Daha önce dikeyde yaşadığımız birçok sorunu(dikeyde ortalama ve aksak kolon sorunları gibi) gidermemizi ve uyumlu web sayfaları oluşturmamızı daha kolay hale getiriyor.

Esnek Kutu Yerleşimi Modülünün son standartlaşmış sürümünü(2014 mart) bu makalemizde inceleyeceğiz.

flex özelliklerini iki ana başlıkta inceleyeceğiz. Esnek kapsayıcı eleman özellikleri ve kapsayıcı içindeki esnek kutu özellikleri

  • Esnek Kapsayıcı Özellikleri
    • display: flex ve inline-flex
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
  • Esnek Öğe Özellikleri
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

flex

Esnek Kapsayıcı Özellikleri

display:flex ve display:inline-flex

Yapısı: display: (değer) Aldığı (Yeni) Değerler: flex | inline-flex
Başlangıç değeri: flex
Uygulanabilen Elementler: Tüm elemanlara
Kalıtsallık: Var

İlk olarak kapsayıcı esnek kutuları çevreleyen eleman display:flex veya display:inline-flex tanımı yaparak başlıyoruz. Farklı tarayıcılar için farklı flex sürümleri yazılır.

.esnekKutu{
   display: -webkit-box;   /* ESKİ: Android browser, eski IOS.  */
   display: -ms-flexbox;   /* ARA: IE 10 */
   display: flex;  /* YENİ, Chrome, Firefox, IE11, IOS7  */
}

flex tanımlanmış elemanın alt elemanları esnek yapıya kavuşacaktır. inline-flex tanımında kapsayıcı eleman inline özelliği gösterir.

Basit bir örnek yapalım.

Kapsayıcı elemana tanımlanan display:flex özelliği yardımı ile alt elemanlara tanımlanan flex özellikleri ile sayfa yerleşimimizi çok kolay şekilde yapmamıza olanak sağlamaktadır.

flex-direction

Yapısı: flex-direction: (değer) Aldığı Değerler: row | row-reverse | column | column-reverse
Başlangıç değeri: row
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

flex-direction özelliği kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. Dört değer alır; row, row-reverse, column, column-reverse.

  • row: Esnek kutuları soldan sağa sıralar
  • row-reverse: Esnek kutuları sağdan sola sıralar
  • column: Esnek kutuları kolon olarak yukarıdan aşağı sıralar
  • column-reverse: Esnek kutuları row-reverse gibi ama alttan yukarı sıralar

Bir örnekle bu özelliği deneyelim.

flex-wrap

Yapısı: flex-wrap: (değer) Aldığı Değerler: nowrap | wrap | wrap-reverse
Başlangıç değeri: row
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

word-wrap özelliğinden aşina olduğumuz bir kullanımı esnek kutulara uygulamak için kullanılır. İki ve daha fazla satırdan oluşan esnek kutuların nasıl bir davranış sergileyeceğini belirlemek için kullanılır. Üç değer alır nowrap, wrap, wrap-reverse.

  • nowrap: Tek satırda esnek kutular soldan sağa sıralanır.
  • wrap: İki veya daha fazla satırda esnek kutular soldan sağa sıralanır.
  • wrap-reverse: iki veya daha fazla satırda esnek kutular sağdan sola sıralanır.

Örneğmize iki satır olacak şekilde bir iki kutu daha ekleyerek bu özelliğin kullanımını görelim.

wrap-revers tanımı ile ikinci satırı üste eklemiş olduk.

flex-flow

Yapısı: flex-flow: <flex-direction> || <flex-wrap>
Aldığı Değerler: row, row-reverse, column, column-reverse || nowrap, wrap, wrap-reverse
Başlangıç Değeri: row nowrap
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

Yukarıda bahsettiğimiz iki özelliğin(flex-direction ve flex-wrap) kısayoludur. İki özelliği tek bir tanım ile tanımlama imkanı verir.

justify-content

Yapısı: justify-content: (değer) Aldığı Değerler: flex-start | flex-end | center | space-between | space-around
Başlangıç Değeri: flex-start
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

Esnek kapsayıcı içindeki elemnaların x ekseninden nasıl hizalanacağını belirler. Beş değer alır. flex-start, flex-end, center, space-between, space-around.

justify-content

  • flex-start: Esnek taşıyıcı içindeki kutular kapsayıcının başından başlayarak(flex-direction’da belirtildiği gibi) dizilirler.
  • flex-end: Elemanlar sondan başlayarak dizilir.
  • center: Kutular kapsayıcının orta çizgisine göre hizalanarak dizilirler.
  • space-between: Kutular eşit olarak dizilir. İlk kutu orta çizginin başında, son kutu sonunda yer alır.
  • space-around: Kutular arası boşluk eşit olacak şekilde dizilir.

align-items

Yapısı: align-items: (değer) Aldığı Değerler: stretch | flex-start | flex-end | center | baseline
Başlangıç Değeri: stretch
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

Bu özellik kutuların y ekseninde nasıl hizalanacağını belirler. justify-content’in dikey şekli de diyebiliriz. Beş değer alır. flex-start, flex-end, center, baseline, stretch

align-items

  • flex-start: Kutular kapsayıcının üst çizgisineden başlayarak dizilir.
  • flex-end: Kutular kapsayıcının alt çizgisinden başlayarak dizilir.
  • center: Kutular kapsayıcının dikey olarak ortasında dizilir.
  • baseline: Her kutu içerisindeki ilk satırın yazı tipi dikkate alınarak dikeyde hizalanır.
  • stretch: Kutular kapsayıcı yüksekliğine eşitlenir. (min-width/max-width değerleri dikkate alınır)

align-content

Yapısı: align-content: (değer) Aldığı Değerler: stretch | flex-start | flex-end | center | space-between | space-around
Başlangıç Değeri: stretch
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

justify-content‘in yatayada yaptığını dikeyde yapar. İki veya daha fazla satırdan oluşan esnek kutuların dikeyde hizalanması için kullanılır. Altı değer alır. flex-start, flex-end, center, space-between, space-around, stretch.

align-content

  • flex-start: Kutular kapsayıcının üst çizgisineden başlayarak dizilir.
  • flex-end: Kutular kapsayıcının alt çizgisinden başlayarak dizilir.
  • center: Kutular kapsayıcının dikey olarak ortasında dizilir.
  • space-between: İlk satır kapsayıcı üst çizgisine, son satır kapsayıcı alt çizgisine hizalanacak şekilde dizilir.
  • space-around: Satırlar arası eşit boşluk kalacak şekilde dizilir.
  • stretch: Satırlar boşluk kalmayacak şekilde dikeyde hizalanır.

Esnek Öğe Özellikleri

order

Yapısı: order: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 0
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Varsayılan olarak esnek kutular kodda yazılan sıra ile dizilir. order özelliği esnek kapsayıcı içindeki öğelerin kaçıncı sıralda görünmesi gerektiğini belirlememizi sağlar.

Yukarıdaki örnekte ikinci sıradaki eleman ordr tanımı ile üçüncü sıraya atılmıştır.

Not: -1 değeri tanımlanan kutu ilk başa gelecektir.

flex-grow

Yapısı: flex-grow: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 0
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

flex-grow tanımı yapılmış eleman diğer esnek kutulardan verilen dğer kadar daha büyük olacaktır. Bu özellik sayesinde kutular kendi aralarında belirlenen oranlarda esnek olarak genişleyip küçülecektir.

Tüm elemanlara 1 değeri verilip bir esnek öğenin flex-grow değeri 2 tanımlanırsa, bu öğe diğer öğelere göre her zaman iki kat daha büyük görünecektir. Negatif değer almaz.

flex-shrink

Yapısı: flex-shrink: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 1
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Esnek kutu için büzülme faktörünü belirler.

flex-shrink tanımlanmış eleman, esnek kapsayıcı eleman içindeki diğer elemanlara göre göreceli olarak nasıl büzüleceğini belirler.

Yukarıdaki örnekte normal durumda eşit genişlikte görülmektedir. Ancak tarayıcı genişliği daraltılınca flex-shrink değeri 2 olarak belirlenen kutu daha fazla büzülecektir. Uyumlu web siteleri yaparken işe yarar bu özellik.

flex-basis

Yapısı: flex-basis: <değer>
Aldığı Değerler: <yüzde> || <değer> || initial || auto || main-size
Başlangıç Değeri: auto
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Esnek kutunun optimum boyutunu belirlemek için kullanılır. Eğer boş alan müsait ise esnek kutu belirlenen değer kadar genişlikte olacaktır.

Örnekte görüldüğü gibi boş alan var ise ilk eleman genişliği 300px, ikinci eleman genişliği 30%. Tarayıcı genişliği daraltılınca boş alan kalmayınca esnek kutu genişliği esenmeye başlıyor.

flex

Yapısı: flex: <değer>
Aldığı Değerler: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
Başlangıç Değeri: 0 1 auto
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Bu tanım flex-grow, flex-shrink ve flex-basis tanımlarının bir kısayoludur.

align-self

Yapısı: align-self: <değer>
Aldığı Değerler: auto | flex-start | flex-end | center | baseline | stretch
Başlangıç Değeri: auto
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Bu özellik bir esnek kutuya varsayılan veya tanımlanan hizalama tanımının dışına çıkma imkanı sağlar. Altı değer alır. auto, flex-start, flex-end, center, baseline, stretch.

Bu tanımlar align-item tanımları ile aynı işi görür.

Not: Esnek öğeler float,clear ve vertical-align tanımlarından etkilenmez.

Tarayıcı Desteği

Chrome explorer Firefox
29+ 10 (orta), 11(yeni) 28+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1 (ilk), 4.4 (yeni) 7.1 35.0

## Sonuç

Esnek kutu modülü karmaşık sayfa planları oluşturmak, uyumlu web sayfaları kodlarken önemli avantajları olan bir özellik. İyice teorisini kavrayıp sonra bu özelliğin kullanacağı yerleri araştırmalıyız. Bu konunun birde nerelerde uygulanacağını gösteren bir makale daha yazmak lazım. Bu makale fazla uzunmasın diye buraya koymadım ama yakında o yazıyı da eklerim.

Bir konuyu iki kere yazmak da pek hoş olmuyor be W3C.

Kalın sağlıcakla

Kaynaklar

Categories CSS

CSS ile Tabloları şekillendirmek

Bu makalemizde CSS ile tablolarımızı nasıl daha okunaklı ve güzel gösterebiliriz onu anlatmaya çalışacağız. Bildiğiniz gibi CSS’in namını arttıran olay web sayfa iskeletinin tablolar ile değilde katman(<div>) ile kodlaması ile olmuştur. Ancak burada bir yanlış anlaşılma oluyor genelde, oda şudur ki tablolarda bir Xhtml elementidir ve gerektiği yerlerde kullanılmalıdır, amacımız tablo kullanmamak değil web standartlarına uygun kodlama yapmak olduğunu hiç bir zaman unutmayalım. Tablo kullanılacak yerlerde de katman kullanarak işi çığırından çıkılmaz hala getirmenin bir anlamı yoktur. Tabloların kullanıldığı yerlere bir kaç örnek verelim:

  • Takvim
  • Finansal Tablolar
  • Çizelgeler
  • Plan Listeleri(otobüs, uçak iniş kalkış saat listesi vb.)

Yukarıda verdiğimiz örnekler vb. durumlarda kullanılan tablolar genelde okunması zor ve göze hoş gelmeyen yapılardır. Biz CSS ile bu tabloları daha okunaklı, kodlaması daha kolay ve güzel hale getireceğiz.

Tabloların genel yapısı aşağıdaki gibidir.

:::html
<table>
    <tr>
    	<td>... içerik ...</td>
    </tr>
</table>

Yukarıda kullanılan tablo yapısı genelde kullanılan tablo yapısıdır. Ancak tüm araçlara uyumu, erişebilirliği ve kolay kodlama için daha gelişmiş bir tablo kodlaması kullanılmalıdır. Örnek

:::html
<table cellspacing="1" class="uzerinde" id="golKrallari" summary="Türkiye Süper Ligi’nin son 3 yılında en çok gol atan futbolcu listesi">
<caption>1. LİG TARİHİNDEKİ GOL KRALLARI(SON 3 YIL)</caption>
<thead>
<tr>
	<th scope="col" abbr="sezon" class="bgYok">SEZON</th>
	<th scope="col" abbr="adsoyad">ADI-SOYADI</th>
	<th scope="col" abbr="takım">TAKIM</th>
	<th scope="col" abbr="maç">MAÇ SAYISI</th>
	<th scope="col" abbr="gol">ATTIğžI GOL</th>
	<th scope="col" abbr="ortalama">ORTALAMA</th>
</tr>
</thead>
<tbody>
<tr>
	<th scope="row" abbr="03-04" class="baslikBir">2003 – 2004</th>
	<td class="tabloZRFark">ZAFER BİRYOL</td>
	<td class="tabloZRFark">Konyaspor</td>
	<td class="tabloZRFark">34</td>
	<td class="tabloZRFark">25</td>
	<td class="tabloZRFark">0.74</td>
</tr>
<tr>
	<th scope="row" abbr="04-05" class="baslikIki">2004 – 2005</th>
	<td>FATİH TEKKE</td>
	<td>Trabzonspor</td>
	<td>34</td>
	<td>31</td>
	<td>0.91</td>
</tr>
<tr>
	<th scope="row" abbr="05-06" class="baslikBir">2005 – 2006</th>
	<td class="tabloZRFark">GÖKHAN ÜNAL</td>
	<td class="tabloZRFark">Kayserispor</td>
	<td class="tabloZRFark">32</td>
	<td class="tabloZRFark">25</td>
	<td class="tabloZRFark">0.78</td>
</tr>
</tbody>
<tfoot>
<tr>
	<td colspan="6">Kaynak: Fatih Futbol Okulu(F.F.O)</td>
</tr>
</tfoot>
</table

Tablomuzun içeriği bu kadar kısa olmasına karşın ne kadar okunaksız ve kötü göründüğü ortada. Bizim amacımız web sayfaları kodlarken sadece bilgi sunmak değildir. Bilgiyi en kullanışlı ve güzel şekilde sunmaktır.

Burada normal tablo kodlamasından farklı olan etiketleri açıklarsak. <table> kodu içindeki summary özelliği ile tablo içeriğinin bir özet açıklaması yapılmıştır. Bu özellik web değilde cep telefonu, pda vb. araçlarda tablo okuması için önemlidir. <caption> özelliği tablonun başlığını oluşturmak için üretilmiş bir etiketitir ve bu amaçla burada kullanılmıştır.(Bir çok sitede tablo başlığı için <p>, <div> ve <hx> kullanılmaktadır. Bu kullanımların yanlış olduğunu burdan belirtelim.) <th>etiketi bu alanın bir başlık olduğu belirtir,<th> etiketi içerisinde kullanılan scop=”col” ve scop=”row” özelikleri yine küçük ekranlı araçlar için başlık ile içerik arasındaki ilişkiyi göstermesi bakımından önemlidir. abbr özelliği ise küçük ekranlarda başlığın sığmaması halinde görüntülenecek başlığın kısaltmasını içerir.

Ayrıca thead, tbody ve tfoot etiketleri tabloyu 3 alana böler ve CSS ile XHTML etiketleri arasında daha fazla etkileşim yapmamızı sağlar.

Tabloları CSS ile güzelleştirirken renk seçimi önemlidir. Birbirine uyumlu renkleri seçmek her zaman güzel sonuçlar doğuracaktır. Ben biraz sade tasarımları beğendiğim için gri ağırlıklı bir tablo yapacağım. Genelde tablolara uygulanacak renklerin seçimini yaparken web sitesinin tasarımına uygun renkler seçilmelidir. Bu yaptığımız web sitesindeki tutarlılığı korumamızı sağlayacaktır. Benim seçtiğim renkler:

Tablo Renkleri

CSS kodunu yazmaya başlayalım:

:::css
body {
	font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

#golKrallari {
	width: 700px;
}

Tablonun başlığını(<caption>) düzenleyelim

:::css
caption {
    padding: 0 0 5px 0;
    font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}

Daha sonra kolon başlıklarını <th> kodlayalım. Burada başlıkların daha güzel görünmesi için kolon başlıklarının zeminine degradeli bir zemin resmi koyalım. Ayrıca kolon ve satır başlıklarının birleştiği sol üst hücreyi diğerlerinden ayıracak(.bgYok) bir zemin resmi ve rengi olmadan kodlayalım:

:::css
th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #474747;
    border-bottom:1px solid #E0E0E0;
    border-right:1px solid #E0E0E0;
    border-top:1px solid #E0E0E0;
    letter-spacing: 2px;
    text-align: left;
    padding: 6px;
    background: #F3F3F3 url(images/tablo_baslik_zr.gif) repeat-x;
}
th.bgYok {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #E0E0E0;
    background: none;
}

Kolon başlıkları ile satır başlıklarını bir birinden ayıralım. Ayrıca Satır başlıklarına bir top ikonu koyalım. Burada dikkat edilmesi gereken bir konuda birbirini takip eden tablo satırlarının zemin rengini farklı farklı tanımlayarak tablo okunurluluğunu arttırmaktır. Biz burada bir satırın zemin rengini #F3F3F3 diğer satırın zemin rengini de #FFF yaptık.

Burada ikonlardan farklı olanın bordo-mavi olması ve bu satırın Fatih Tekke’ye denk gelmesi tamamen bir rastlantı dır 🙂

:::css
th.baslikIki {
    border-left: 1px solid #E0E0E0;
    border-top: 0;
    padding-left:25px;
    background: #fff url(images/top2.gif) 5px no-repeat;
}

th.baslikBir {
    border-left: 1px solid #E0E0E0;
    border-top: 0;
    padding-left:25px;
    background: #F3F3F3 url(images/top.gif) 5px no-repeat;
}

Veri içeren hücreler içinde kenarlık, zemin rengi, font rengi ve padding tanımlaması yapalım ve burada da birbirini takip eden satırlar için farklı renk uygulamasını yapalım. Bunun için bir sınıf oluşturup(.tabloZRFark) farklı satırlara atayalım.

:::css
td {
    border-bottom:1px solid #E0E0E0;
    border-right:1px solid #E0E0E0;
    background: #fff;
    padding: 6px;
    color: #474747;
    font:11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

td.tabloZRFark {
    background: #F3F3F3;
    color: #474747;
}

Tablonun alt kısmı içinde aşağıdaki kodu yazalım:

:::css
tfoot tr td{
    text-align:right;
    border-left:1px solid #e0e0e0;
    border-bottom:2px solid #e0e0e0;
    font:italic 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

Son olarak farenin imleci üzerine gelen satırın zemin rengini değiştirerek okunurluluğu arttırmak için aşağıdaki kodları yazalım:

:::css
#golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
    background:#474747;
    color:#f3f3f3;
}

fare imlecinin satır üzerine geldiğinde çalışacak javascript kodu:

:::javascript
function uzerinegelince()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++)
{
if(tables[i].className=='uzerinde')
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=0;j<trs.length;j++)
{
if(trs[j].parentNode.nodeName=='TBODY')
{
trs[j].onmouseover=function(){this.className='uzerineGelince';return false}
trs[j].onmouseout=function(){this.className='';return false}
}
}
}
}
}
}

Bu kodu tetiklemek için:

:::html
 <body onload="uzerinegelince()">

kodunu yazalım. Fare imlecinin üzerine geldiğinde satır zemin rengi ve metin renginin değişmesi bölümün de bir iki dikkat edilmesi gereken yer var. İlki tablodaki class=”uzerinde” ve javasciriptteki if(tables[i].className==’uzerinde’) aynı olması, ikincisi javascriptteki

:::javascript
trs[j].onmouseover=function(){
	this.className='uzerineGelince';
	return false;
}

ile

:::css
#golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
    background:#474747;
    color:#f3f3f3;
}

aynı olması. Evet tablomuz sona erdi.

Sonuç sayfasını görmek için tıklayınız.

Kodlar Windows ortamında Firefox 2.0, IE 5.01, IE7 ve Opera 9.0 web tarayıcıları ile test edilmiştir.

Kaynaklar

CSS ile sayfalarımızı ve elementlerimizi ortalamak

CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.

1- Genişleyebilir blok-level elementleri ortalamak

.ortala {
  margin-left: 10%;
  margin-right:10%;
}

HTML kodu;

<p class="ortala">Lorem Ipsum is simply dummy text of the printing and typesettingindustry. </p>

Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.

2- Sabit genişlik atanan blok-level elementlerini ortalamak

2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak

Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.

W3C’de bu konu hakkında şu ifade mevcuttur: “Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamınagelir.”

.ortala2 {
  margin-left: auto;
  margin-right: auto;
  width: 50em;
}
NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir. Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç) Bu metodu desteklemeyen web tarayıcıları için body etiketine **text-align:center** ataması yaptığımızda sorun çözülmüş demektir.
body {
  text-align: center;
}

.ortala2 {
  margin-left: auto;
  margin-right: auto;
  width: 50em;
}

Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine (yani sola yaslamalıyız) çevirmeliyiz.

body {
  text-align: center;
}

.ortala2 {
  margin-left: auto;
  margin-right: auto;
  width: 50em;
  text-align: left;
}
Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)

2.b. Konumlandırma (positioning) kullanılan elementlerin negatif margin ile ortalanması

Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.

.ortala3 {
  width: 720px;
  position: relative;
  left: 50%;
  margin-left: -360px;
}

Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.

CSS3 ile nesnelere gölge ekleme (box-shadow)

CSS3 özellikleri hayatımıza girmeye başladı. Artık projelerimizde CSS3
renk geçişini, metin gölgelendirme(text-shadow), kutu
gölgelendirme(box-shadow) kullanabiliyoruz. Kullandıkça görüyoruz ki
yeni özellikler güzel ancak eklemek için biraz daha fazla kod yazmak
gerekiyor ve bazı durumları oluşturmak için bazı araçlar gerekiyor.
Örneğin CSS Gradient Generator vs. gibi

Benzer bir durum kutu gölgelerinde(box-shadow) karşılaştım. Bazı kutu
gölgeleme işlerini bir köşeye kaydetmeye başladım çünkü kodu o kadarda
akılda kalıcı değil.

Sonra bunu yazı haline getirmek istediğimde gördüm ki zaten birçok kişi
bu konuda yazı yazmış. Bende bunları toparlayıp bir yazı çıkarayım
dedim. Bu yazıyı bir yere kaydedin lazım olacak muhakkak. Aslında bu
örnekler yakında editörler tarafından sunulacaktır diye düşünüyorum.

kutulara gölge verme yazımızı okursanız kutu gölgeleri hakkında
bilgi sahibi olabilirsiniz. Kutuları 4 köşe olduğunu düşünürsek.

4 Köşeye gölge vermek

Normal box-shadow değerleri dikey ve yatayda değerler verilince hep
açılı gölgeler veriyor. Biz tüm kutunun etrafına gölge vermek için; blur
değeri ve spread  değerini kullanıyoruz.

div {
	-webkit-box-shadow: 0 0 6px 4px black;
	-moz-box-shadow: 0 0 6px 4px black;
	box-shadow: 0 0 6px 4px black;
}

blur değeri spread  değerinden büyük ise farklı,

div {
	-webkit-box-shadow: 0 0 4px 6px black;
	-moz-box-shadow: 0 0 4px 6px black;
	box-shadow: 0 0 4px 6px black;
}

blur değeri spread  değerinden küçük ise farklı bir gölge efekti görüyoruz.

Çoklu Kenar Çizgisi Oluşturmak

Önceki makalede bahsettiğimiz gibi, çoklu kenar çizgileri oluşturmak
için; spread  değeri yardımı ile yapılan bu etki için diğer değerler
sıfırlanmalıdır.

div {
	border: 3px solid orange;
	-webkit-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
	-moz-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
	box-shadow: 0 0 0 3px black, 0 0 0 6px red;
}

Tek Köşeye Gölge Vermek

Kutuların sadece x veya y köşelerinden göstermek için box-shadow
tanımının sınırlarınız zorlamamız gerekiyor. Bu iş için bir kaç yöntem
mevcut, ben burada hepsini paylaşıyoruz avantaj ve dezavantajlarını
görerek karar vermek size kalmış.

1. Yöntem bir köşeye gölge verirken aynı zamanda diğer köşelere
kenar çizgisi atayarak.

div {
	-webkit-box-shadow: 1px 0 2px black;
	-moz-box-shadow: 1px 0 2px black;
	box-shadow: 1px 0 2px black;
}

2. Yöntem Diğer köşelere herhangi bir kenar çizgisi veya gölge
atamadan sadece bir köşeye gölge tanımlamak;

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

Mantık olarak iki gölge tanımı yapıyoruz, birincisi spread ile kutu
ardalan rengi ile aynı renkte 4px bir alan oluşturuyoruz, ikinci gölge
tanımı ile de bu tanımladığımız boş alanın dışına çıkacak köşeye daha
fazla değer verip dışarı çıkmasını sağlıyoruz.

3. Yöntem Bu örnekte kenar çizgisi oluşturulan yeni kutunun biraz
içinde kalır.

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	box-shadow: 0 0 0 4px white, 0 6px 4px black;
	border:1px solid #f00;
}

Eğer kenar çizgisi kullanılacaksa;

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	border:1px solid #f00;
}

Blur değeri kadar eksi spread değeri atayarak bu çözüm oluşturulmuştur.

4. Yöntem :before seçicisi yardımı ile absolute tanımlı gölge
eklenir.

div {
	width:250px;
	height:250px;
	position: relative;
	padding: 0 7px 0 0;
	overflow: hidden;
}

div:before {
	position: absolute;
	content: ' ';
	top: 0px;
	right: 7px;
	bottom: 0;
	left: 0;
	background-color: transparent;
	box-shadow: 0 0 5px black;
	border: 1px solid red;
}

Çıkmasını istediğimiz kenara padding tanımı yapılır, :before seçicisi
ile o köşeye ait kenar değeri padding ile aynı tanımlanır. :before
seçicisine box-shadow tanımı yapılır yapılan padding tanımından fazla
değer içermelidir.

3 Köşeye Gölge Tanımlama

Yukarıdaki 4.yönteme benzer bir kullanım ile yapılır.

div {
	width:250px;
	height:250px;
	position: relative;
	padding: 7px 0 7px 7px;
	overflow: hidden;
}

div:before {
	position: absolute;
	content: ' ';
	top: 7px;
	right: 7px;
	bottom: -7px;
	left: 7px;
	background-color: transparent;
	box-shadow: 0 0 5px black;
	border: 1px solid red;
}

Yukarıdaki yöntemin tersi yapılır ve kaldırılacak köşeye eksi değer
atanır.

Sonuç

CSS3 bizi resim yönetme araçlarına bağlı olmaktan olduğunca kurtarmaya
çalışıyor. Box-shadow bu kurtarma yöntemlerinin en güzellerinden birisi.
Ben yukarıda genelde iş yaparken lazım olan örnekleri sergiledim.
Kaynaklardaki linklerde box-shadow özelliği ile yapılmış çok farklı
gölge uygulamaları mevcut, bu uygulamaları incelemekte yarar var.
Tasarımları HTML’e çevirirken bu örneklerin aklımızın bir yanında
durmasında fayda var. Tasarımda gördüğümüz birçok gölge uygulamasını
box-shadow ile halledebiliyoruz. Birçoğunu diyorum, ama hepsi
diyemiyorum, çünkü tasarımcıların sınırları belli olmadığı için hepsi
demek zor.

box-sahdow müşteriyi patronu ikna edebildiğimiz yerlerde
uygulayabildiğimiz özellikler, ama gerçekten arayüz geliştiriciye büyük
kolaylıklar sağlıyor.

Uyumlu web’de gizlenen alanlardaki artalanları uçurmak

Mobilde her kilobaytın hesabı yapıldığı için ve masaüstüne göre nispeten daha yavaş bağlantılar nedeniyle uyumlu web çalışmalarında performan daha fazla önem kazanıyor.

Tasarım icabı mobilde gizlenecek alanlardaki artalan resimleri kaldırmamız bize avantaj sağlayacaktır.

  .logo {
    background: url(logo.png) 0 0 no-repeat;
  }
  
  @media (max-width: 979px) {
     .logo { 
        display: none;
     }
  }

yerine

  .logo {
    background: url(logo.png) 0 0 no-repeat;
  }
  
  @media (max-width: 979px) {
     .logo { 
        background-image: none
     }
  }

kullanımı bize performans olarak geri dönecektir.

Kaynaklar

Categories CSS

Background-attachment local değeri

background-attachment özelliğinden çok öncelerden bahsetmiştim. Benim bahsettiğimde iki değer alıyordu; scroll ve fixed değerleri. Ancak bunlara CSS3 ile birlikte yeni bir değer daha eklenmiş; local değeri. Gerçi ekleneli bayağı olmuş. (2009)

Benim yazdığım ilk makalede şöyle tanımlamışım bu özelliği “background-attachment özelliği zemine eklenen resmin sayfa ile scroll etmesini veya sayfanın zeminin de çakılı kalmasını sağlar.”

Bu tanımda eksik kalan kısımları tamamlayalım. background-attachment özelliği iki farklı görünüme hitap eder: Birincisi ana kapsayıcı yani tarayıcı, ikincisi bizim oluşturduğumuz kapsayıcı diğer adı ile yerel (local).

background-attachment: local tanımı ana kapsayıcının kaydırma hareketinden etkilenmez, sadece bizim oluşturduğumuz elemanın kaydırma çubuğu hareketinden etkilenerek artalanı çakılı kalır.

Yukarıdaki örneği incelersek;

background-attachment: scroll ana kaydırma etki etmez, yerel kaydırmada artalan resmi kaydırılır.

background-attachment: fixed ana kaydırma ve yerel kaydırmada artalan resmi çakılı kalır.

background-attachment: local ana kaydırma etki etmez, yerel kaydırmada artalan resmi çakılı kalır.

Örneği inceleyerek tanımları daha iyi anlayabiliriz.

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
8+ +

Kalın sağlıcakla.

Kaynaklar

Categories CSS

Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)

Xhtml ile kodlama yaparken genelde metinleri kullanırız. Çünkü metinlerin eklemesi, düzenlemesi kolaydır ve arama motorları indekslemesini kolay yapar. Ancak bazı durumlarda metin yerine resim kullanmak sitemizin görselliği açısından önemlidir metinler CSS ile bir yere kadar şekillendirilir, bir çok metin şekillendirme yöntemini CSS ile yapamayız. Bazı durumlarda metin yerine resim kullanmak durumunda kalırız.

Web standartlarına göre kodlama yaparken metin yerine resim kullanıldığı durumlarda arama motorlarının rahat indekslemesi ve CSS’i ve resimleri desteklemeyen tarayıcılarda görüntünün ve erişebilirliğin bozulmaması için Metin Yerine Resim Ekleme Teknikleri(Image replacement) kullanılır.

Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir, bazıları CSS ve resimlerin desteklenmediği tarayıcılarda sorun çıkardığı için web kodlamacısı tarafında kullanımı terkedildi. Biz burada belli başlı 4 metin yerine resim ekleme tekniğini anlatacağız ve avantaj, dezavantajlarını sizlerle paylaşacağız.

1- Fahrner’in Metin Yerine Resim koyma tekniği (Fahrner Image Replacement – FIR)

Todd Fahrner arkadaşımızın ürettiği bu kod en popüler metotlardan biridir. Uygulanması en basit metot olması kullanımını arttırmıştır. Teknik çok basittir yerine resim konacak metin <span> etiketi içine alınır. Xhtml kodu:

:::html
<h1> <span>Selam</span> </h1>

Metin yerine görünecek resim <h1> etiketine uygulanır: CSS kodu

:::css
h1 {
	background:url(selam.gif) no-repeat;
	width: 62px;
	height: 19px;
	font-size:16px;
}

ve son olarakta <span> etiketi içindeki metni gizlemek için:

:::css
span {
	display: none;
}

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

Bu yöntem bir çok yönden avantajlıdır ancak son yazdığımız kod biraz problemlidir, Bir çok ekran okuyucu bu kodda sorun çıkaracaktır. Erişilebilirlik açısından eksik bir kodlama tekniğidir. Bu eksikliği gidermek için başka yöntemler geliştirilmiştir.

2- “Phark” Metin Yerine Koyma Tekniği

www.phark.net’in ürettiği bu teknik ekran okuyucuları tarafından görüntülenecektir, bu yönüyle FIR tekniğinden avantajlıdır. Ayrıca fazladan <span> etiketi üretmemesi yönüylede avantajlıdır. Html kodu:

:::css
<h1>Selam</h1>

FIR tekniğinden farklı olarak bu teknikte text-indent değeri yüksek eksi değer(genelde -999px) verilerek ekranı dışına atılarak üretilir. CSS kodu:

:::css
h1 {
	text-indent: -999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

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

Bu teknik ekran okuyucularda sorunsuz çalışacaktır ancak resim görüntülemeyi iptal eden kullanıcılar bu metot ile kodladığımız sayfalarda sorun yaşayacaktır. Biz bu tekniği CSS ile Menü Oluşturmak V – Resimli Menüler makalemizde uygulamıştık.

3- Gilder/Levin Metin Yerine Koyma Tekniği

Tom Gilder ve Levin Alexander bu kodlamayı geliştirmiştir. Ekran okuyucularında ve resim görüntülemeyi iptal eden kullanıcılarda sorunsuz çalışır. Bu teknikte boş bir <span> etiketi ile yazının üzeri kapatılır, eğer resimleri kapatıp sitenizi ziyaret eden olursa altındaki metni görür.

Bu metot için fazladan <span> etiketi üretilir. Html kodu:

:::html
<h1> <span></span>Selam </h1>

<h1> etiketinin boyutları resmin boyutları ile aynı atanır ve göreceli olarak konumlandırılır. CSS kodu

:::css
h1 {
	width: 62px;
	height: 19px;
	position:relative;
	font-size:16px;
}

Ekstradan üretilen <span> etiketi mutlak konumlandırma ile konumlandırarak metnin üzerini kapatırız. Ayrıca boyutları %100 verilerek tam kapanma sağlanır. Son olarakta görünecek resim zemin resmi olarak atanır.

:::css
h1 span {
	background: url(selam.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

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

Bu metot hem ekran okuyucuları hemde resim göstermeyen tarayıcılarda sorunsuz çalışır. Tek dezavantajı fazladan bir <span> etiketi eklenmesidir.

Fakat bu metodun boş, anlamsız, ekstra bir <span> elementi ile gerçekleştirilmesi, “web anlamlılığı” bakımından iyi bir davranış değil. “Web Anlamlılığı” bize her HTML elementinin bir görevi olması gerektiği ve gereksiz kodlamadan kaçmamızı söylüyor. Mehmet Doğan

Bunların dışında Radu, Leahy/Langridge, Dwyer, Lindsay ve Shea Enhancement Teknikleride mevcuttur. Ayrıca hala bir çok teknik çıkarılmaktadır.

4- Inman Metin Yerine Flash ekleme Tekniği (Inman Flash Replacement (IFR)) ve Boyutlandırılabilir Inman Metin Yerine Flash ekleme Tekniği (Scalable Inman Flash Replacement (sIFR))

Metin yerine resim ekleme tekniklerinin amaçlarında bir taneside herkesin bilgisayarında olmayan fontları kullanmaktır. Mike Davidson ve

Shaun Inman daha yaratıcı bir teknik geliştirdiler. Metin Yerine Flash ekleme Tekniği ve Boyutlandırılabilir Metin Yerine Flash ekleme Tekniği.

Flash swf dosyalarına font gömmeye izin veriyor, metin yerine resim koymak yerine metin yerine niye flash dosyası koymayalım diye düşünen bu arkadaşlar bize gerçekten çok farklı bir tekniği öğrettiler, yani sFIR’ı. Bu yöntemde javascript, doküman içinde belirli bir metini veya belirlenmiş sınıf ismini bir döngü ile bulup yerine flash elementini koyuyor. Javascript metin yerine küçük flash dosyalarını koyuyor. Bu teknik ile sadece belirtilen yerler flash dosyası ile değiştirilir tüm sayfa değiştirilmez. Bu tekniğin bir diğer avantajı flash dokümanları seçilebilirdir yani eklediğimiz metni kopyalanıp yapıştırma imkanımız var demektir. Bu metot ile metinler tekrar boyutlandırılabilir.

Bu tekniği kolayca uygulamamız için Mike Davidson bu metod için gereken dosyaları içeren bir paket hazırlamıştır. Bu metodu uygulamak için ilk olarak buradan bu paketi indirmek gerekiyor. İndirdiğimiz paketin içinde;

  • dokümantasyon
  • css
  • demo
  • flash
  • js

dokümanları var.

sIFR Nasıl Uygulanır

Bu teknik devamlı kendini geliştirmektedir, biz burada sIFR2.0.2 versiyonu üzerinden anlatacağız.

Flash

İlk olarak indirdiğimiz sIFR-2.0.2.zip doyasını açacağız ve flash do kümanı sifr.fla açacağız.

Dokümanı açtığımızda Scene1’deki gördüğümüz beyaz alana(holder Movie cilp’i) çift tıklayalım. Karşımıza yazılı olan metine dokunmamamızı isteyen bir dinamik metin alanı çıkacak(Do not remove this text.), dokunmasak iyi olur 😀

Bu dinamik metin alanı fare ile seçip alttaki Properties penceresinden istediğimiz fontumuzu(Eğer fontu gömeceksek(embed) Türkçe karakter içeren fontları seçmemiz iyi olacak.) seçiyoruz.

Eğer fontu gömeceksek, Properites ekranından Embed… butonuna tıklıyoruz. Açılan pencereden All seçip ok tıklayıp bu pencereyi kapatıyoruz. Böylelikle kullandığımız fontu flash dokümanı içine gömmüş olduk, yani kullanıcının bilgisayarında bu font olmasa bile fontu görecektir.

Sonra flash dokümanımızı kaydedelim. Flash dosyası Flash 2004 ile üretildiği için eğer Flash 2004 sonraki versiyonları kullanıyorsak bize yükseltme yapıp yapmayacağımızı soracak bizde Save deyip yükseltme yapalım.

Son olacak Flash dosyamızı yayınlayalım(publish..). Şimdi elimizde kendi oluşturduğumuz bir sifr.swf dokümanı var. İsmini değiştirebiliriz, ben fatih.swf yaptım.

HTML

Html dokümanınız açıp <head> içine aşağıdaki kodları eklememiz gerekiyor.

:::html
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

sonra bunların altına javascript dosyalarını ekleyelim.

:::html
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>

Sonra Html içeriğinin sonuna aşağıdaki kodu ekleyelim.

:::javascript
<script type="text/javascript">
//<![CDATA[ /* Replacement calls. Please see documentation for more information. */
if(typeof sIFR == "function"){ // This is the older,
	ordered syntax sIFR.replaceElement("h2", "fatih.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
}; //]]>
</script>

Bu javascript kodunda metin yerine eklenecek swf fosyasını, metnin rengini, hangi elemente(etiket, id ve sınıf) uygulanacağını, padding, link rengi gibi bir çok özelliği buradan düzenleyebiliyoruz. İndirdiğimiz dökümandaki örnek html(index.html) ve dokümantasyonu inceleyerek bu konuda daha ayrıntılı bilgi edinebilirsiniz.

CSS

sIFR-screen.css dokümanın açıyoruz.

:::css
.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -7px;
	font-size: 36px;
	margin:0;
	padding:0;
}

Burada ekleyeceğimiz fontun ayarlarını yapıyoruz. font boyutunu kendi seçtiğimiz fonta göre ayarlıyoruz. Örnek dosya üzerinden gidersek bu css dokümanında bir çok başlık tanımı mevcuttur biz burada sadece kendi kullandığımızı bırakıp diğerlerini silebiliriz.

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

Bu metodun ayrıntılı olarak anlatımı Adobe’un sitesinde [Introduction to Scalable Inman Flash Replacement (sIFR)][] isimli çok güzel bir video var, buradan tekniğin nasıl uygulandığını ayrıntısı ile görebiliriz.

Bu tekniğin dezavantajı sayfa yüklenmeden önce javascript’in yüklenmesidir. Bu sitemizin açılış hızına etki edecektir.

Not(01.05.2008 eklendi): Bazen sFIR uyguladığımız metin ikinci satıra inmiyor bunun için başlığa bir genişlik tanımlamamız gerekiyor.

:::css
h1{
	width:250px
}

[sIFR3][]’ün betası var ancak kararlı sürümü çıkmadı.

Sonuç olarak şunu söyleyebiliriz ki; Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir kodlama yaparken hangisinin bizim için daha kullanışlı olduğunu seçerek uygulamalıyız. Metin yerine resim ekleme yöntemlerini sayfamızda çok fazla yerde kullanmak pek mantıklı gelmiyor bana ama gerektiği yerde, örneğin sadece başlıklar için kullanmak gayet mantıklı. Takdir ve seçim sizin.

Kaynaklar

Float:left ve Text-align:right Atanmş Elemana Metin Yerine Resim Uygulama

Daha önce Metin Yerine Resim ekleme yöntemini anlatmıştım ve bir çok yerde örnekler ile göstermiştim. Bu yöntemin uygulandığı eleman içindeki metni ekran dışına çıkarmak için text-indent:-9999px değeri atarız.

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Burada şöyle bir sorunumuz oluyor eğer bu elemana text-align:right tanımıda atamış isek. Maalesef metin ekran dışına çıkmıyor.

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:right
}

Bu sorunu gidermek için sola dayalı sistemlerde negatif text-indent değeri veriyoruz, sağa dayalı sistemlerde de pozitif değer vererek bu durumu çözebiliyoruz. Bu çözüm yeni nesil tarayıcılarda sorun çıkarmazken İnternet Explore’da scroll çıkarmak kaydı ile sorun oluşturuyor.

h1 {
	text-indent: 9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Tüm tarayıcılarda çözüm için ise yapmamız çok kolay bir şey aslında. text-align:left tanımı atamak. Metin yerine resim koyma metodu uygulanan metinlerin hizalaması sola olmalıdır.

h1 {
	text-indent: -999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:left
}

Bu sorun ile genelde metin yerine resim metodu uygulanmış elemanını kapsayan bir elemana text-align:right uygulandığında rastlarız. Kalıtsallık ile bu özellik tüm alt elemanlarınıda etkilediği için biz bu elemana text-align:right değerini atamasak dahi elemanımız bu değeri üst elemanından kalıtsal olarak alır ve böyle bir soruna neden olur.

Categories CSS

CSS ile Önden Resim Yükleme Teknikleri

:hover display:none ile gizlenmiş öğelere atanmış ardaalan resimlerini tarayıcı yüklemiyor. Bu durum :hover haline geldiğimizde resim yüklenmeye başlar ve görüntü sonra gelir ve kötü bir görüntü oluşturur. Bu sorunu çözmek için css sprite tekniğini kullanırız. Benzer bir sorun ajax ile çalışan bir yapıda sayfa ilk yüklendiğinde yüklenmemiş alanlarda tanımlı ardalan resimleri içinde geçerlidir. Bu durumda ise resimleri ön yükleme yapmak önemlidir.

Daha önceki makalemizde bir iki yöntem anlatmıştık. http://fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/

Şimdi daha basit bir yöntemi daha bilgi dağarcığımıza ekleyelim.

Ajax ile sonradan yüklenen elemanlarımızın ardalanına atadığımız resimleri önceden yüklemek için mevcut ardalan atanmamış bir elemana bu ardalan resmini tanımlarız ve konumunuda sayfa dışına vererek(-9999px) görünmez yaparız. Böylelikle resim yüklenmiş olur ve sonradan yüklenen alanlar açıldığında görüntü problemi yaşamamış oluruz.

<div class="resimYukle"></div>

CSS kodumuzda

.resimYukle{
	background:url(/images/bg.gif) -9999px -9999px no-repeat
}

Bu durum için fazladan bir div açıp onun ardalanına bu resmi atayabiliridk ama eğer sayfa içinde ardalan tanımı olmayan bir eleman varsa bunu tanımlayarak fazladan bir divden kurtulmuş oluruz. Bir not bu kodu css kodumuzun sonuna eklememiz daha mantıklıdır.

.baskaBirEleman{
	background:url(/images/bg.gif) -9999px -9999px no-repeat
}

Benzer bir kodu :after seçicisi ve content özelliği ile de yapabiliriz.

body:after {
	content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) url(img05.png)
}

Bu kodu ie7 ve ie6 desteklemiyor maalesef.

Ayrıca CSS3 ile bir elemana birden fazla background tanımıda yapabiliyoruz bu özellik yardımı ile de yapabiliriz. Tabi tüm tarayıcılar desteklemediği için beklemek gerekiyor.

Kaynaklar