گیک فارسی

نوشته های یک گیک فارسی از فعالیت ها ،‌ علاقه مندی ها و نقد هایش

رفع بسیاری از مشکلات مربوط به تفاوت‌های مرورگر ها در طراحی وب سایت

نویسنده:
30 نوامبر 14

یکی از اصلی‌ترین مشکلات و دردسر ها در طراحی وب سایت ، یکسان سازی نمایش وب سایت در مرورگر های مختلف است. جالب اینجاست که اکثر طراحان وب با خواندن مطلب تا به اینجا فوراً تفاوت‌های آشکار و غیر استاندارد IE (مخصوصاً نسخه های قدیمی تر از ۸) در ذهنشان نقش می‌گیرد. این در حالی است که حتی مرورگر های Firefox و Chrome نیز در خیلی از موارد تفاوت‌هایی را در نمایش المان‌های Html دارند.

این تفاوت‌ها از تنظیمات پیش فرضی ناشی می‌شود که تولید کنندگان آن‌ها برای محصول خود در نظر گرفته‌اند که مثلاً رنگ لینک ها در شرایط بازدید نشده و بازدید شده چه باشد و یا حاشیه های داخلی و بیرونی (Padding و Margin) برای المان هایی نظیر TD در TABLE و یا DIV یا LI و حتی خود BODY چه باشد. همین پیش‌فرض ها باعث می‌شود تا تغییراتی در اندازه و مکان المان های صفحه در هر مرورگر شاهد باشیم.

برای رفع این مشکل اصطلاحاً CSS را RESET میکنیم. مظنور از RESET کردن CSS این است که با کدهای CSS به عنوان اولین سند CSS در صفحه تمام این پیش‌فرض ها را خنثی کنیم. پس از خنثی شدن پیش‌فرض ها با وجود دستکاری های CSS بیشتری که متحمل می‌شویم در مقابل شاهد نمایش یکسانی از صفحه وب سایت خود در مرورگر های مختلف خواهیم بود.

یک نمونه کد CSS RESET که توسط Eric Meyer نوشته شده است :

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

کدهای نمونه دیگری هم در سایت cssreset.com موجود است.