Web’de Yazı Tipi Sorunları ve Google Font API
9 Haz
Yazı Fatih HAYRİOĞLU tarafından CSS, Web Standartları kategorisine eklendi.
Web sitelerini oluşturan öğelerden en önemlisi muhakkak yazılardır. Resimler ve videolarda önemli olsa da çoğunlukla yazılar ön plandadır web sitelerinde. CSS kod yazanlar için diğer öğelere göre daha erişebilir ve esnektir yazılar. Yapılan yenilikler bu konuda daha avantajlı duruma geliyoruz.
Daha önce yazı tipi hakkında bir çok makale yazmıştım.
IE’de Liste elemanları arasındaki boşluk sorunu
31 May
Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.
Bu sorun ile çok karşılaştım. Bir çok insanda bu sorun nedeni ile bana mesaj attı. Son mesajdan sonra konuyu yazmalıyım dedim.
Sorunumuzu tam olarak şöyle tanımlayabiliriz; Dikey olarak listelediğimiz menülerde ie’de fazladan boşluk gözüküyor. Bu durum bazen ie6′da bazense ie6 ve ie7′de oluyor.
Bir örnek verelim
<ul id="menu"> <li><a href="#">Menu Bir</a></li> <li><a href="#">Menu İki</a></li> <li><a href="#">Menu Üç</a></li> <li><a href="#">Menu Dört</a> </li> </ul>
CSS kodumuzda da
ul#menu li a{ display:block}
Örneği görmek için tıklayınız.
kodumuz olsun. Diğer tarayıcılarda normal bir görünüt alırken ie6′da liste öğeleri arasında fazladan boşluk görürüz.
Sorun İnternet Explorer’un hasLayout sorunudur. Aşağıdaki tanımlardan biri yapılması durumunda bu sorun düzelecektir.
display: inline-block
height: herhangi bir değeri
float: left veya right
*max-height: herhangi bir değeri
*max-width: herhangi bir değeri
*min-height: herhangi bir değeri
*min-width: herhangi bir değeri
*overflow: not visible
position: absolute
width: herhangi bir değeri
writing-mode: tb-rl
zoom: herhangi bir değeri
* ie7 de geçerli.
Biz bir tanesini seçelim.
* html ul#menu li a {height: 1px;}
Örneği görmek için tıklayınız.
Bu kodu yazdıktan sonra sayfa aşağıdaki gibi görünecektir.
Kaynaklar
- http://www.brunildo.org/test/IEWlispace.php
- http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
- http://www.cssnewbie.com/fixing-ie6-whitespace-bug/
- http://orlandodefrias.com/2008/11/23/ie-unordered-list-extra-space-bug/
- http://archivist.incutio.com/viewlist/css-discuss/34926
- http://gtwebdev.com/workshop/gaps/white-space-bug.php
Bu konuyu hiç yazmayı düşünmüyordum, Writing Efficient CSS for use in the Mozilla UI makalesini okuyan kadar. Bu makaleyi okuduğumda bir şeyleri yanlış bildiğimi gördüm ve düzeltmek için bu konu hakkında biraz araştırma yapmam gerektiğini düşündüm ve bu makale çıktı. Bende yeni çok şeyler öğrendim. Aslında makalede 10 senelik bir makale, 10 sene sonra tekrar ısıtılıp yayına konmuş.
Web sitelerini kodlarken ve kodlama sonrasında en çok önem verilen alanlardan biridir optimizasyon. Web sitelerinin optimizasyonunda çok fazla ince eleyip sık dokuyoruz. 1 Kbyte’ın bile hesabını yapar olduk. İnternete bağlanma hızları ne kadar artsa da internete bağlanan insan sayısı daha hızlı arttığı için her zaman daha optimize web siteleri önem kazanacaktır. Biz bununla alakalı olarak burada CSS Seçicilerinin optimum kullanılmasını irdeleyeceğiz. Okumaya devam et »
FireBug Net Sekmesi ve Kullanımı
26 May
Yazı Fatih HAYRİOĞLU tarafından CSS, Javascript, XHTML kategorisine eklendi.
FireBug hakkında elle tutulur bir bilgi olmadığı için bu makaleyi yazmaya karar verdim. Bu yazımda FireBug Net paneli hakkında olacaktır. FireBug geliştirme ile alakalı bir makale değildir. Özellikleri hakkında genel bir bilgi içerecektir.
Web sayfalarının kodlarken bir çok yönünü düşünerek kodlarız. Erişebilirliği, esneklik, farklı tarayıcılara uyumlu olması, performans bunlardan ilk aklımıza gelenler. En önemlilerinden biri performansının iyi olmasıdır. Web sitesi sahipleri sitelerinin tarayıcılar tarafından hızlı gezilmesi için en kısa zamanda açılmasını sağlamak için uğraşır. Performans değerlendirmesi için kullanabileceğimiz araçlardan birisi Firebug’ın Net panelidir. Burada Firebug’ın Net sekmesini inceleyeceğiz. Aşağıda benim anasayfamın net panelindeki görüntüsünü görüyorsunuz. Okumaya devam et »
İE6 sorunu: Bağlantı içi elemanlarda hover sorunu
11 May
Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.
Yine bir ie6 sorunu ile karşı karşıyayız. Evet proje biraz dallı budaklı olunca ie6 sorunları başa bela olmaya başladı. Normal standart site tasarımında sorunlar belli idi, ona göre kod yazıyordum, ancak şimdi proje normal site şablonlarından farklı olunca sorunlarda çalışmadığımız yerleden glemeye başladı.
Gelelim sorunun ne olduğuna; sorun şudur ki zemininden resim olan genişleyebilir alanlarda kullandığımız bir yöntem olan Sliding Doors(aynı yöntemi şurada da kullandım) yaptığım bir alanda hover efekti vermeye çalıştığımda karşılaştığım bir sorun. Daha kolay anlaşılmasıması ve benim içinde anlatması kolay olduğu için kaynaklardaki bir örneği vereceğim burada size ben.
HTML kodu
<div> <a href="#">foo<span>bar</span></a> </div>
CSS Kodu
span {
display: none;
}
a:hover span {
display: inline;
}
Örneği görmek için tıklayınız.
Burada yapılan çok basit bir iştir. Bağlantı üzerine gelince span içindeki bar yazısını gösteriyoruz. Ancak ie6′da bu sayfaya baktığımızda bar görüntülenmeyecektir.
Peki çözüm nedir?
Sorun hasLayout sorunu gibi görünsede genel hasLayout çözümleri pek işe yaramıyor. Haslayout sorunları ie6 ve ie7 de görülür, ancak Microsoft bu sorunu ie7 çözmüş görünüşe göre.
friendlybit.com sitesindeki çözüm yolu şöyle; a:hover elemanına padding-top:0 değeri atayıp sonrada a:hover span seçicisinede padding-top:0 değeri atayınca oluyor.
a:hover{
padding-top:0;
}
span {
display: none;
}
a:hover span {
display: inline;
padding-top:0;
}
Örneği görmek için tıklayınız.
Kaynaklar
Daha önce her çıkan tarayıcının yeni sürümleri hakkında bir araştırma makalesi yazdım, ancak Google Chrome hakkında yazmak nasip olmadı. Bunun en büyük sebebi Chrome’un çok hızlı sürüm atlaması, derli toplu sürüm bilgilerinin yayınlanmaması ve sürümler arasında çok büyük özellik eklemesi olmaması idi. Ayrıca Chrome’un pazar payınında bu yazının gecikmesinde etkisi olduğunu kabul etmeliyim.
Google chrome’un hızlı yükselişi ve hız konusundaki insanlara verdiği izlenim kısa sürede kendinden bahsettirdi. Son tarayıcı kullanım oranlarına göre Google Chrome en hızlı yükselen tarayıcı oldu ve kullanım oranını %6,73 oldu.
Arayüz geliştiricileri için tarayıcılar ve sürümleri çok önemlidir. Her sürüm incelemek ve sürüm yeniliklerinden haberdar olmak her arayüz geliştirici için şarttır. Arayüz geliştiricinin aklının bir köşesinde tarayıcı uyumluluğu bilgisi olmalıdır. Bu bize kod yazarken hız kazandıracaktır ve web mecrasının gelişimi hakkında bilgi sahibi yapacaktır.
Gelelim sonunda kendisini yakaladığım Google Chrome 5 Beta’dan bahsetmeye. Okumaya devam et »
