CSS Reset چیست و چه کاربردی دارد؟

تیر ۵, ۱۳۹۲ توسط : سعید

احتمالا تا به حال با اصطلاح CSS Reset برخورد کرده باشید.شاید قبلا از فایلهایی با این عنوان استفاده کرده باشید.معمولا فایلهایی که با عنوان Css Reset استفاده میکنیم شامل یک سری کدهای CSS هستن که یه سری کار انجام میدن.اما واقعا باید ببینیم این فایل و کدهای داخلش چی هستن و چه کاربردی دارن.

به زبان ساده CSS Reset یک سری کدهای CSS هستن که میان تناقضاتی که بین مرورگرها هست رو برطرف میکنن.مثلا اگر یه صفحه HTML درست کنید و یک متن داخلش قرار بدید میبینید که این متن از کناره های صفحه فاصله داره.این فاصله ممکنه توی مرورگرهای مختلف فرق داشته باشه.

حالا کدهای مربوط به CSS Reset میان و این تناقضات رو رفع میکنن.یکی دونمونه از کدهاشون رو باهم بررسی میکنیم بعد لیستی از فایلهای CSS Reset براتون میذارم تا ازش استفاده کنید.

اختلافاتی که مرورگرها باهم دارن توی مواردی مثل margin , font-size , paddin , border و چند مورد دیگه است.مثلا توی مرورگر اینترنت اکسپلورر نسخه های قدیمی ترش دور عکس ها سر خود یک حاشیه میندازه که توی بقیه مرورگرها این مورد نیست.(مریضه شما به دل نگیرین!)

خوب برای اینکه مرورگر IE سرخود نیاد دوی عکسها حاشیه بندازه میایم از کد زیر استفاده میکنیم :

img{
border:0
}

یا مثلا این کد :

html,body {
    margin:0;
    padding:0;
}

این کد میاد فاصله عناصر HTML رو از کناره های صفحه صفر میکنه که توی همه مرورگرها یه جور نشون داده بشه.

شاید از خودتون بپرسید که اینکار که خوب نیست!!! شاید من بخوام دور عکسام حاشیه داشته باشم یا عناصرم از کناره های فاصله داشته باشه.

حرف شما کاملا درسته اما اگر میخواید عکستون حاشیه داشته باشه باید دوباره بهش استایل بدید.کد بالا میاد کاری میکنه که عکس توی همه مرورگرها یه جور نمایش داده بشه.حالا با یک استایل دیگه میتونین استایل دلخواه رو به عکستون بدید.

img{
  border:1px solid #0f0;
}

خوب دیگه فکر کنم تا همینجا کافیه توضیح دادنش.حالا اگر میخواین از CSS Reset ها استفاده کنید یه سری از این کدها رو براتون میذارم که حالشو ببرید :

۱ – Yahoo CSS Reset

/* 
Yahoo! CSS Reset (YUI 2)
http://developer.yahoo.com/yui/reset/
CSSresetr.com
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

۲ – Eric Meyer’s CSS Reset

/* 
Eric Meyer's CSS Reset
http://meyerweb.com/eric/tools/css/reset/
v1.0 | 20080212
CSSresetr.com
*/
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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

۳ – Tripoli CSS Reset

/* 
Tripoli Reset
http://devkick.com/lab/tripoli/
CSSresetr.com
*/
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
marquee { overflow: inherit !important; -moz-binding: none; }
blink { text-decoration: none; }
nobr { white-space: normal; }

 

۴ – HTML5 Doctor CSS Reset

/* 
HTML5 Doctor Reset v1.6.1
http://html5doctor.com/html-5-reset-stylesheet/
CSSresetr.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

 

بازدید : ۱۳۷۸۶

امیر
تیر ۵, ۱۳۹۲ @ ۱۱:۳۴ ب.ظ

سلام
خوب چطور باید از اینها استفاده کنیم

پاسخ دادن
    بهروز
    تیر ۶, ۱۳۹۲ @ ۱۱:۳۷ ق.ظ

    اینها رو فقط باید تو صفحه لینک بدین. خودش بقیه کارا رو انجام میده.

    پاسخ دادن
تیر ۲۳, ۱۳۹۲ @ ۹:۴۳ ق.ظ

خیلی خوب بود.

پاسخ دادن
آبان ۱۷, ۱۳۹۲ @ ۸:۴۸ ب.ظ

اکثر مطالب رو خوندم زیاد به چشمم نیومدن ولی
این یدونه محشر بود، واقعاً یکی از سوالام بود

ممنونم ازت پهلوون 😉

پاسخ دادن
بهمن ۲۳, ۱۳۹۲ @ ۶:۳۱ ب.ظ

خسته نباشید ببخشید آیا فایل normalize.css هم همینکارو میکنه این فایل فقط html5 هم ساپورت می کنه ؟ یا در کل هم html5 هم html 4 رو؟

پاسخ دادن
    سهیل
    اردیبهشت ۳۱, ۱۳۹۵ @ ۹:۰۹ ق.ظ

    سلام امیر جان .
    شما اگر میخاید که این فایل توی html4 اجرا هم بشه سادس ! کافیه DOCTYPE خودتو عوض کنی و به html4 تغییر بدی !

    پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*