Firefox 3.5 çıktı

firefox-128Daha ö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ği Bu ö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

15 yorum

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

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

4 yorum

Dış hat çizgisi(outline) özellikleri

dış hat çizgisiCSS2 ile birlikte gelen kutu dışı şekillendirme(outline) özellikleri kenar  çizgisine(border) benzer bir özelliktir. Fakat kenar çizgisi özelliğinden iki önemli farkı vardır. İlki outline özelliği kenar çizgisi gibi normal akışı etkilemez. Bir elemana 10px outline değeri atandığında elemanın etrafındaki elemanların  üzerine 10px kadar taşar, diğer elemanları ötelemez. İkinci farklılık outline kenar çizgisi gibi dikdörtgen şeklinde değildir.  

Outline özelliği kullanıcının o an nereye odaklandığını belirlemek için kullanılır. Tarayıcı arayüzünde kullanıcının nereye odaklandığını bilmek bize birçok avantajlar sağlayacaktır. Erişebilirlik açısından önemli bir özelliktir. 

Klavyeden web sitelerini gezen kullanıcılar için önemli bir özelliktir. Bu durumu şöyle anlatırsak daha iyi anlaşılacaktır. Bir site düşünün metin içeriğindeki bağlantıların rengi ve tipi metinler ile aynı olduğunu bağlantıları metinden ayıran hiç bir belirtinin olmadığı durumu, bu durum kullanıcıyı ne kadar zorlayacağını düşünün. Bu gibi durumları engellemek için biz sayfa içindeki bağlantılara, düğmelere ve gezinti elemanlarına normal içerikten ayrı stiller tanımlarız. Benzer şeyleri sadece klavyeden interneti gezmeye çalışan insanlar içinde outline tanımları sağlar.

Şu aklımıza gelebilir; kim sadece klavye kullanarak  internette gezer ki. Ama erişebilirlik demek zaten bir sayfaya en fazla kişinin erişmesini sağlamak değil mi?

Şimdi dış hat çizgileri(outline) özelliklerine bir göz atalım.

Dış hat çizgisi biçemi (outline-style)

Dış hat çizgisinin biçemini belirlemek için kullanırız.

Yapısı: outline-style: <deger>
Aldığı değerler: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: none
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Dış hat biçemi none değeri haricindeki değerler için görüntülenir.

  • none: Dış hat görünmesin anlamındadır.
  • dotted: Dış hat belirli aralıklarla dizilmiş noktalardan oluşur.
  • dashed: Dış hat belirli aralıklarla dizilmiş çizgi parçalarından(tire) oluşur.
  • solid: Dış hat bir çizgi olarak görünür
  • double: iki çizgi seklinde görünür. İki çizginin kalınlıkları ile aralarındaki boşluğun genişliğinin toplamı outline-width değerine eşittir.
  • groove: Dış hat tuvale oyulmuş gibi görünür.
  • ridge: groove’un zıddı; Dış hat çizgisi kabartma gibi görünür.
  • inset: Dış hat çizgisinin kutunun tamamını tuvale gömülü gibi görünmesine sebep olur.
  • outset: inset’in zıddı; Dış hat çizgisi kutunun tamamının kabartma gibi görünmesine sebep olur.
Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

Dış hat çizgisi genişliği (outline-width)

Atandığı elemanın dışına çizilen hattın kalınlığını belirlemek için kullanırız.

Yapısı: outline-width: <deger>
Aldığı değerler: thin | medium | thick | length | inherit
Başlangıç değeri: Medium
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Dış hat çizgisi genişliği border-width gibi CSS uzunluk değerlerini (px, pt, em) ve anahtar kelimeler(thin <= medium <= thick) alır, ancak yüzde değer ve eksi değer almaz.

Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

Dış hat çizgisi rengi (outline-color)

Atandığı elemanın dışına çizilen hattın rengini belirlemek için kullanırız.

Yapısı: outline-color: <deger>
Aldığı Değerler: color | invert | inherit
Başlangıç değeri: invert
Uygulanabilen elemanlar: tüm elemanlara
Kalıtsallık: Yok

