‘ie6’ etiketi için sonuçlar

Dış Hat Çizgilerini(outline) Kaldırmak

Haziran 24th, 2009 • Comments CSS
Etiketler: , , , , , , ,

Ben bu konuyu aslında dış hat çizgilerini kaldırmak olarak adlandıracaktım. Sonra bu konudan kitapta bahsettiğim halde sitemde bahsetmediğimi fark ettim ve dış hat çizgisi özellikleri adlı bir önceki makaleyi yazdım. Sonra da bu makaleye geçtim. Ancak biraz araştırınca, aslında dış hat çizgilerini kaldırmayı savunanlar ve karşı çıkanlar diye iki grup var. Kaldıralım diyenler ne için kaldıralım diyor kaldırmayalım diyenler ne için kaldırmayalım diyorlar inceleyip göreceğiz. Bir ara yol bulabilirmiyiz?

Kaldıralım  diyenler.

Kaldıralım diyenler genelde dış hat çizgilerinin oluşturduğu kesikli gri çizgiden rahatsız olanlar. Bunda en çok son zamanlarda gelişen metin yerine resim koyma metotlarınında etkisi var. Aşağıda benimde kullandığım metin yerine resim koyma metodunu kullanarak yaptığım örnekler.

text-indent:-9999px  ile görünmez yaptığımız metinleri outline ile görünür hale getirdiğimizde pek hoş görüntüler ile karşılaşmayız.

outline çizgileri

Firefoxda böyle bir sorun var iken ie ve google chrome’da sadece elemanın çevreleyen bir çizgi görünmektedir. Opera ve Safari’de ise tab ile sadece sayfa içindeki form elemanlarında gezebiliyoruz.

Bana burada kötü görünen metin yerine resim kullandığımız menü elemanlarını seçince sola doğru uzayarak çıkan kesikli çizgi yoksa ie ve chrome daki gibi elemanı saran kesikli çizgi bence kötü görünmüyor. Firefox’daki bu sorunu çözmek için bir kod var.

a{visibility:hidden}

tanımı ie ve chrome gibi göstermesini sağlıyor.

outline çizgi düzeltme

Bide bu çizgileri hiç görmek istemeyenler var. Bunu engellemenin en kolay yolu outline:none veya outline:0 tanımlarıdır.

a{outline:none}

Bu tanım bir çok css sıfırlama tekniğinde yer almaktadır. Örneğin Eric Meyer‘in sıfırlama tekniğinde. Bu yöntem bir çok yerde çözüm olarak sunulmaktadır. Kaynaklar kısmındaki linkler bunlardan bir kaçı.

Kaldırmayalım diyenler

Kaldırmayalım diyenlerde bu özelliğin erişebilirliği arttırmak için çıkarıldığını ve sadece klavyesini kullanan kullanıcılar için elzem bir özellik olduğunu belirtmektir. Eğer sitelerimizi erişebilir yapacaksak ve bunun için mesai harcayacak isek. Bu özelliği sıfırlamak mantıklı olmayacaktır.

Örneğin cnnturk.com sitesine Firefox ile girince sadece klavye kullanarak siteyi gezmeye çalışın. Bu sizi zorlayacaktır, çünkü tab’a her bastığımızda nerede olduğumuzu kestirmekte zorlanıyoruz. Burada tek yardımcımız alttaki tarayıcı çubuğunda her tab tuşuna bastığımızda bağlantıdan bağlantıya geçişlerde durum çubuğunda bağlantıların gösterilmesidir.

