آشنایی با CSS Reset

یکشنبه, ۱۵ام خرداد , ۱۳۹۰ | ۱۰ دیدگاه

نمایش پیش فرض یکسان وب سایت در مرورگرهای متفاوت با استفاده از تکنیک CSS Reset

cross browser compatibility

سازگاری یک صفحه وب و کدهای آن با مرورگرهای گوناگون و متعددی که وجود دارند ( IE , FireFox , Opera , Chrome ) ، یکی از مشکلات و چالش های جدی برای طراحان وب سایت بوده است. یک طراح وب سایت گاهی مجبور به افزودن کدهای بسیار پیچیده در لابه لای فایلهای CSS – سی اس اس خود است تا این ناسازگاری و تفاوت در نمایش صفحات در مرورگرهای متفاوت را به این نحو سازگار جلوه دهد.

این چالش تا به ابنجا پیش رفته است که ، توانایی در طراحی وب سایت ، به طوری که در تمامی مرورگرها به طور یکسان نمایش داده شود ( Cross Browser ) ، یک امتیاز بسیار خوب در طراحی وب سایت است. بسیاری از گروه ها و طراحان وب سایت برای راحتی در استفاده از کدهای CSS – سی اس اس به این منظور راه حل ها و تکنیکهای گوناگونی را بررسی کرده اند ، و به نظر میرسد استفاده از تکنیک CSS Reset به این منظور از محبوبیت بیشتری برای طراحان وب سایت بر خوردار است .

CSS Reset چیست ؟

CSS Reset مجموعه ای از استایل سی اس اس ( CSS Style ) است که تمامی Style پیش فرض عناصر و تگ های HTML ( که در مرور گرهای گوناگون ، متفاوت است ) را در حالت پیش فرض قرار میدهد . با استفاده از این روش تمامی مرورگرها به طور پیش فرض دارای نمایش یکسانی خواهند بود و طراح وب سایت می تواند با استفاده از این روش استایل ها (CSS Style ) را با توجه به نیازهای خود تعیین کند.

بهتراست در استفاده از این تکنیک نکات زیر را در نظر داشته باشید

بسیاری از مقادیر در هنگام استفاده از این تکنیک معادل ( صفر ) تعیین می شوند و تعیین اندازه برای این عناصر ممکن است حجم فایل CSS شما را افزایش دهد.
توجه داشته باشید که ممکن است فراموش کنید مقادیری را که به صورت اولیه در آورده اید ، باز سازی کنید .
از تکنیک های استاندارد برای پیش فرض کردن ( CSS Reset ) استفاده کنید . استفاده از تکنیک های غیر استاندارد می تواند باعث بروز مشکلاتی برای کاربران و مخاطبان وب سایت شما شود. ( به طور مثال ، عدم توانایی در تعیین اندازه فونت توسط مرورگر و یا استفاده از کلید های میانبر (Shortcut Key ) )

برای استفاده از این تکنیک ، کافی است کدهای CSS که نمونه هایی از آن را در زیر ملاحظه خواهید نمود در ابتدای سند و فایل CSS وب سایت خود قرار دهید.

در لیست زیر تعدادی از محبوب ترین CSS Reset ها و همچنین Css Reset مورد استفاده در این وبلاگ را ملاحظه می فرمائید

Eric Meyer’s reset

/* v1.0 | 20080212 */

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

CSS Mini Reset

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0;
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

The Yahoo! User Interface CSS Reset

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

Webtarget.ir CSS Reset

/*-------------------------*/
/* Styled By               */ 
/* Amir Sorouri            */ 
/* sorouri.amir@gmail.com  */
/*-------------------------*/

 /*-------------- reset ------------------ */

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;
	background: transparent;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;/* font-size 1em = 10px */}
input,textarea,select{font:1.2em Tahoma, Geneva, sans-serif; color:#000;}
مطلب فوق از وبلاگ webtarget.ir نقل شده است ، اگرعلاقه مند به دنبال کردن مطالب این وبلاگ هستید میتوانید آدرس فید این وبلاگ را در فید خوان خود اضافه کنید و به این روش حمایت خود از این وبلاگ جدید را اعلام فرمائید .
Be Sociable, Share!


۱۰ دیدگاه

  1. […] کامل در ITTutorial برچسب ها: آموزش آی تی, Reset, […]




  2. علی
    ۱۶ خرداد ۱۳۹۰

    سلام. قالبتون مبارک باشه. خسته نباشید. فقط تو رو خدا ، رنگ قرمز منوهاتون رو تیره تر کنید. چشم رو خیلی اذیت می کنه.




  3. امیر حسین
    ۳۱ خرداد ۱۳۹۰

    ببخشید اگه میشه بیشتر توضیح بدین. Thanks Alot




  4. مهرداد
    ۲ تیر ۱۳۹۰

    خیلی مفید بود
    با تشکر




  5. محمد
    ۱۴ تیر ۱۳۹۰

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




  6. علی
    ۳۱ مرداد ۱۳۹۰

    سلام ممنون عالی بود
    alert(“oops!”);




  7. mina
    ۶ مهر ۱۳۹۰

    میشه مثل html یه خودآموز کامل در مورد Css بذارید؟




  8. meysam
    ۲۵ آبان ۱۳۹۰

    خسته نباشید مطالب آموزشی تون خیلی مفید و البته حرفه ای هستش. دست همگی درد نکنه . فقط اگه این لینک دانلود تقویم سال ۸۹ خورشیدی رو از این زیر بر می داشتید . کار تون عالی تر می شد .




  9. سیاوش
    ۴ دی ۱۳۹۰

    بسمه تعالی
    بسیار خوب بود امیدوار در ادامه راهتان موفق و موید باشد
    لطفا از این مطالب آموزش که به زبان ساده تر بیان شده باشد بیشتر منتشر کنید
    با احترام
    سیاوش




  10. رضا کیانوش
    ۱۲ بهمن ۱۳۹۰

    ممنون ب خاطر این مطلب فوق العاده تون با قرار دادن کدهای css reset سایت خودتون (همون چند خط اولی که معرفی کردید) در قالبم مشگل نمایش قالب با مرورگر مزخرف اکسپلوره حل شد خیلی خیلی ممنون



دیدگاه خود را بنویسید