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

نمایش پیش فرض یکسان وب سایت در مرورگرهای متفاوت ( IE , FireFox , Opera , Chrome ) با استفاده از تکنیک CSS Reset


۳۷ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت دوشنبه, ۲۰ام دی , ۱۳۸۹ 48749 بازدید

نمایش پیش فرض یکسان وب سایت در مرورگرهای متفاوت با استفاده از تکنیک 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;}


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۳۷ دیدگاه برای این نوشته ثبت شده است


  1. Ali Aghdam
    ۲۰ دی ۱۳۸۹

    مطالب مفیدی مینویسی ،لطفا به کارت ادامه بده




  2. smy
    ۲۴ دی ۱۳۸۹

    سلام ، ممنون مطالبتون خیلی مفیده . اتفاقا پروژه من هم در مورد cross browser و تکنیکهای اونه .اگر در این زمینه می تونید کمکم کنید ممنون می شم . البته الان در مورد ajax و cross browser کار می کنم …




  3. مهدی
    ۲۰ فروردین ۱۳۹۰

    ممنون از اینکه تجربه خودت رو در خدمت دیگران می زاری




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

    از مطالبت بسیار ممنونم. لطفا به کارت ادامه بده :)




  5. محسن
    ۱۷ خرداد ۱۳۹۰

    سلام و سپاس…




  6. حسن
    ۹ شهریور ۱۳۹۰

    خیلی عالیه
    ادامه بده عزیز دل




  7. jimmyheller
    ۱۵ شهریور ۱۳۹۰

    این مطلب رو معمولا کتاب ها زیاد پوشش نمیدن فوق العاده بود!




  8. مجید ابراهیمی
    ۲۵ شهریور ۱۳۹۰

    با خود سی اس اس که تازه آشنا شدم !!!
    ولی مثل اینکه شاهکار هایی هم داره برای خودش!!!




  9. آرمان
    ۶ مهر ۱۳۹۰

    استاد یه مطلبی هم درباره ی css3 بنویسید خواهشا ممنون ولی این مطلبتون عالی بود من همیشه از ریست شما استفاده می کنم با اجازه چون خیلی به کارم بیشتر کمک می کنه تا بقیه ریست ها :D




  10. آرمان
    ۱۲ مهر ۱۳۹۰

    نه اختیار دارید آقای سروری شما کجا من کجا :D من حالا حالا ها کار دارم :D




  11. امیر
    ۱۹ آبان ۱۳۹۰

    سپاس
    لطفا ادامه بدین:-)




  12. علیرضا
    ۱۵ آذر ۱۳۹۰

    نسخه ۲ اولین css reset هم از اینجا بگیرید. http://meyerweb.com/eric/tools/css/reset/




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

    سلام
    ممنون بابت معرفی این قابلی بسیار کاربردی.
    یه مسئله ای که باهاش مواجه شدم اینه که اگه نخواهیم یکی از قسمت ها در css reset تغییر کنه باید نام اون قسمت رو حذف کنیم ولی ویرگول هاش باشه
    یعنی اگه بخاییم قسمت body از css reset پیروی نکنه باید کد
    html, body, div, span, applet, object, iframe,
    را این صورت تغییر بدیم:

    html , , div, span, applet, object, iframe,

    ورگرنه همه چیز بهم میخوره و مثلا اگه ما باید رو وسط تعریف کرده باشیم میاد میچسبه به راست.
    در ضمن من از کد css reset شما استفاده کردم.
    موفق باشید




    • امیر سروری
      ۱۳ بهمن ۱۳۹۰

      رضا کیانوش @ سلام رضا جان ، خوشحالم مورد استفاده قرار گرفت . نکته ای که اشاره کردی رو من تکمیل و تصحیح میکنم . اگر خواستین تگی رو از این سیستم خارج کنید باید خودش و کامای جدا کننده رو با هم حذف کنید . در ضمن شما نیازی به خارج کردن تگ خاص ( مخصوصا Body ) از این سیستم ندارید بلکه میتونید موارد مورد نیازتون رو بعد از این قسمت به تگ مورد نظرتون اضافه کنید . موفق و پیروز باشید .




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

    الان شما دارید میگید که ((اگر خواستین تگی رو از این سیستم خارج کنید باید خودش و کامای جدا کننده رو با هم حذف کنید ))
    ولی وقتی من body و کاما رو با هم حذف میکنم قالب میاد میچسبه به سمت راست اما وقتی از این کد استفاده میکنم
    html,,div, span, applet, object, iframe,

    قالب به درستی و در وسط نشون داده میشه.
    الان مشگل کار من کجاست؟؟؟




    • امیر سروری
      ۱۴ بهمن ۱۳۹۰

      رضا کیانوش @ رضا جان در این سیستم تمامی تگ ها padding و margin شون صفر میشه و خیلی از موارد دیگه .. . نمیشه گفت مشکل کارت از حذف کردن یا نکردن body از reset هست . شاید دلیل دیگه ای داشته باشه . باید کدهای وب سایت شما رو به صورت live دید و مشکل رو متوجه شد . اگر لینک آنلاین رو اینجا بذاری شاید بتونم کمکی به شما بکنم . موفق باشید .




  15. zeytoon
    ۸ اسفند ۱۳۹۰

    سلام
    میشه بگی در فایل ریسیت خودت چرا فونتها را این اندازه میگری؟




  16. Zakya
    ۲۸ اردیبهشت ۱۳۹۱

    یه آموزش از لیندا دیده بودم که نشون داد که یشه برای یه صفحه دو طراحی انجام داد و گفت که اگر کاربر با HE بازش کرد با این طرح بالا بیاد و اگر با بقیه بروسرها با یه طراحی دیگه بالا بیاد. ولی آموزش نداد که چطور میشه اینکار رو کرد.
    مرسی که یاد دادی
    راستی نظر من هم درباره IE اینکه بخاطر همه وقتهایی که ازم گرفته نمی‌بخشمش D:




  17. علی
    ۲۵ خرداد ۱۳۹۱

    آقا اگر من از css reset که استفاده می کنم باعث تداخل میشه یعنی دستوراتی که می نویسم با دستورات css reset مخلوط میشه و نتیجه مورد نظرم رو نمیگیرم.
    لطفاً بفرمایید به چه شکلی باید از این دستورات استفاده کنم تا با این مشکلات مواجه نشم؟؟!




    • امیر سروری
      ۲۷ خرداد ۱۳۹۱

      علی @ سلام علی جان . اتفاقا من نظرم اینه که شما تازه بعد از استفاده از سی اس اس ریست داری کد نوشتن استاندارد رو انجام میدین .
      خوب عادت کردن به اینکه دیگه توی همه کلاسهایی که مینویسی پدینگ و مارجین رو صفر کردن لازم نیست سخته اما با کمی تمرین حل میشه!!
      فقط باید مقداری تمرین کنید . این به هم ریختگی برای شروع طبیعیه ;-)




      • علی
        ۲۷ خرداد ۱۳۹۱

        مرسی داداش از جوابت امیدوارم این دوره زودتر تموم بشه و من هر چه سریعتر با این مورد کنار بیام و مشکلم حل بشه البته این رو هم بگم که مشکل چندانی ندارم فقط زمانی که میخوام css ای که واسه یک دکمه نوشتم استفاده کنم تغییر استایل این دکمه اعمال نمی شه بقیه همه سالمن و درست کارشون رو انجام میدن؟!
        علتش چیه به نظرت؟!




  18. محمد حسینی
    ۱۸ مرداد ۱۳۹۱

    با عرض سلام و خسته نباشید …
    میخواستم ببینم آیا برای اینکه یه وبسایت داشته باشیم که تو همه مرورگرها خوب نشون بده ، میشه از روش درصد استفاده کرذ ؟ یعنی تمام فاصله هایی که از چپ و راست و بالا و پایین رو میخوایم تعیین کنیم ، درصدی تعیین کنیم . این کارآمد هست به نظر شما یا نه ؟
    منتظرم …
    یا علی …




    • امیر سروری
      ۲۶ مرداد ۱۳۹۱

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




  19. علی حدادکار
    ۸ آبان ۱۳۹۱

    سلام ممنون از آموزش های خوب و مفیدتون :X




  20. مهدی
    ۱۴ اسفند ۱۳۹۱

    ممنون از این مطلب مفید

    اکثر پترن هایی که برای Css استفاده میشن در ابتداشون از این Reset ها دارن، مثل twitter Bootstrap. ولی بعضا با Css های ما Conflict پیدا میکنن.
    یکی از مواردی که خیلی اذیت میکنه LineHeight هست که آدمو وادار میکنه در بیشتر موارد اونو برگردونه به حالت پیش فرض، یعنی Normal یا Inherit.
    ولی در کل به گفته خودتون مارو به نوشتن یک css استاندارد راهنمایی میکنه.




  21. آرمان
    ۵ مرداد ۱۳۹۲

    با سلام خدمت همه شما دوستان . منم یک مشکلی که دارم اینه که چرا وقتی صفحه مرورگر فایر فاکس رو بزرگ یا کوچک میکنم تمامی div ها و بسایت به هم میریزه و البته در حال عادی درست نمایش میده وب سایت رو . کسی میتونه به من در این زمینه کمک کنه یا مشکل کار از کجاست ؟




  22. milad
    ۴ شهریور ۱۳۹۲

    عالی بود ممنون




  23. Amir
    ۱۷ بهمن ۱۳۹۲


  24. میلاد
    ۲۳ اسفند ۱۳۹۲

    سلام
    مفید بود، تشکر.




  25. B-T
    ۶ اردیبهشت ۱۳۹۳

    بلاخره پس از کدوم فایل ریست استفاده کنم؟
    من قبلا از اولی که گداشتین استفاده میکردم ولی تو مرورگرهای مختلف شبیه هم نمیشه
    نمیدونم باید چیکار کنم؟
    :(




  26. B-T
    ۶ اردیبهشت ۱۳۹۳

    اگه براتون مقدوره جواب رو به میلم بفرستین
    خیلی ممنون میشم




  27. نیلوفر
    ۲۰ بهمن ۱۳۹۳

    درود فروان مطلب بسیار مفیدی بود



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





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 webtarget.ir

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.