آشنایی با تکنیک CSS Reset

[دفاعی 872]

سلام

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

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

بسیاری از مقادیر در هنگام استفاده از این تکنیک معادل ( صفر ) تعیین می شوند و تعیین اندازه برای این عناصر ممکن است حجم فایل CSS شما را افزایش دهد.

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

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

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

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

Eric Meyer’s reset

[align=LEFT]

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

موفق باشید[/align]