CSS’in desteklediği renk değerlerini kullanabiliriz, hatta invert değerinide kullanabiliriz. invert, rengi tersine çevirir.

Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

Dış hat çizgisi (outline)

Dış hat çizgisi(outline) özelliği yukarıda gördüğümüz özelliklerin tek seferde kullanılmasını sağlayan bir kısa yoldur.

Yapısı: outline: <deger>
Aldığı Değerler: [ <outline-color> || <outline-style> || <outlinewidth>] | inherit
Başlangıç değeri: Tanımlı değildir
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Kenar çizgisi(border) özelliğine benzer bir yapısı vardır. Ancak ayrıldıkları kısım kenar çizgisinde(border) her kenar için bir atama(border-right, border-bottom, vd.) yapılmasına karşın dış hat çizgisinde(outline) böyle bir özellik yoktur. Dış hat çizgisinin(outline) tüm kenarları aynı özellikleri taşır.

Dış hat çizgileri(outline) normal akıştaki boşlukları tamamlamaz. (taşma yapmaz.) diğer elemanların üzerini örter. Dış hat çizgisinin(outline) önemli özelliklerinden biri etrafını çevreleyen elemanlar üzerinde(üzerine örtmek dışında) bir etki yapmamasıdır, bu sayfa planlamadaki problemlerimizi çözmemiz için önemlidir. Problem olan bir elemana dış hat çizgisi(outline) ataması yaptığımızda tam olarak sorunun ne olduğunu göreceğiz ve elamanın tam yerini öğreneceğiz. Bu kenar çizgisi(border) uygulamaktan farklıdır, dış hat çizgisi(outline) uygulandığında dokümandaki normal akış üzerine bir etki yapmayacaktır.

Dış hat çizgileri(outline) satıriçi elemanların etrafına yerleşir. İki satıra kaymış satıriçi elemanlarda dış hat çizgisi dikdörtgen şeklinde olmayacaktır. Bu da kenar çizgisi(border) ile arasındaki farklardan biridir.

Dış hat çizgileri elemana odaklanıldığında görsel bir çıkıntı gibi görünmesini sağlayabilir.

Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

11 yorum

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

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

12 yorum

Windows Vista .net Framework güncelleme sorunu ve çözümü

Windows vista sp 1 kullanıyorum ve yaklaşık 2-3 hafta önce bir güncelleme kurmaya çalıştı ama hata verdi.

Error code:80070645

2-3 haftadır yükleyemeyince bende internette araştırma yaptım. Bir çözüm buldum buraya yazmayı düşündüm.

Çözmek için bir iki işlem yapmak gerekiyor.

İlk olarak yüklü .net framework kaldırmak için http://blogs.msdn.com/astebner/archive/2006/05/30/611355.aspx buradaki .NET Framework cleanup tool aracını yükleyip eski .net framework sürüm veya sürümlerini kaldırmanız gerekiyor. Dosyayı direk http://cid-27e6a35d1a492af7.skydrive.live.com/self.aspx/Blog_Tools/dotnetfx_cleanup_tool.zip buradan indirebilirsiniz.

Kurup eski sürümleri kaldır dedikten sonra bilgisayarınızı yeniden başlatın.

Daha sonra .net Framework’ün son sürümünü indirip yükleyin

http://www.microsoft.com/downloads/details.aspx?displaylang=tr&FamilyID=ab99342f-5d1a-413d-8319-81da479ab0d7

yukarıdaki bağlantıdan indirebilirsiniz.

Son olarak Windows Update penceresini açıp son güncellemeleri yükleyin işlem tamamdır.

Bir güncelleme için bizi bu kadar uğraştıran Microsoft’a ne demeli bilmiyorum. Çıkmadı ki adam akıllı bir işletim sistemi ona geçelim. Ben Apple’dan ümitliyim.

Kaynaklar

3 yorum

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

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

10 yorum

Sayfa 10 - 91« İlk...89101112203040...Son »

Son yazılar

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.