a {color: #004276; text-decoration: none; outline: none; }

tanımı nedeni ile dış hat çizgileri bize yardımcı olmayacaktır. 

Şimdi webaim.org/ adresine girince klavyeden siteyi gezin. Bu sitede outline değeri standart bırakılmış ve ayrıca odaklanmalar için ayrı bir tanım yapılmıştır. 

a:active, a:focus, a:hover {
    background-color:#FFFFCC;
    color:#BF1722;
    text-decoration:underline;
}

Tanımları yardımı ile odaklanılan bağlantılar daha belirgin hale getirilmiştir. Böylece klavyesi ile siteyi gezmeye çalışan insanlara rahatlık sağlanmış olur.

Biz zaten klavye ile dolaşamıyoruz, faremizle takılıyoruz. Evet bir çok insan web sitelerini gezerken klavye kullanmıyor olabilir, ama bazen fare kullanan insanlar bile kısayol için klavye kullanıyor ve erişebilirlik için sadece klavye kullanan insanları göz ardı edemeyiz. Ayrıca web2.0 ile İnternet ortamına taşınan programlarda(google reader, google dokümanlar vb.) klavye kısa yollarından yararlanılmaktadır. Web mecrasında ileride daha etkin bir klavye kullanım oranlarına ulaşabiliriz. 

Sonuç

Sonuçta her iki görüşü savunanlar için bir çözüm üretmeye çalışırsak;

http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/ makalesinde anlattığımı örnek üzerinden devam edelim. 

yukarı görüldüğü gibi bir  sonuç çıkıyor. Kare olan menülerde o kadar kötü görünmüyor, ama buradaki gibi oval köşeli olunca outlinr çizgileri daha kötü bir görüntüye neden oluyor.

Çözüm önerimiz şu outline’ı kaldıralım, ama klavye kullanan kişiler içinde bir çözüm üretelim. Farenin üzerine geldiği hali(:hover) klavyenin tab’ı ile geldiğinde de uygulayalım. outline’ı kaldıralım tabi.

a.anasayfayaDon {
    display: block;
    width: 80px;
    height: 80px;
    background: url(images/degisen_resim.gif) 0 0 no-repeat;
    text-decoration: none;
    text-indent:-999px;
}
a:hover.anasayfayaDon, a:focus.anasayfayaDon {
    background-position: -80px 0;
    outline:none;
}

Şeklinde görünecektir. Bu görüntüyü Firefox, Google Chrome ve ie8′de aldım.

:focus desteği olmayan ie6 ve 7′de ise onun yerine :active sözde sınıfını kullanacağız. Buna rağmen olmayacaktır. outline özelliklerini desteklemeyen ie 6 ve ie7′de ise hala outline kesikli çizgilerinin görülmesi ilginç.  Bunun içinde şöyle bir çözüm yolu var. 

a:hover.anasayfayaDon, a:focus.anasayfayaDon, a:active.anasayfayaDon {
    background-position: -80px 0;
    outline:expression(hideFocus='true'); outline:none;
}

expression özelliğini sadece ie destekliyor. Daha önce bahsetmiştik. Bu bir bakıma css içinde javascript çalıştırmak gibi bir şeydir. Bu kod sonunda örneğimiz ie de de çalışacaktır.

Örnek çalışmayı görmek için tıklayınız.

Örnek IE 6, IE7, IE8, FF 3, Google Chrome 2′de test edilmiştir.

Kaynaklar

Firefox’un Negatif Değerli z-index Desteği

Haziran 17th, 2009 • Comments CSS
Etiketler: , , , , ,

Geçen bir projede z-index ile ilgili bir tanım yaptım. Üçlü bir tanımdı sırası ile elemanlara z-index:100, z-index:50 ve z-index:0 değerleri atadım. Aslında 1, 2, 3 diyede tanımlama yapabilirdim, ama araya başka bir eleman girerse diye böyle aralıklı değerler verdim.

Firefox, IE 8, Opera ve Google Chrome’da sorunsuz çalışan kod, IE 6 ve 7′de  çalışmadı. Bende daha önce böyle bir sorun ile karşılaşmıştım. Çözüm için z-index:-1 tanımı yapıp çözmeye çalışmıştım, ama bu seferde Firefox 2′da çalışmamıştı o zaman. Firefox 2′de negatif değleri desteklemediğini öğrenmiştim o zaman. Bende bunu için bir düzeltme yazmıştım zamanında. Ama Firefox 3 ile birlikte z-index negatif değer desteği geldiği için şimdi bu sorunu çözülmüş oldu. Bir bilgi olarak bunu bilmek gerek diye düşündüm.

Sonra acaba Firefox 2 için bir düzeltme yazmaya gerek var mı diye düşündüm. Ancak Firefox çok hızlı güncellenen bir tarayıcı ve şu an Firefox 2 kullanımı %5′lerin altına düşmüş durumda bir düzeltme yazmaya gerek yok diye düşünüyorum. 

Sonuç olarak şunu söyleyebiliriz ki, gönül rahatlığı ile negatif z-index tanımı kullanabiliriz.

Kaynaklar

CSS ile Ziyaret Edilen Sayfa Bağlantılarına Şekil Vermek

Haziran 15th, 2009 • Comments CSS, Web Standartları
Etiketler: , , , , , ,

Sözde sınıf ve elementler makalesinde değindiğim bir konu idi bu. Ancak genelde bu özelliği tasarımcılar ve kod yazarları atlıyor. Şimdiye kadar ki hiç bir projemde kullanma gereği duymadım açıkçası. Ama bence kullanılabilirlik açısından önemli bir özellik. Bundan sonraki projelerimde kullanmayı düşünüyorum.

http://www.evalotta.net/ sitedeki uygulamayı görünce çok hoş bir şey olduğu aklıma geldi. Bende bu konuda bir şeyler yazmalıyım diye not ettim. Nasip bu güneymiş.

İnternet tarayıcıları daha önce ziyaret ettiğimiz sayfa bağlantılarını ön belleğinde tutar. Biz ön belleği silmediğimiz müddetçe hafızasında kalır. CSS bize daha önce ziyaret ettiğimiz sayfa bağlantılarının stilini değiştirme imkanı sunar, böylece kullanıcıya sen burayı daha önce ziyaret etmiştin bilgisini verebiliriz. İnternet tarayıcıları ziyaret edilmiş bağlantılara kendileri standart bir stil atarlar. Mesela Firefox altını çizili ve mor renkli yapıyor.

stadart_ff

Tarayıcılar bize bu ayrımı gösterir, tabi biz bağlantı tanımları değiştirmediğimiz müddetçe. Biz bağlantıya genel tanım yaptığımızda bu özellik bir bakıma göz ardı edilecektir. Bir çok projede bu tanımlamayı yazpıyoruz.

a{color:#f00;}

genel_bag_renk

Yukarıdaki tanımlama tüm bağlantı tipleri için genel bir tanımdır ve ziyaret edilmiş sayfa stilinide belirler.

Bizim amacımız ziyaret edilmiş bağlantıları farklı stil ile belirterek ayrımı göstermek. Bir çok yerde  yazı üstünü çizerek belirlenir.

a:visited { text-decoration: line-through; }

ziy_sayfa_uzeri_ciz

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

Diğer bir yöntemde ardalan resmi koymak. Bu yöntem ile hoş bir görüntüde sağlamış oluyoruz. http://www.evalotta.net/ sitesi buna çok güzel bir örnek.

a:visited {
    padding-right:20px;
    background:url(images/ziyaret_edilmis_baglanti.gif) right top no-repeat;
    color:#666;
    text-decoration:none;
}

ziy_sayfa_oki

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

Benzer yöntemlerle birçok alternatif oluşturulabilir. Ayrıca :before ve :after ile oluşturulan örnekler var ama hala ie6 hayatta olduğu için ve :before ve :after özelliklerini desteklemediği için pek kullanma taraftarı değilim.

Kaynak

Internet Explorer 6 olmasa hayat daha kolay ve zevkli olurdu

Eylül 10th, 2008 • Comments CSS, Javascript, Web Standartları, XHTML
Etiketler: , ,

Web kod yazarlarını en çok zorlayan konulardan biri farklı tarayıcılara uyumlu kod yazmaktır. Birinin düzgün yorumladığını diğer farklı yorumlar ve bizim için arayış ve çile başlar, çözünce geçici bir sevinç yaşarız genelde. Farklı tarayıcılara göre kod yazmak bu iş için devamlı bir sorun olarak kalacağını düşünüyorum. Peki bu durumu nasıl aşacağız derseniz, yaşadığım süreçlerden size şunu söyliyebilirimki zamanla aynı hataları aldığımız için çözümü fazla zaman almıyor. Azda olsa farklı hatalarla karşılaşıyoruz, bunlarıda arayıp çözüyoruz. 

Web kod yazarları her zaman bir tarayıcı ile uğraşır. Vakti zamanında Netscape Navigator 4, Internet Explorer 5, Internet Explorer 5.5 uğraştık. Şimdide ve son olarakta Internet Explorer 6 ile uğraşıyoruz. 27 Ağustos’ta Internet Explorer 6 7.senesini doldurdu.

Ama asıl sorun standart dışı tarayıcılar için ürettiğimiz fazla kodlar. İşte burada Internet Explorer 6 sorun olmaya başlıyor.

Okumaya devam edin »

09 Eylül 2008 web’den seçme haberler

Eylül 9th, 2008 • Comments Haberler
Etiketler: , , , , , , , ,

  • Özel form elemanları tasarlamak. Bağlantı
  • Google Chrome ipuçları. Bağlantı
  • Google Chrome javascript hata konsolu kodları. Bağlantı
  • WordPress temasını geliştirmek ve yenilemek Bağlantı
  • WordPress Kurulumu Sonrası Yapılacaklar Listesi – webdeneyimleri.donanimhaber.com Bağlantı
  • WordPress sitenizde silmeniz gerek 13 kod. Bağlantı
  • gameQuery ile oyun kodlamak. jQuery alt yapısını kullana gameQuery bize oyun kodlamak için kolaylıklar sağlıyor Bağlantı
  • Şehriderya Wordpress Teması Huzurlarınızda… – sehriderya.net Bağlantı
  • Web tasarımcıları için posterler. Bağlantı
  • jQuery öğrenmeye başlamak için. Bağlantı
  • Internet Explorer 6 bloklamak için. Bağlantı
  • İnternet Tarayıcıları savaşı 2.0 Bağlantı
  • eBurhan Fix Feed v1.1 yayınlandı… – eburhan.com Bağlantı
  • Internet Explorer 8′deki CSS gelişmeleri. Bağlantı
  • Google Chrome’un bilinmeyen yanları. Bağlantı
  • SmashingMagazine’den güzel bir WordPress teması daha Agregado. Bağlantı
  • 12 adet WordPress RSS eklentisi. Bağlantı

1 Haftalık web’den seçme haberler – I

Temmuz 15th, 2008 • Comments Haberler
Etiketler: , , , , , , ,

  • FireBug hakkında güzel bir makale. Bağlantı
  • jquery ile tarayıcı üstü mesaj koymak. Bağlantı
  • web kodlayıcıları için posterler. Bağlantı
  • En iyi 10 CSS düğme kodlaması. Bağlantı
  • 20′den fazla güzel css uygulaması. Bağlantı
  • id ve sınıf arasındaki farklar. Bağlantı
  • CSS’e başlamak için 20 adet makale. Bağlantı
  • 37signals 15 Ağustos itibari ile yaptığı sitelerde ie6 testinden geçirmeyecekmiş. Güzel bir fikir. Bağlantı
  • jQuery ile hızlı arama. Bağlantı
  • jquery ile yapılmış güzel bir mesaj eklentisi. Bağlantı
  • Web site ardalan resimleri. Bağlantı
  • Asp.net 3 aşamalı kod yazma tekniği. Bağlantı
  • IE6 için PNG düzenlemesi, alternatif bir script uygulaması. Bağlantı
  • WordPress 2.6 sürüm yayınlandı. Bağlantı
  • “Digg Yeni Tavsiye Sistemi” – m3hmet.com Bağlantı
  • “IE 8: Virüslere karşı SmartScreen-Filter” – chip.com.tr Bağlantı

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.