Tarayıcı varsayılanlarını (browser defaults) kullanmak

Daha önce Absolute ve Float savurganlığının ne denli sıklıkla karşımıza çıktığından bahsetmiştik. Fazla kod yazmanın bir sebebinin, tarayıcı varsayılanları hakkındaki bilgi yetersizliği olduğunu belirtelim. HTML nesnelerinin varsayılan özelliklerini bilmek, az ve yeterli derecede kod yazmanın önemli bir ayağıdır. 

Bir örnek verelim: DIV nesnesi bir block nesnedir. Yani özelliği gereği bulunduğu alanın genişliği kadar yer kaplar. Body etiketi içinde ise, body’de tüm sayfaya yayılmışsa, o da yayılır. Aynı şekilde P, UL, OL, BLOCKQUOTE, LI, FORM v.b. gibi block nesneler de aynı davranışı sergiler. Inline özelliği olan A, SPAN, U, EM, STRONG v.b. gibi etiketler de yalnızca kavradığı içerik alanı kadar yer kaplar ve padding, margin gibi block nesne özelliklerine istenilen tepkiyi vermezler.

Çoğu yerde block nesnelere width:100% değerinin verildiğini görüyoruz. Bu başınıza olmadık işler açar. Bu nesnelerde bir de padding değeri varsa verilen bu genişlik ciddi sıkıntılar çıkarır. (box-sizing:border-box kullanımı zorunlu olur) Nesneniz bulunduğu alandan taşar ve siz de genişlik değeri ile tekrar tekrar oynarsınız.

Genişlik değeri verilmeyen block nesneler padding özelliği atandığında sıkıntı çıkarmaz. (ya da box-sizing:border-box atayın) Tarayıcı, genişliği ve padding değerini en iyi şekilde ayarlar. Bu sebeple block nesnelere genişlik değeri vermekten şiddetle kaçının diyoruz.

Paylaş

  • Facebook
  • Twitter
  • Google Plus
  • LinkedIn
  • Pinterest
  • RSS

Tarayıcı varsayılanlarını (browser defaults) kullanmak” üzerine 1 düşünce

Gökhan için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>