Okul yıllarına döndüm bir an. Türkçe derslerinde bir atasözü veya deyim
verip bunu cümle içerisinde kullanın diye sorular çıkardı. Normalde
kullanmadığımız veya az kullandığımız atasözü veya deyimleri biz genç
dimağlara öğretmek adına sorulurdu bu sorular.
CSS’de de benzer şekilde nadiren kullandığımız özellikler var. İşin
özüne gelelim. Ben şimdiye kadar hiç kullanmadığım Genel Kardeş
Seçicilerini kullanma imkanı buldum. Kullandığım yerde bana çok büyük
kolaylık sağladığı için sizlerle paylaşmak istedim.
Genel Kardeş Seçicileri; aynı seviyedeki elemanları yakalamak için
CSS2.1’in bize sunduğu güzel özelliklerde güzel bir özellik. ie6’nın
desteklememesi en büyük sorun idi. İnternet Explorer 6 sürümü desteğini kaldırdıktan sonra bu seçiciyi rahat rahat kullanabiliyoruz artık.
Karşıma çıkan iş ve Genel Kardeş Seçicisinin bana sağladığı kolaylık.
Şeklinde bir liste veya menümüz var. Burada her üç öğenin olduğu
durumlarda var, sadece bir tanenin olduğu durumlarda. Tek bir eleman
olduğunda aradaki çizgi yok. İki veya daha fazla eleman olduğunda iki
eleman arasında bir çizgi konuyor.
Tam bu noktada Genel Kardeş Seçicileri devreye giriyor.
Tanımı tüm dertlerimize son veriyor. Eğer tek eleman varsa bu seçici es
geçiliyor. Ama iki veya daha fazla eleman var ise bu seçici devreye
giri”“yor ve ilk eleman hariç tüm elemanların üstünü çiziyor ve
mesafeleri ayarlıyor.
Daha önceleri javascript veya dinamik bir dil ile çözüm ürettiğimiz bu
durum için CSS ile çözüm bulmak süper bir duygu.
Aynı sorunu first-child ile çözebileceğim aklıma geldi akşam bir an.
Tabi iki satır kod bloğu oluyor. Minimum kod ile çözmek istersek Genel
Kardeş Seçicilerini tercih edeceğiz. :D
İkonlar web aleminde kendi iyi bir yer bulmuş öğelerdir. Şimdiye kadar
ikonları html sayfalarına resimler ile ekledik. İlk başta tek tek
eklerken daha sonra css sprite metodu ile tek resim dosyası içine tüm
ikonları ekleyip background-position yardımı ile kullandık. Bu
yöntemlerin kendice avantajları olduğu kadar resim işleme ve düzenleme
işlemleri bakımından her zaman bir sıkıntısı mevcut.
CSS3 ile birlikte gelen font-face özelliği yardımı ile istediğimiz yazı
tiplerini kullanıcının bilgisayarına yükleyebiliyoruz artık. Yazı
tipleri yazı karakterleri içerdiği gibi ikonlarıda içerebildiğini
biliyoruz. dingbat yazı tipleri, sıklıkla kullandığımız bilinen
fontların aksine harflerden ziyade simgelerden oluşan fontlara
denilmektedir. Bunun en bilinen örneği ücretsiz Wingdings yazı tipidir.
Benzer şekilde ikonlarımızı bir yazı tipi dosyası haline getirip
sitelerimizde kullanabilme imkanımız var. Tabi birçok ücretsiz şekilli
yazı tipi bulabiliriz internetten.
Burada sizlere bu yöntemi anlatmayı planlıyorum. Artılarından ve
eksilerinide bahsedip son kararı sizin vermenizi isteyeceğim.
font-face kullanımını anlattığım makalemi okuyarak yazıları sitelere
nasıl gömdüğümüzü öğrenebilirsiniz.
şeklinde genel kullanımı göstermiştik. Benzer bir şekilde bir şekilli
yazı tipi ekleyip ikon ekleyebiliriz.
[http://webloti.org/20-modern-fontface-icon-seti/][] ve benzeri sitelerden ücretsiz web ikonlarını alalım.
kodu ile yazı tipini sayfamızda çağırmış olduk. Menü elemanlarının her
biri için seçtiğimiz ikonları atamak için ilgili elemanın
öncesine(:before) yazı tipinde ilgili ikonu ifade eden harfi ekliyoruz.
Alışveriş için seçtiğimiz sepet ikonun “i” harfi ile ifade edildiği için “i” harfini ekledik. Kodu biraz daha düzenli yazarsak.
Bir veya daha fazla ikon için tüm yazı tiplerini eklemek performans
açısından mantıklı değil. Yüksek yazı tipi dosya boyutları.
Çok renk seçimine olanak sağlamaması.
Yeni Türk Lirası ikonunu eklemek
Benzer bir şekilde yeni yayınlanan Türk Lirasınıda font-face yardımı ile
ekleyebiliriz. TC Merkez bankasının yayınladığı yazı tipi olan
AbakuTLSymSansRegular siteye ekleyerek kolay bir şekilde yeni Türk
Lirası sembolünü web sitelerimize ekleyebiliriz.
Yazı tipinde sadece tl sembolünü kullanacağımız için diğer karakterleri
silip sadece ikonu bırakarak yazı tipi dosya boyutunu küçültebiliriz.
CSS kenar çizgileri kullanımı bir çoğumuz için çok basit bir iştir.
Ancak yanına bir çizgi daha konduğu zaman kara kara düşünürüz ne
yapalımda bu işin altında kalkalım diye. Resim kullanırız genelde sorunu
halletmek için.
Burada basit bir yol ile bu işi nasıl yapacağımızı anlatacağım.
Çoklu kenar çizgisi uygulanacak eleman relative konumlandırılmalı ve
padding değeri uygulanacak ikinci kenar çizgisi dikkate alınarak
atanmalıdır.
Sözde elemanlar ile ikinci kenar çizgisini ekleyelim. z-index eksi değer
vererek içeriğin arkasına atarız.
Bu örnekte sadece iki kenar çizgisi için kod verildi, ancak yine sadece
:before ve background-color ile üç kenar çizgisi ve hatta :before,
background-color ve :after ile 4 ve daha fazla kenar çizgisi
ekleyebiliyoruz.
Tek kenara çoklu çizgi genelde lazım olan bir kod olduğu için burada
onuda paylaşıyorum.
Burada önemli nokta ie7’nin :before ve :after desteğinin olmaması.
Kullanım yüzdesi %6,46 olduğu göz önüne alınırsa göz ardı edilebilir.
border-radius uygulanmış elemanlara bu metot kullanılabilir.
outline ile iki kenar çizgisi oluşturmak
İki kenar çizgisi oluşturmak için outline kullanılabilir.
İkiden fazla kenar çigisi kullanamasakta iyi bir alternatif olarak
kullanılabilir.
Tarayıcı Desteği
4.0+ (-webkit)
8+
3.5+ (-moz)
Mobil Tarayıcılar
2.1+ (-webkit)
3.2+ (-webkit)
36+
ie7 yine sorun
box-shadow ile çoklu kenar çizgisi oluşturmak
Çoklu gölge kullanımı ile birdne fazla kenar çizgiside ekleyebiliriz.
Tarayıcı Desteği
4.0+ (-webkit)
9+
3.5+ (-moz)
Mobil Tarayıcılar
2.1+ (-webkit)
3.2+ (-webkit)
36+
Burada destek konusundn daha büyük bir sorunumuz var ie7’in yanında
box-shadow özelliğini ie8’de desteklemiyor.
Sonuç
Çoklu kenar çizgisi uygulamada yukarıda anlattığımız yöntemler çözüm
olarak eterli bence. ancak ie6 ve ie7 desteği için ne yapacağız diye
düşünüyorsanız eski fazladan katman ekleme ile veya resim kullanrak
çözme yoluna gidilebilir. Benim düşünceme göre ie7 gözden çıkarılabilir
ve :before veya outline yöntemi kullanılabilir.