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/

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;

Firefox 3 Desteği

Benim Firefox 3′e geçmememin en büyük nedeni FireBug’ın kararlı bir şekilde Firefox 3′de çalışmaması idi. FireBug 1.2 sürümünde Firefox 3 desteğini sunarak bizi bu dertten kurtarmış oluyor. Artık Firefox3 kullanıyorum ve çok memnunum.

Araçlar daha kaliteli hale getirilmiş

Javascript panel, net paneli  ve Konsol paneli yenilenmiş ve geliştirilmiş. Bu panellerdeki birçok sorun giderilmiş.

Panellerin Aktifleşmesini Seçebiliyoruz

John Resig’in söylediğine göre görünüşte o kadar önemli olmasada bu sürümün en önemli özelliği olarak gösteriyor.

Bu özelliğin bize ne gibi avantajı var derseniz. https://wiki.mozilla.org/User:Rcampbell/Firebug_performance bu çalışmaya göz atmanızı öneririm. Her pencerede FireBug Javascript panelinin açık olması performansı ciddi mana da etkiliyor. Bu nedenle böyle özellik ekleyerek FireBug’ın bir handikapınıda gidermişler.

Artık Javascript panel, net paneli  ve Konsol panellerinin aktif ve pasif olmasını ayarlayabiliyoruz. Normal durumda HTML, CSS ve DOM panelleri çalışıyor, Javascript, Net ve Konsol panelleri ise bizim seçimimize göre aktif ve pasif hale getirilebiliyor.

Yeşil ok işareti yerine FireBug kendi böcek ikonun koymuş. Böcek ikonu eğer Javascript panel veya net panel aktifleştirilirse normal rengini alıyor. Farenin imlecini üzerine getirince kaç sitede aktif olduğu bilgisini gösteriyor.

Önceki sürüm da olan bu sitede FireBug’ı kullanma özelliği biraz daha geliştirilmiş. Aktif site listesinin bulunduğu ayrı bir pencere ile bu kısım geliştirilmiş.

Birlikte Aç Ekranı

Belki birçok kişi için önemsiz gibi görünen bir özellik ancak benim için çok önemli ve kullanışlı bir ekleme oldu. Çünkü buradan kopyalayıp yapıştırmak sorun oluyor, koddan başka içerikleride alıyordu falan ve her defasında kopyala yapıştır gına getiriyordu bazı projelerde.

Bu ekrandan açmak istediğimiz editörleri seçebiliyoruz ekleyip çıkarabiliyoruz.

Suspend/Resume Firebug

Yeni eklenen bu özellik sayesinde FireBug’ın tüm panellerini bir tık ile askıya alabiliyoruz ve daha sonra bu işlemi geri alabiliyoruz. Bu daha çok cep telefonundaki tek tuş gibi bir şey.

Rainbow FireBug ile javascript kodları daha anlaşılır

FireBug’daki javascript kodları renklendirme yapılmadığı için kod yığını şeklinde görünüyor bunu aşmak için güzel bir eklenti hazırlamışlar.

https://addons.mozilla.org/en-US/firefox/addon/7575

Bu eklenti her ne kadar test aşamasında olsa da güzel bir eklenti.

Son olarak Firefox’um Türkçe olduğu için sanırım FireBug’ımda Türkçe oldu. İlk başta bazı sorunlar olsada kullandıkça alışıyor insan. Bazı bölümler hala İngilizce kalmış.

Bu arada FireBug 1.3 çalışmalarına başlanmış bile.

Kaynaklar

• http://ejohn.org/blog/firebug-12-released/
• http://code.google.com/p/fbug/source/browse/branches/firebug1.2/docs/ReleaseNotes_1.2.txt
• https://addons.mozilla.org/en-US/firefox/addon/1843
• http://www.railsjedi.com/posts/24-Firebug-1-2-Excitement açılmıyorsa http://64.233.183.104/search?q=cache:nJW1FmPsOkUJ:www.railsjedi.com/posts/24-Firebug-1-2-Excitement+Firebug+1+2+Excitement&hl=en&ct=clnk&cd=1&client=firefox-a
• http://ajaxian.com/archives/firebug-12-beta-for-firefox-3-rc-1
• http://blog.mozilla.com/about_mozilla/2008/08/25/firebug-12-released/
• http://www.ajaxonomy.com/2008/javascript/firebug-12-released
• http://ajaxian.com/archives/firebug-12-the-final-release-is-out-there
• http://ostatic.com/171732-blog/firebug-group-releases-1-2
• http://justtalkaboutweb.com/2008/04/09/firebug-12-works-with-firefox-3-beta-5/

Firefox 3.0 indir

Firefox 3 özelliklerine bir göz atalım;

Hız ve Bellek Kullanım Oranları

Firefox’un en büyük dezavantajı bence, Bellek kullanım oranlarının çok yüksek seyretmesi idi. Ama Firefox 3 ile bunu minimum seviyelere düşürmüşler diyebilirim. Opera her ne kadar bu alanda birinciliğini koruyor olsa da Firefox 3′de azınsanmayacak kadar iyi. Firefox 2′ye göre %25′lik bir iyileşme olmuş.

Adres Çubuğu ve Favoriler

Yenilenen adres çubuğu ile internet sitelerine ulaşmak daha kolay. Gezdiğimiz internet sitelerini favorilerimize eklemek ve etiketlemek çok kolay. Etiketlediğimiz sitelere adres çubuğundan sadece adresi ve adresinde geçen kelimelerin yanır sıra etiketleri ile de erişebiliyoruz.

