Reset Css Nedir? Ne İşe Yarar?

Reset Css Nedir? Ne İşe Yarar?

Front-end developerların sıkça kullandığı reset.css nedir tanımından önce, cross browser ve client-side tanımlarını öğrenmekte fayda var.

Client-side, kullanıcıların tarayıcılar vasıtasıyla siteyi ziyaret ettiklerinde html, javascript, silverlight, flash gibi kodların tarayıcılar tarafından yorumlanmasıdır.

Hangi tarayıcılar bunlar? Google Chrome, Mozilla, Internet Explorer, Safari gibi web tarayıcıları...

Cross Browser ise, client-side dillerinin (html, javascript vb.) tüm tarayıcılarda aynı görünmesine denir.

Reset.css e gelecek olursak eğer... Tüm tarayıcılarda html etiketlerini sıfırlayan kod blogudur. body, div, strong gibi bir çok html etiketini sıfırlayarak tamamen sizin kodlamanıza olanak sağlar.

Örneğin, Internet Explorer 7 body tagını farklı, Google Chrome tarayıcısı farklı tanımlar. Reset.css ile bu farklılıkları ortadan kaldırarak, tüm tarayıcılar için uygun bir kodlama şansı yakalarız.

Yaygın olarak Eric Meyer'in hazırlamış olduğu reset.css dosyası ile Normalize.css dosyası kullanılır.

Reset.css dosyası

/* 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;
}

Normalize.css de bu mantıkta daha profesyonel çalışan bir css yapısıdır. Hemen hemen bütün html taglarına bir değer atanarak tarayıcılarda düzgün görüntülenmesi sağlanmıştır. Bootstrap, Githup gibi büyük siteler bu css dosyasını kullanmaktadır.

Normalize.css dosyasının son sürümüne bu linkten ulaşabilirisiniz.

Sevgiler.

Bir önceki yazım olan Bootstrap ile Hazırlanmış Responsive Fiyat Tablosu başlıklı makalemde bootstrap pricing tables, pricing tables html ve responsive pricing tables hakkında bilgiler verilmektedir.

Özlem'den Okuyucuya

Bir bloggerın en önemli motivasyon kaynağı, yazdığı yazılarının ilgi görmesidir. Okumuş olduğun içeriği beğendiysen sosyal medyada paylaşabilir, konu ile ilgili görüşlerini yorum kısmından yazabilir veya hemen aşağıdan mail listeme abone olarak bana destek olabilirsin.

Paylaş

google
linkedin

İlginizi Çekebilecek Yazılar