Daha iyi css kodlamak için 70 uzman görüş
- Css dosyası hazırlarken nasıl bir başlangıç yapmalıyım?
- Css kodlarımı nasıl organize edebilirim?
- IDs, Classes, Selectors ve Properties kullanımı
- Css kısaltmaları
- Tipografi ayarları
- İpuçları
gibi belli kategoriler altında toplanmış 70 uzman görüşün verildiği smashingmagazine sitesini ziyaret etmenizi şiddetle tavsiye ediyorum. Mayıs ayında yayınlanan bir blog yazısı olmasına rağmen halen dün gibi geçerliliğini koruyor.
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
Döküman tipi HTML 4.01 Transitional olarak tanımlanmış sayfalardaki 100% yükseklik probleminin çözümü
Bu yazımda sayfamızı döküman tipi HTML 4.01 Transitional olarak tanımlanan sayfamızın 100% oranında yüksekliği ayarlamak isterken karşılaştığımız hatanın nedenlerini ve nasıl çözüleceği hakkında bilgi vermeye çalışacağım.
İlk olarak standart bir web sayfasının hangi bölümlerden oluştuğu ile işe başlamak daha doğru olacak sanırım. Çok kısa şekilde anlatmak istersem bir web sayfası HEAD ve BODY olmak üzerine iki kısımdan oluşur. HEAD bölümü sayfamızın document type, title, meta tag, css ve javascipt tanımlarımızı yaptığımız tarayıcı ekranı içinde görünmeyen fakat hem arama motorları hemde web sayfanın browser içinde nasıl yorumlanacağını belirlediğimiz bölümdür. BODY kısmı ise tarayıcı ekranında görünen kısımların oluşturulduğu bölümdür. Eğer sayfamızı Dreamweaver, Visual Studio ve benzeri üçüncü parti yazılımlar kullanarak hazırlıyorsak HEAD bölümünün en üst kısmına Document Type tanımlasıda varsayılan değer olarak eklenir. Document Type tanımlaması sayfanın hangi standartlara göre tarayıcı içinde yorumlayacağını belirler ve farklı tanımlamalar varsayılan sayfayı farklı şekilde yorumlayarak tarayıcı içinde gösterebilir. IE 6 ve Firefox olmak üzerine iki tarayıcı içinde nasıl bir çözüme gidebileceğinizi kısaca anlatmaya çalışalım.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">
Sayfanızdaki tanımlamamızın yukarıdaki gibi olduğunu varsayıyorum. Varsayılan CSS belgemizin içine yada sayfa içindeki style tanımlaması altına
-
html, body {
-
min-height:100% // IE altında çalışmaz sadece Firefox ve Opera içinde geçerlidir
-
height:100%
-
}
Sayfamızı sarmayalan ve %100 uzamasını istediğimiz alana verilecek
-
#container {
-
height:100%;
-
}
bu tanımlamayı yaptığımızda sayfadaki değişikliği farkedeceksiniz ama halen eksik birşeylerin olduğunu ve halen sayfamızın istediğimiz gibi çalışmadığıda göreceksiniz. Burada çok ufak bir püf nokta daha var. Döküman tipi tanımlaması içinde yazılı olan “http://www.w3.org/TR/html4/loose.dtd” alanınıda silmememiz gerekiyor ve artık sayfamızı 100% yüksekliğinde problemsiz kullanabilir hale gelebiliyoruz. Bunun body elementi içinde font tanımlaması yapan kişiler için bir sakıncası var. Varsayılan font tanımlamalarınız bozulmuş olacak ve font özelliklerini değiştirmek istediğiniz bölümlerdeki tüm classların içine font tanımlamalarını tekrar yapmamız gerecektir.
Firefox tarayıcısı içindeki linklere tıklandığında aktif hale gelen linkin çevresinde noktaları yok etmenin yolu
Firefox tarayıcısı içindeki linklere tıklandığında aktif hale gelen linkin çevresinin noktalar ile çevrelendiğini görürüz. Linklerin etrafını çevreleyen bu noktalardan kurtulmak için css içinde tanımlayacağımız basit bir kod ile çözüme ulaşabiliriz.
-
a:active, a:focus {outline: none}