Bu özellik Opera 9.5′de var, ancak Firefox 3 bizraz daha geliştirmiş adres çubuğunu. Bu özellik kullanıcıya çok büyük kolaylık sağlıyor.

Güvenlik: Site Hakkında Bilgi

Adres çubuğunun yanında favori ikon bölümünde site hakkında uyarılar yer alıyor. Bu uyarılar sayesinde kullanıcı sitenin kendisi için zararlı mı değil olduğunu anlıyor. Oltalama yöntemi ile kullanıcıyı kandırmaya çalışınalar için güzel bir önlem. Ayrıca zararlı içerikler içinde ayrıca bir önlem alınmış durumda.

Dosya İndirme

Firefox’un baştan beri çok ihmal ettiği dosya indirme kısmına çok güzel özellikler ekleyerek bu açığını da kapattığını görüyoruz. Dosya indirirken durdurabiliyor ve devam edebiliyor, indirdiğimiz dosyanın yolunu kopyalaya biliyor, artı olarak bir dosya indirirken tarayıcınızı kapatırsanız, tarayıcınızı yeniden açtığınızda indirme işlemi kaldığınız yerden devam edebiliyoruz. Son olarakta indirme ekranında arama yapabiliyoruz.

Tüm Siteyi Yakınlaştırma Özelliği

Daha önceki sürümlerde yakınlaştırma yapınca sadece metinleri büyüten Firefox yeni sürüm ile birlikte artık sayfanın tüm öğelerini yakınlaştırıp uzaklaştırma yapabiliyoruz.

Her Sayfaya ayrı ayrı yetki tanımı

Firefox 3 ile birlikte artık genel bir güvenlik tanımı yapmak yerine her sayfa ve siteye ayrı ayrı güvenlik ayarları tanımı yapabiliyoruz.

Eklentiler Penceresi

Eklentiler penceresi daha kullanışlı ve özellikleri daha fazla. Artık eklenti penceresinden siteye gitmeden ekletileri arayabiliyoruz, hakkında bilgi alabiliyoruz, indirip kurabiliyoruz.

CSS özelliklerinde düzeltmeler

CSS yorumlama konusunda gayet iyi sonuçlar veren Firefox3′ün sürüm ile birlikte daha önce eksik kalan özellikleri ekleyip tam bir CSS desteği sunuyor. CSS3 desteği henüz sunmasada biz Firefox’dan memnunuz. CSS3.0 desteği Firefox3.1 ve Firefox 4.0 ile birlikte geleceği konuşuluyor.

Fiefox3′ün desteklediği yeni CS özelliklerinde göze çarpanlar; inline-block ve inline-table, tüm platformlarda font-size-adjust desteği, :default pseudo-class, HTML soft hyphens (­), ime-mode özelliği, white-space‘in pre-wrap değeri, ve :first-child, :only-child, :last-child ve :empty desteği sunuyor.

Şifre Yönetimi

Firefox 3.0 geliştiriciler bu sefer bayağı bir kullanıcı taraflı düzeltmeler yapmışlar bunlardan biri de şifre yönetimi. Eski versiyonlardaki yanlış şifreleri hafızada tutmak yerine sadece doğru şifreleri hafızasında tutarak bizlere kolaylık sağlıyor.

Diğer Özellikler

Bunu haricinde Renk profili desteği, Geçmiş penceresinde yenilikler, haraketli PNG desteği, metin ve yazı tipi yorumlamada iyileştirmeler, Mikroformat tanıma, Çevirimdışı uygulama kullanma olanağı, Adres çubuğunda utf-8 desteği,birden fazla yazı bloğu seçme imkanı, daha hızlı arama, Mevcut oturumu kaydetme özelliği, yenilenen tab alanı, tema gibi bir çok yenilikler Firefox 3 kullanıcılarını bekliyor.

Sonuç

Firefox 3.0 ile Mozilla firması kullanıcıları çok iyi tahlil edip(15.000′den fazla sorunu giderdiğini de unutmayalım) eksik ve aksak yönler çok iyi geliştirmiş. Bizlere gayet kullanışlı ve hızlı bir Tarayıcı sunmuş. Benim ilk gördüğüm eksisi daha FireBug ekletisinin bu sürüm için çıkmamış olması. Onun haricinde Firefox, bir çok yeniliklerle bizi kendine hayran bırakmaya devam ediyor.

Ben bu yazıyı bir gün öceden yazmıştım ve bugün yayına aldım. Firefox çok güzelde bir bilgilendirme yapmış. http://www.mozilla-europe.org/tr/firefox/features/

• http://www.mozilla.com/en-US/firefox/3.0rc2/releasenotes/
• http://www.dria.org/wordpress/archives/2008/06/12/655/
• http://www.infoworld.com/article/08/05/27/five-things-you-will-love-about-Firefox-3_1.html
• http://people.mozilla.com/~beltzner/overview-of-firefox3.swf
• http://blog.mozilla.com/faaborg/2007/06/01/the-user-interface-of-firefox-3-features/
  
• http://download.chip.eu/en/Top-10-Firefox-3-Features_2092548.html?tab=5&show=1
• http://lifehacker.com/software/screenshot-tour/first-look-at-firefox-30-319968.php
• http://developer.mozilla.org/en/docs/Firefox_3_for_developers
• http://fotoanaliz.hurriyet.com.tr/galeridetay.aspx?cid=12563&p=2&rid=4369
• http://www.gezginturk.net/icerik-274-firefox-3-ve-yenilikleri.html