آموزش ریست کردن استایل پیشفرض مرورگرها در سی اس اس (CSS Reset)

تا به حال پیش آمده که فایل HTML ای را ایجاد کرده و بدون حتی اضافه کردن یک خط استایل، آن را در مرورگرهای مختلف باز کنید؟! و سپس در چنین شرایطی ممکن است در هر مرورگر، المنت‌ها را با اندکی تفاوت مشاهده کرده باشید! علت این امر این است که هر مرورگری برای المنت‌ها، دارای استایل‌های پیشفرضی می‌باشد. مثلا در یک مرورگر، لینک‌ها به رنگ آبی در آمده و در مرورگر دیگر، به رنگ بنفش ظاهر می‌شوند؛ و یا اندازه‌ها و مارجین‌های مختلف و … مشاهده شده است.

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

ریست کردن سی اس اس

در این تکنیک، مقادیر پیشرضی را برای المنت‌ها در نظر می‌گیریم؛ تا در هر مروررگری یکسان باشند. می‌توانید از کد زیر برای این کار استفاده کنید.

/* https://fullkade.com/?p=3411
   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;
}

مختص HTML 5

کد ریست بالا هیچ ایرادی ندارد؛ ولی آن کد در رابطه با صفحاتی که قرار است با HTML 5 طراحی شوند، بهینه‌سازی نشده و صددرصد کاربردی نیست. بنابراین برای ریست HTML 5 را می‌توانید از کد زیر استفاده کنید.

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Hadi Akbarzadeh - http://fullkade.com/?p=3411
*/
 
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;
}