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.

HTML dökümanının içine yeniden HTML ekleme

HTML sayfalarına CSS, Javascript, resim video, ses vd. dosyaları ekleyebilirken diğer html dosyalarını eklemek için iframe, ajax isteği ile veya çakma script dosyası gibi gösterilmiş html dosyaları ile ekleyerek yapıyorduk/yapıyoruz. HTML import ile artık html dosyalarımızı html içine ekleyebileceğiz.

HTML kodlama yapımızı değiştirecek bu yapıyı henüz sadece Chrome ve Chrome alt yapısını kullanan tarayıcılar(Opera ve Chrome mobil) destekliyor.

HTML içine HTML’i eklerken normal CSS ve Javascript ekler gibi ekliyoruz. Bir iki farklı yanı var. İlk fark rel=”import” kısmı. İkinci fark ise direk HTML içine eklenmiyor içerik. Bu kod ile tarayıcı yüklüyor, sahne arkasında saklanarak kulanıma hazır hale geliyor. Biz kullanmak istediğimizde javascript ile bu içeriği ekliyoruz.

Kullanımı;

<head>
  <link rel="import" href="/sablonlar/ekmek.html">
</head>

Önemli bir not: Bu yöntem ile aynı domain altındaki dosyaları ekleyebiliyoruz. Farklı domain’den çağıralacak dosyalar için CORS özelliğinin açılması gerekmektedir.

Daha sonra işin içine javascript giriyor.

<link rel="import" id="sablon" href="ekmek.html">

İlk olarak javascript ile daha kolay erişmek için import koduna bir id=”sablon” ekleyelim. Daha sonra ayrı html dosyası oluşturalım mevcut HTML’in içine ekleyeceğimiz.

ekmek.html;

<section id="icerik">Ekmke 1 TL</section>

Mevcut HTML’in body kısmında javascript ile import elemanını yakalayalım.

var ekmekAl = document.querySelector('#sablon');

Sonra içe aktracağımız HTML’in içindeki elemanı yakalayalım.

var ekmekIci = ekmekAl.import.querySelector('#icerik');

Son olarakta aldığımız bu içeriği mevcut HTML içine ekleyelim.

document.body.appendChild(document.importNode(ekmekIci, true));

Sonuç aşağıdaki ekran görüntüsündeki gibi olacaktır.

HTML import

Örnek bir dokümanı oluşturup, kendi bilgisayarınızda açtığınızda yukarıdaki sonucu göremeyeceksiniz. Görmek için bir Server’a ihtiyacınız olacak. Örneğin http://localhost gibi bir urlde erişmeniz gerekecek.

Eklenen html dosyası CSS ve Javascript dosyaları gibi mevcut HTML’in yüklenmesini bloklayacaktır. Bunu engellemek için async özniteğini eklemek yeterlidir.

<link rel="import" id="sablon" href="ekmek.html" async>

Desteklemeyen tarayıcılar için

Bu özelliği başta belirttiğim gibi sadece Chrome tabanlı tarayıcılar desteklemektedir. Peki desteklemeyenler için bir çözüm yokmudur derseniz. İlk olarak bu özelliği taracının destekleyip desteklemediğini kontrol etmek için

if ('import' in document.createElement('link')) {
    // HTML imports destekleniyor
} else {
    // HTML imports desteklenmiyor.
}

böyle bir javascript kodu var. Ayrıca Polymer grubunun ürettiği HTMLImports adlı bir çözüm var.

Sonuç

Sonuç olarak güzel bir özellik ama bazı sorunlarıda beraberinde getiriyor. Örneğin sonradan javascript yardımı ile eklenen html arama motorlarının tarama alanı dışana çıkması sorunu oluşturacaktır. Google’un javascriptleri yorumlayacağı durumda bu sorun olmaktan çıkacak gibi. Ama henüz erken.

Bir çok alanda kullanılabilecek güzel bir yapı. Benim ilk duyduğumda sadece html ile yapılan bir yapı olduğunu düşünmüştüm. Sonra işin içine javascript girdiğini öğrendiğimde biraz soğudum, ama buda iyidir. Sadece html ile yapmak daha güzel olurdu.

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

Safari’de jquery attr() metodunun çalışmama sorunu

iPhone’da yazdığım bir kodun çalışmadığını gördüm. Aşağıdakine benzer bir selectbox‘ın ilgili option‘ununu seçmek için kullandığım bir kod parçası.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).attr('selected', true)

Sorunun çözümü her zaman ki gibi stackoverflow‘da

attr özelliği Safari’de çalışmıyor. Onun yerine jquery 1.6’dan sonra gelen prop özelliğini kullanmak gerekiyor.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).prop('selected', true)

Aklınızın bir köşesinde kalsın.

Kaynak

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

Jquery-ui’ın bower ile yüklenmesi

enter image description here

jquery’nin gelişmiş arayüz elemanları kütüphanesi jquery-ui yüksek boyutuna rağmen tercih edilen bir kütüphanedir. Ben yüksek boyutundan dolayı kullanmasam da bazen ihtiyacımı en iyi gören kütüphane olduğunda tercih ederim.

Kullanacağımız arayüz elemanına özel Jquery-ui’ı indirebiliyoruz. jQuery-ui indirme sayfasında gerekli elemanları seçip indir dediğimizde jquery-ui çekirdek kodu ve kullanılan elmanların javascriptlerini bize sunuyor. Buraya kadar her şey güzel.

Bu makaleyi yazmama sebep olan durum ise yeni arayüz geliştirme ortamlarında yoğun olarak kullanılan bower ile jquery-ui’ın kullanım kısmı. Tüm kütüphaneyi ekleyeceksek kolay.

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script>
    $( "#projects" ).accordion();
</script>

adresini kodunuzun ilgili kısmına eklemeniz yeterli.

jquery-ui’ın tüm elemanlarını değilde sadece bir veya iki tanesini kullanmak istediğimizde ne yapmalıyız? Klasik yöntemde indirme sayfasında ilgili elemanları seçip indir dememiz yeterli.

Peki bower ile eklerken nasıl oluyor?

Mesela sadece sıralama işi için kullanacağımız dosyaları yüklemek istediğimizde ne yapmalıyız.

Aşağıdaki gibi bir yol izlemek gerekiyor çözüm için.

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
    $( "#projects" ).accordion();
</script>

İstediğiniz elemanı eklerken hangi çekirdek koda ihtiyacımız olduğunu nasıl anlayacağız.

bower_components/jquery-ui/ui/ klasörü içindeki eklemek istediğiniz elemanın ilgili dosyasını açın. Örneğin sıralama ( sorting ) için sortable.js

(function( factory ) {
if ( typeof define === "function" && define.amd ) {

	// AMD. Register as an anonymous module.
	define([
			"jquery",
			"./core",
			"./mouse",
			"./widget"
		], factory );
....

Yukarıdaki kod kısmında ihtiyacı olan çekirdek eleman listesi var. Bunu kullanacağız.

Aynı şekilde tüm elemanlara uygulanabilir.

Kaynak