tarihinde Fatih Hayrioğlu

Firebug 1.4 sürümü çıktı. Firebug web sitelerine tarayıcı üzerinden düzenleme ve denetleme yapabileceğimiz, ayrıca hata ayıklaması yapmamızı ve network hareketlerini izlememizi sağlayan güzel bir Firefox eklentisidir. HTML, CSS ve javascript kodlarına tarayıcı üzerinden etkileşimli olarak müdahale etme olanağı sağladığı için biz web kod yazarları için bulunmaz bir araçtır. Yeni sürüm ile gelen özellikler;

  • Sekmeleri üste alınmış. Görsel olarak biraz daha derli toplu olması için. Eskiye alışanlar için ilk başta biraz garip olsada zamanla alışacağız.
  • Birden fazla panelde arama imkanı. Bu bir çok zaman gereksinim duyduğumuz bir şey idi.
  • Daha gelişmiş bir Net paneli
  • Panel akif-pasif geçişi kolaylaştırılmış.
  • Script paneli performansı arttırılmış.
  • Firefox 3.5 desteği var

Bunun dışında 150’den fazla hata giderilmiş. http://getfirebug.com/

tarihinde Fatih Hayrioğlu

firefox-128

Daha önce Firefox 3.1 yenilikleri adlı bir makale yazmıştık. Ancak sonra Mozilla bu sürümü biraz daha geliştirip biraz daha özellik ekleyip Firefox 3.5 diye sundu bizlere. Yukarıdaki video’da aslında bir çok şey açıklanmış. Ama yinede biz bir kaç cümle ile de olsa bir şeyler yazalım.

Önceki makaleden

  • Geolocation
  • @font-face desteği
  • HTML 5 Video ve Auido DesteğiBu özellik sayesinde video üzerine sağ tıklayıp kaydet diyerek kaydedebiliyoruz. Video ve müzik eklemek için flash’a gerek yok artık.
  • Adres Bar yenilikler
  • Yeni Javascript Motoru - TraceMonkey
  • XHR

Önceki makalemde bahsetmediğim kısımları burada sizlerle paylaşmak istiyorum.

Yeni Kapatılan Pencereler

Birçoğumuz yaşamışızdır, kapattığımız Firefox penceresini tekrar geri getirmeyi. Bu aslında “Yeni kapatılan sekmeler” olarak vardı ancak şimdi pencere olarakda önceki pencereler dönebiliyoruz.

Yeni Görünümlü Gizlilik Sekmesi

Gizli(Private) Sekme özelliği sayesinde gezdiğimiz sitelerin çerezleri siliniyor ve girdiğimiz siteler hakkında bilgiler toplanmıyor. Google Chrome, Safari ve IE8’deki bu özellik Firefox 3.5 ile birlikte geliyor. Firefox 3.5’de bu özelliği Tools - Start Private Browsing deyip balta biliyor ve sonra işimiz bitincede Tools - Stop Private Browsing tıklamamız yeterli. Ctrl + Shift + P kısa yolu yardımı ile daha kolay yapabiliyoruz.

Daha gelişmiş “Geçmişi Sil” Seçenekleri

Geçmişi sil özellikleri arttırılmış. Artık geçmiş 1 saat, 2 saat, 4saati veya bu günü sil diye biliriz. Her şeyi sil seçeneğide mevcut.

Bu siteyi unut özelliği

Bu özellik sayesinde bir daha girmeyeceğimiz sitenin ön bellekteki bilgilerini silebiliyoruz. Sun domain bilgileri buna dâhil değil.

Daha Gelişmiş Sekme Özellikleri

Diğer tarayıcılarda olan sekme ekleme düğmesi Firefox 3.5’e de eklenmiş durumda. Ayrıca Her sekmeyi kendi başına tek olarak görmek ve çalıştırmak için sekmeyi çekip çıkarmak yeterli.

Firefox İkonunu Yeniledi

Firefox 3.5 ile birlikte ikonunu da yeniledi.

clip_image002

Firefox 3.5 indirmek için tıklayınız.

Kaynaklar

tarihinde Fatih Hayrioğlu

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://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