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.
Burada şöyle bir sorunumuz oluyor eğer bu elemana text-align:right
tanımıda atamış isek. Maalesef metin ekran dışına çıkmıyor.
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.
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.
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.
Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli
alanlar oluşturmak. IE hariç css ile bu yapıyı kurmak çok basittir.
Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca
IE için javascript çözümlerini ele alacağız.
border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına
yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile
birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar
kullanılıyor, buda bu özelliği önemli kılıyor.
Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli
tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı
sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz
zevkine uygun kullanmak en iyisi.
Tarayıcı Desteği
1.0+
9+
1.0+
Mobil Tarayıcılar
2.1+ (-webkit)
3.2+ (-webkit)
36+
Tek değer atanmış ise, dört köşeyede aynı değer uygulanır.
İki değer atanmış ise, ilk değer sol üst ve sağ alt köşeye; ikinci
değer sağ üst ve sol alt köşeye uygulanır.
Dört değer atanmış ise, sırası ile sol üst, sağ üst, sağ alt ve sol
alt köşelere uygulanır.
Üç değer atanmış ise, ikinci değer sağ üst ve sol alt köşeye
uygulanır.
Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 da gelecek)
Firefox 2+
Safari 3+ (kısmen)
Opera 10.50+
W3C’s CSS Level 3+
CSS Profile 3.0
Safari yüzde değerleri desteklemiyor. **
Safari/Webkit tabanlı tarayıcılar her 4 köşeye sadece bir tanımı
kabul ediyor.**
Safari/webkit tarayıcıları (/) ile ayrılan değerleri kabul etmiyor.
Bu gibi değerleri kullanmak için aşağıdaki gibi bir atama yapmalıyız.
Elips şeklinde sonuçlar elde etmke için (/) ayracı kullanılır.
CSS kodu;
Uygulama
Bugünkü durumda border-radius tanımı tek bir tanımlama olarak
atanmamaktadır, farklı tarayıcılar ön ek kullanarak bu özelliği
desteklemektedir. Webkit tabanlı tarayıcılar(Safari ve Google Chrome)
için -webkit, Gecko tabanlı(Firefox) tarayıcılar için -moz ön ekleri
kullanılmaktadır. Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım
bu durum düzelir.
Yukarıda anlattığımız tanımları maalesef İnternet Explorer
desteklememektedir, daha ön görünümü yayınlanan ie9’da desteklediğini
açıkladı.
İnternet explorer için çözüm üreten bir çok javascript kodu mevcut, ben
burada sizlere belli başlılarının linklerini vereceğim ve ufak bilgiler
vereceğim.
Bu script güzel çalışıyor. Bir çok farklı durumlar için güzel bir çözüm
üretiyor. Herhangi bir javascript kütüphanesine ihtiyacı yoktur. CSS3
border-radius özelliğini destekleyenler için bu özelliği
desteklemeyenler için ise javascript kodunu ekleyerek bize güzel bir
çözüm üretir. Köşe yumuşatması güzel
Diğer güzel çözüm önerilerinden ikiside bu scriptlerdir. Köşe
yumuşatması güzel. Background resimleri ile iyi çalışıyor, ancak CSS3
ile olan uygulamalarda sorun çıkarıyor. CSS3 border-radius destekleyen
tarayıcı kontrolü yapmıyorlar ve fazladan yüklenmeye neden oluyorlar.
Nifty Corners
Köşe yumuşatması güzel değil. Yuvarlak kenar için üretilen kodda
gereksiz bir çok eleman var. Pek önerilebilecek bir çözüm değil.
Bu çözümün en güzel yanı yuvarlak kenar için ekstra kod yazmaya gerek
olmaması. Yazdığımız border-radius değerini alıp desteklemeyen
tarayıcılara göre kod yazıyor. Script tanımını css kodu içerisinden
yapıyoruz.
Köşe yumuşatması güzeldir. 4.8 kb’lık dosya boyutu ile çok cazip boyuta
sahip.
CSS 3’ü desteklemeyen tarayıcılar için komple bir çözüm üreten bu script
İnternet Explorer için üretilen çözümlerden birisidir. Tek sorunu
bütünleşik bir çözüm sunduğu için dosya boyutunun biraz büyük olmasıdır.
Köşe yumuşaklığı güzel. CSS3’ü destekleyen tarayıcılar için css kodunu
desteklemeyen tarayıcılar için ise script kodunu uyguluyor olması güzel.
Sonuç
border-radius tanımını destekleyen tarayıcılar açısından bir sorunumuz
yoktur. Sorunumuz desteği sağlamayan ie ile dir.
Javascript ile ürettiğimiz çözümler normal tanımın yerini tutmayacaktır
hiç bir zaman. Sayfa içerisinden bir çok elemana yuvarlak kenar
uygulandığında ie için üretilen çözüm sayfanın fazladan yavaşlamasına
neden olacaktır.
Bir elemana yuvarlak kenar ve gölge uygulandığında ie için üretilen bir
çok çözümde bazı sorunlar ile karşılaşılabilir. Bu gibi durumlarda resim
ile çözüm üretmeniz tavsiye olunur.
İE için üretilen çözümler için yukarıda yazdıklarım kendi gördüklerim ve
internette araştırıp gördüklerim bilgilerden derlemedir. Bu
değerlendirmelere sizin kendi uygulamalarınızdaki sonuçlarıda ekleyerek
bir scripti seçmenizi öneririm.
Bence en güzeli eğer tercih imkanınız varsa destekleyen tarayıcılar için
kodu yazmak desteklemeyenler için olduğu gibi bırakmak (twitter.com
sitesinde olduğu gibi.)
Daha önce gözüme çarpmamış olmaması ilginç geldi. Belki çarpmıştırda ben
es geçmişimdir. Durumu şöyle açıklayayım. Basit bir menü oluşturmak
istedim.
Yatay bir menü olacağı için
eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya
çıktı.
İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil
tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri
atadım ama olmadı biraz araştırınca gördüm ki display:inline
elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında
boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.
Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü
oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan
biri
Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.