هماهنگی سایت ها با مرورگرها

[iacbook]

اکنون روش reset مرورگرها را ارئه میدم که امیدوارم بدردتون بخوره

ببینید هر مرورگری یک سری استایل های درونی داره که از اونا استفاده می کنه.
مثلا مرورگر IE، ممکنه تگ P رو با مارجین 4 پیکسل نشون بده اما مرورگر Opera همین تگ رو با مارجین 5 پیکسل نمایش بده! بنابر این همین اختلافات باعث میشن که قالب طراحی شده شما در مرورگرهای مختلف متفاوت نمایش داده شود.
شما می توانید مرورگرها را با چندین خط دستور ریست کنید!!!

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

شاید بگید چطوری! یکمی صبر کنید الان میگم ....

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

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

برای استفاده از دستورات ریست 3 راه وجود داره:

1- قراردادن کدهای بالا در ابتدای فایل سی اس اس قالب
2- ایجاد فایلی بنام reset.css
3- استفاده اینترنال بصورت قراردادن در بین تگ های head قالب

حتما" قبل از شروع به نوشتن css قالب خود این دستورات را در به صفحه خود اضافه نمایید.
زیرا در صورتیکه بعد از نوشتن و یا در هنگام نوشتن css این دستورات را اضافه نمایید باعث میشه که چیدمان صفحه شما بهم بریزه.
یعنی اول اینا رو ابتدا قرار بدید و پس از مشاهده وضعیت قالب را ششروع به تنظیم نمایید...

این دستورات به تمامی متدها و تگ ها و المنت های موجود در صفحه، مقدار 0 و یا none می دهند و همین امر موجب میشود که مرورگر به ناچار، استایل های پیش فرض خود را مطابق با دستورات Reset کند و وقتی تمامی مرورگرها با این دستورات مواجه میشن، تمامی استایل های پیش فرض خود را ریست میکنند و نسبت به نمایش محتوای صفحه، رفتاری مشابه از خود نشان میدهند!

بعنوان مثال:

ol, ul {
list-style: none;
}

این دستور باعث میشه تمامی استایل هایی که به تگ های ol و ul نسبت داده میشن برابر با مقدار none بشن و دیگه ناسازگای هایی که ممکنه به وجود بیاد، برطرف میشن… خصوصا اگر صفحه فارسی هست، حتما باید از این دستور استفاده بشه.


موفق باشید