آشنایی با CSS Reset و کاربرد آن در طراحی وب

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

دلیل این ناسازگاری چیست؟

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

چطور می توانیم این مشکل را برطرف کنیم؟

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

CSS Reset، پایان مشکل عدم سازگاری سایت با مرورگر های مختلف

CSS Reset مجموعه ای از کد های CSS است که تمامی استایل های پیش فرض عناصر و تگ های HTML را که در مروگر های مختلف، با ظاهری متفاوت نمایش داده می شود را در حالت پیش فرض قرار می دهد. با استفاده از این روش، تمامی مرورگر ها از تنظیمات پیش فرضی که شما برای سایتتان تعین کرده اید استفاده می کنند و سپس سایر تغییراتی را که شما بر روی سایت اعمال کرده اید را استفاده می کنند. این روش کمک می کند تا سایت شما با ظاهر یکسانی بر روی تمامی مرورگر ها نمایش داده شود. فقط توجه داشته باشید که به دلیل اینکه تمامی خصوصیت ها به حالت پیش فرض و 0 برگردانده می شوند، نیاز است تا بعد از استفاده از CSS Reset، از دستور line-height در استایل تگ Body استفاده کنید تا فاصله بین خطوط  کل قالب تنظیم شود.

در ادامه یک نمونه از CSS 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, 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;

}

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