در مورد CSS Reset بیشتر بدانیم!
سلام و عرض ادب خدمت اعضای محترم،
وقتی مدتی برنامه نویسی وب کنید، و مکررا مشغول نوشتن کدهای CSS باشید، حتما این سوالات برای شما هم پیش خواهد آمد:
- ای بابا چرا هر مرورگر ساز خودشو میزنه!
- عجب گیری کردیما! پس چرا یه جا این شکلیه یا جا اون شکلی!
- این دیگه چیه اینجا! کد من که سالمه پس چرا اینجا این شکلیه!
- و از این قبلی سوالات که هرروز هم با بروز شدن مرورگرها این سوالات هم کم و زیاد میشن!
طبیعیه. توسعه دهنده های مرورگرها با تحقیق و بررسی نسبت به بروزرسانی برنامه هاشون اقدام می کنند و این یک واقعیت هست که نمیشه یک چیزی ساخت که هر سلیقه و نیازی را پوشش بده.
اما یک نکته هست که توجه بهش خالی از لطف نیست. استفاده از CSS Reset! سی اس اس ریست در واقع یکسری کدهای CSS هست که خام و ابتدایی هستند (البته بهتر هست بگیم تکنیک CSS Reset). یعنی شما این کدها رو در اول پروژه ای که می خواهید بسازید در فایل CSS تون قرار میدید تا یکسری مقداردهی اولیه شه که یک سری مشکلات مثل تفاوت های جزئی بین مرورگرها، فضاهای خالی غیرمفید بین المان ها، تفاوت اندازه فونت ها بطور غیرمنطقی، فاصله های موجود اضافی در برخی تگ ها و ... از بین برن.
هرشخصی ممکن هست بعد از کمی توسعه وب، برای خودش یک CSS Reset بسازد و در پروژه های بعدی اش استفاده کند. اما یکی از CSS Reset های معروفی که موجود هست و توسط شخصی به نام Eric Meyer نوشته شده و توسط میلیون ها سایت تا کنون استفاده شده، کد زیر هست:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
پیشنهاد میکنم از این کد استفاده کنید و صرفا با تجربه های آتی، کدهای خودتون رو اضافه کنید و اگر حوصله داشتید به Eric Meyer هم پیشنهاد کنید تا کدش را بروز کند. مثل کاری که دیگران تا امروز کردند.
منابع (پیشنهاد میکنم منبع اول را مطالعه کنید تا یکسری از سوالاتی که ممکن هست براتون پیش اومده باشه پاسخ داده شه):
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
