Bu sabah öyle blogları okurken farkettimki css sıfırlama (css reset) diye birşey varmış ve    benimde bundan haberim yokmuş.Hemen araştırdım ve aslında benim için ve tüm geliştiriciler için çok faydalı bir teknik olduğu kanaatine vardım.

Peki nedir bu css sıfırlama ? Bazen yaptığımız sayfa bir tarayıcıda düzgün çalışırken sayfayı başka bir tarayıcı ile açtığımızda hiçte hoş olmayan bir görüntü ile karşılaşabiliriz.Bunun nedeni ise browserların belirli bir standardının olmamasıdır.Bu sorunun bir web geliştirici için bazen bir işkence olduğunu düşünen geliştiriciler Css Sıfırlama denen tekniği geliştirmişlerdir.Bu tekniğe göre sayfadaki etiketlerin bazı sitil özelliklerine bir sitil dosyasında ilk değer veriliyor ve bütün browserlarda standart bir görünümü oluşması sağlanıyor. Burada bir eleman kullanılan bu tekniğin en popülerlerini sıralamış.
İşte o teknikler;


1 ) Generic Sıfırlama

  Bu teknik en kolay tekniktir, basitçe sayfadaki tüm elementlerin margin,padding,border değerleri sıfırlanır.Ancak kullanılan * işareti tarayıcıları zorladığı söyleniyor.

   1:  * {padding: 0;margin: 0;border: 0;}

2)Eric Meyer Tekniği


  Bu teknik okuduğum kadarıyla geliştiriciler arasında kullanılan en yaygın teknik.Sayfa da en çok kullanılan etiketlerin bazı sitil özellikleri sıfırlanıyor.

   1:  html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
   2:  del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
   3:  h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
   4:  dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
   5:  vertical-align: baseline;
   6:  font-family: inherit;
   7:  font-weight: inherit;
   8:  font-style: inherit;
   9:  font-size: 100%;
  10:  outline: 0;
  11:  padding: 0;
  12:  margin: 0;
  13:  border: 0;
  14:  }
  15:  /* remember to define focus styles! */
  16:  :focus {
  17:  outline: 0;
  18:  }
  19:  body {
  20:  background: white;
  21:  line-height: 1;
  22:  color: black;
  23:  }
  24:  ol, ul {
  25:  list-style: none;
  26:  }
  27:  /* tables still need cellspacing="0" in the markup */
  28:  table {
  29:  border-collapse: separate;
  30:  border-spacing: 0;
  31:  }
  32:  caption, th, td {
  33:  font-weight: normal;
  34:  text-align: left;
  35:  }
  36:  /* remove possible quote marks (") from <q> &
  37:  <blockquote> */
  38:  blockquote:before, blockquote:after, q:before, q:after {
  39:  content: "";
  40:  }
  41:  blockquote, q {
  42:  quotes: "" "";
  43:  }

3 ) Yahoo’nun Tekniği

   1:  html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
   2:  del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
   3:  h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
   4:  dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
   5:  vertical-align: baseline;
   6:  font-family: inherit;
   7:  font-weight: inherit;
   8:  font-style: inherit;
   9:  font-size: 100%;
  10:  outline: 0;
  11:  padding: 0;
  12:  margin: 0;
  13:  border: 0;
  14:  }
  15:  /* remember to define focus styles! */
  16:  :focus {
  17:  outline: 0;
  18:  }
  19:  body {
  20:  background: white;
  21:  line-height: 1;
  22:  color: black;
  23:  }
  24:  ol, ul {
  25:  list-style: none;
  26:  }
  27:  /* tables still need cellspacing="0" in the markup */
  28:  table {
  29:  border-collapse: separate;
  30:  border-spacing: 0;
  31:  }
  32:  caption, th, td {
  33:  font-weight: normal;
  34:  text-align: left;
  35:  }
  36:  /* remove possible quote marks (") from <q> &
  37:  <blockquote> */
  38:  blockquote:before, blockquote:after, q:before, q:after {
  39:  content: "";
  40:  }
  41:  blockquote, q {
  42:  quotes: "" "";
  43:  }

 

   Evet Css Sıfırlama (css reset) denen olay bu oluyor.Yukarıdaki kodlardan herhangi birini ya da sizin kendi oluşturduğunuz sıfırlama tekniğini projelerinizde kullanabilirsiniz.Peki nasıl kullanacaksınız , bu kodları bir css dosyasına kaydedip sayfanın head kısmında link verebilirsiniz, daha sonra da kendi sitil dosyanızı reset dosyanızın altına link verebilirsiniz.Birde şunu söyleyeyim sıfırlama tekniklerini projeye başlarken kullanmanız gerekiyor aksi halde sizin kodunuzla uyuyumluluk açısından sorun yaşayabilirsiniz.