Reset.css’in amacı satır yüksekliği, kenar boşluğu ve başlık yazı tipi boyutu gibi varsayılan değerlerdeki tarayıcı tutarsızlıklarını azaltmaktır.
HTML/CSS bilgisi olan herkes bir reset.css dosyası yazabilir, ama buna gerek yok; çünkü profesyonellerin hazırladığı reset.css dosyaları zaten var. Adını anıp kodunu paylaşacağım kişi Eric Meyer. Eric Meyer’in reset.css dosyası, yeni bir projeye başlamadan önce HTML dosyanıza eklemeniz gereken bir yapıdır.
Reset.css dosyasının yazılma nedeni, bir web sayfası tasarlarken yazdığınız CSS kodlarının her tarayıcıda farklı görünebilmesidir. Reset.css bu farkları azaltmak üzere hazırlanmıştır. Örneğin satır yüksekliği, yazı tipi boyutu, yazı tipi ailesi ve kenar boşluğu değerleri CSS kodlarında Internet Explorer’da başka, Firefox’ta başka, Chrome’da başka görünebilir. Reset.css tüm CSS ayarlarını fabrika ayarlarına döndürdüğü için bu farkların bir kısmı küçülür.
Reset.css dosyası nasıl kullanılır?
Aşağıdaki kodları kopyalayıp reset.css dosyası olarak kaydedebilir ve HTML dosyanıza ekleyebilirsiniz.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Ya da dosyayı doğrudan indirmek için buraya tıklayabilirsiniz.
Reset.css dosyası, HTML projesine başladıktan sonra eklenmez; aksi hâlde sitenizin yapısının tamamen bozulması kaçınılmazdır. Reset.css dosyası, projeye başlarken eklenmelidir. HTML dosyasında style.css dosyasından önce bağlantısını vererek reset.css dosyasını kullanabilirsiniz.