چند روز پیش یکی از دوستان ازم پرسید که فایل Reset.css واسه چیه و چرا بعضی ها ازش استفاده میکنن؟! من هم توضیحاتی دادم، اما دیدم بهتره پستی رو در همین رابطه منتشر کنم!

ببینید… هر مرورگری، یک سری استایل های پیش فرض درونی داره که صفحات رو بر اساس اون استایل ها نشون میده…!

یعنی چی؟! یعنی اینکه مثلا مرورگر IE، ممکنه تگ P رو با مارجین ۴ پیکسل نشون بده اما مرورگر Opera همین تگ رو با مارجین ۵ پیکسل نمایش بده!

احتمالا در هنگام طراحی، این مورد رو در مرورگرهای مختلف احساس کردید و بعضی وقت ها همین استایل های پیش فرض مرورگرها، باعث میشن که مشکلاتی از قبیل تفاوت در نمایش محتوای صفحات در مرورگرهای مختلف به وجود بیاد و هرکاری که میکنید درست نمیشه…!

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

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

چطور دستورات Reset رو تهیه کنم؟!

خب، برای اینکار دو راه پیش رو دارید!

اول اینکه اگر با سی اس اس کاملا آشنایی دارید و به‌آن مسلط هستید، میتونید خودتون یک Reset اختصاصی بنویسید!

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

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

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

دستورات 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; 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;}

چطور از این دستورات در طراحی هایم استفاده کنم؟!

برای استفاده از این دستورات، از راه‌های معمول ِ اضافه‌کردن ِ دستورات ِ سی‌اس‌اس به صفحات استفاده می‌کنیم. روش اول به این صورت است که کافی است کدهای بالا را کپی کرده و در ابتدای فایل سی‌اس‌اس ِ اصلی صفحات خود قرار دهید. روش دوم اینکه این دستورات را در یک فایل جداگانه مثلا با نام reset.css به صفحات لینک کنید. و روش آخر هم همان روش قرار دادن ِ دستورات به صورت اینترنال هست. یعنی بین تگ head، این دستورات را قرار دهید.

توجه داشته باشید که قبل از اینکه شروع به نوشتن دستورات ِ سی‌اس‌اس ِ صفحه‌ی خود کنید، دستورات ِ Reset رو به صفحه‌ی خود اضافه کنید… چون اگر بعد از نوشتن و یا در حین نوشتن سی اس اس، این دستورات را به صفحه اضافه کنید، باعث میشه که تا حدودی، چیدمان محتوای صفحه بهم بخورد و دوباره کاری شود! پس از همان لحظه ی اول که قصد نوشتن سی اس اس خود را دارید، این دستورات را به صفحه‌ی خود اضافه کنید.

کمی تخصصی تر!

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

مثلا به دستور زیر توجه کنید:

ol, ul {
list-style: none;
}

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

• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس
• هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا
• آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری