‘Firefox 3’ etiketi için sonuçlar
Dış Hat Çizgilerini(outline) Kaldırmak
Haziran 24th, 2009 • 4 yorum CSS
Etiketler: dış-hat-çizgisi, Firefox 3, ie6, ie7, ie8, klav, klavye-kullanmak, outline
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.
- http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/
- http://www.fatihhayrioglu.com/css-ile-menu-olusturmak-v-resimli-menuler/
- http://www.fatihhayrioglu.com/dokumanlar/basit_resimli_menu.html
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.
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.
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
- http://css-tricks.com/removing-the-dotted-outline/
- http://snipplr.com/view/15704/eliminating-the-dotted-line-box-that-appears-around-a-link/
- http://webaim.org/blog/plague-of-outline-0/(kaldırılmamalı)
- http://www.elctech.com/snippets/css-remove-dotted-outline-border-from-active-links
- http://sackclothstudios.com/css/outline-the-neglected-css-property
- http://arjaneising.nl/css/dont-remove-the-outline-from-links (kaldırılmamalı)
- http://www.karlrixon.co.uk/articles/css/remove-button-focus-outline-using-css/
- http://www.456bereastreet.com/archive/200905/do_not_remove_the_outline_from_links_and_form_controls/ (kaldırılmamalı)
- http://jlaine.net/2007/1/23/hidden-css-stuff-the-outline-property
- http://sonspring.com/journal/removing-dotted-links
- http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
- http://www.maratz.com/blog/archives/2006/01/20/outline-property-for-image-replaced-link/
- http://diveintomark.org/archives/2006/04/25/new-focus-indicator (odaklanmayı arttıran firefox eklentisi)
- http://accessites.org/site/2007/05/keyboard-friendly-link-focus/
FireBug 1.2 ve yenilikleri
Eylül 16th, 2008 • 6 yorum CSS, Haberler, Javascript, XHTML
Etiketler: CSS, firebug, Firefox 3, Hata yakalama, Javascript, XHTML
Daha önce FireBug’ın genel özelliklerinden bahsettik. Sıra FreiBug ile CSS ve Xhtml yazmaya gelmişti ki yeni sürüm çıkınca bu makaleyi yazma ihtiyacı duydum.
Web kod yazarları için büyük kolaylık sağlayan FireBug’ın yeni sürüm çıktı ama kimseden ses çıkmadı. Belkide Google Chrome duyurusunun altında ezildi. Ama Google Chrome’un benim için en büyük dezavantajı FireBug gibi gelişmiş bir CSS ve XHTML aracının olmamasıdır. Aslında ben bile geç kaldım, çünkü ben yazana kadar 1.2.1 sürüm çıktı.
FireBug’ın yeni sürümünde daha çok hata düzeltme, güvenlik düzeltmeleri ve kararlı hale getirme işlemleri göze çarpıyor.
Göze çarpan özellikleri incelersek; Okumaya devam edin »
27 Ağustos – 2 Eylül web’den seçme haberler
Eylül 2nd, 2008 • 1 yorum Haberler
Etiketler: CSS, firebug, Firefox 3, hr, Javascript, jQuery plugin, safari, WordPress
- Javascript ile resim bilgilerini elde etmek. Bağlantı
- Web uygulamalarını hızlandırmak için çözüm yolları. Bağlantı
- FireBug 1.2 sürümü yani Firefox 3 içi olanı kararlı sürümü yayınlanmak üzereymiş. Bağlantı
- 11 WordPress uygulaması ipucu. Bağlantı
- CSS ile nasıl gölgeli menü yapılır. Bağlantı
- 10 ünlü CSS geliştiricisinden CSS teknikleri. Bağlantı
- 40 adet CSS sayfa planlama tekniği bağlantısı. Bağlantı
- Fireox 3 ile birlikte gelen CSS destekleri. Bağlantı
- CSS ve javascript ile yapılmış güzel bir garaj kapısı efektli menü örneği. Bağlantı
- Safari 4 Geliyor (2): 40A12 – macosxpc.com Bağlantı
- 10 adet jQuery plugini. Bağlantı
- 30 ücretsiz yüksek kaliteli WordPress teması. Bağlantı
- Firefox javascript okuma motorunu yeniliyor. Daha hızlı bir Firefox 3.1 kullanacağız. Bağlantı
- hr kullanımı ve örnekleri. Bağlantı
- Mutant Web Uygulamalari – azer.r92.org Bağlantı
- Siteme son zamanlarda çok fazla gereksiz yorum ve geriizleme geliyor. Akismet’i kurdum. İnşallah sorunları gideririz.
04 Temmuz 2008 web’den seçme haberler
Temmuz 4th, 2008 • 3 yorum Haberler
Etiketler: Alan adı, etiket, Firefox 3, İkon, İnternet Tarayıcısı, Javascript, Tatil, WordPress, wordpress güvenlik
- CSS Firefox 3 filtresi. Bağlantı
- Alan Adları Değişiyor – perfectgate.net Bağlantı
- Bırakın yazılarınızı okurlarınız etiketlesin – blog.wolkanca.com Bağlantı
- İnternet Tarayıcıları ve web geliştirici araçları hakkında güzel bir inceleme. Bağlantı
- Volkan Görgülü yeni bir stei açmış, XHTML ve CSS hakkında ilk konusu “CSS Sprite Tekniği” Bağlantı
- Firefox 3 rekoru kırabildi mi? – cnetturkiye.com Bağlantı
- Uygulamalarımızda kullanabileceğimiz 15 CSS + XHTML uygulaması. Bağlantı
- Firefox3 en çok indirilen program olarak Guinness rekorlar kitabına girmiş. Bağlantı
- 55 adet iyi kalitede ikon setleri. Bağlantı
- 600 Milyondan Fazla Web Kullanıcısı Risk Altında – turk.internet.com Bağlantı
- Javascript ile sayfa adresindeki bilgileri almak. Bağlantı
- WordPress eski sürümleri hackleniyor. Bir çok arkadaşımın ve benimde karşılaştığım bir sorun. Güncellemeleri hemen yapmak lazım Bağlantı
- Tasarımlarınızı Fiyatlandırma – hasanyalcin.com Bağlantı
- Son haberde benden 1 hafta kadar izine çıkacağım. Dönüşte görüşmek dileğiyle. Hoşçakalın.
25 Haziran 2008 web’den seçme haberler
Haziran 25th, 2008 • 6 yorum Haberler
Etiketler: ağaç menü, akordiyon, css editörleri, farklı tarayıcılara göre kod yazmak, Firefox 3, içiiçe açılır menü, jquery, web site hızı
- Firefox 3 hakkında gelişmiş ipuçları. Bağlantı
- Farklı tarayıcılara göre kod yazarken dikkate alacağımız ipuçları. Bağlantı
- SmashingMagazine.com CSS editörleri hakkında güzel bir bilgi derlemesi yapmış. Bağlantı
- Adım adım PSD’den HTML sayfa kodlama. Bağlantı
- jQuery ağaç menü örnekleri. Bağlantı
- jQuery içiçe iki açılır menü. Bağlantı
- Web sitelerinin hızını ölçen güzel bir eklenti. Firebug’a ek olan bu eklenti bize site hızı hakkında ayrıntılı bilgi veriyor. Bağlantı
- Apple sitesindekine benzer akordiyon menü örneği. Bağlantı
- Firefox 3′ün desteklediği CSS özellikleri hakkında ayrıntılı bir makale. Bağlantı
- 25 adet Minimalistik site örneği. Bağlantı
- Firfox3′ün yeni renk profil desteği. Renkler daha canlı. Bağlantı
19 Haziran 2008 web’den seçeme haberler
Haziran 19th, 2008 • 3 yorum Haberler
Etiketler: CSS takvim, Firefox 3, Firefox Eklentileri, Glubble, jQuery UI, safari, Site Kapatma, Vista Aero düğme, WordPress
- CSS ile Vista Aero düğmelerine benzer düğme oluşturmak Bağlantı
- Web kod yazarları için 40 adet Firefox eklentisi. Bağlantı
- 40 adet WordPress uygulması ve ipucu. Bağlantı
- Firefox’un gelişim süreci ekran görüntüleriyle. Bağlantı
- jQuery IU 1.5 ile birlikte gelen ThemaRoller anlatan güzel bir video. Bağlantı
- Web tasarımcılarının izlemesi gereken 12 süper site. Bağlantı
- Safari’nin metin yorumlamasını normale çevirmek. Bağlantı
- En çok aranan Wordpress ipuçları – dmry.net Bağlantı
- Güzel bir animasyonlu(gif) menü örneği. Bağlantı
- Aria slider örnekleri. Kullanışlı örnekler. Bağlantı
- Firefox Ebeveyn Eklentisi : Glubble – nucro.org Bağlantı
- Liste etiketi ile yapılmış takvim uygulaması. Bağlantı
- Firefox3 1 günde 8.3 milyon kişi tarafından indirilmiş. Bağlantı
- Site Kapatmaları Abant’ta Masaya Yatırıldı – turk.internet.com Bağlantı
