استفاده از reset و normalize در CSS

هنگام شروع هر پروژه وب، یکی از دغدغه‌های اولیه جلوگیری از تفاوت رفتار عناصر در مرورگرهای مختلف است. دو رویکرد متداول برای حل این مسئله وجود دارد: reset و normalize. این مقاله مروری عملی، مقایسه‌ای و شامل نمونه‌های کد و بهترین روش‌ها برای انتخاب و استفاده از هرکدام ارائه می‌دهد.

چرا به Reset یا Normalize نیاز داریم؟

مرورگرها به‌صورت پیش‌فرض استایل‌های متفاوتی برای تگ‌ها اعمال می‌کنند (مثل margin برای <h1>، padding برای <ul> و غیره). این پیش‌فرض‌ها باعث می‌شوند طراحی شما در مرورگرهای مختلف متفاوت دیده شود. هدف reset و normalize حذف یا متحدالقول‌سازی این تفاوت‌ها است تا طراحی قابل پیش‌بینی‌تری داشته باشید.

تفاوت‌های کلی بین Reset و Normalize

نمونه کلاسیک: Eric Meyer Reset

/* 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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* ...بخش‌های بعدی ... */

این ریست تمامی حاشیه‌ها و پدینگ‌ها و برخی استایل‌های پیش‌فرض را حذف می‌کند. پس از استفاده از چنین ریستی باید بسیاری از استایل‌های پایه (مثل فاصله عناصری، فونت‌ها، اندازه‌ها) را از نو تعریف کنید.

نمونه استفاده از Normalize.css

<!-- استفاده از CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

این روش normalize فایل استاندارد را بارگذاری می‌کند که به‌جای حذف کامل، ناسازگاری‌های کلیدی را اصلاح می‌کند (مثلاً بهبود رفتار input، تنظیمات قابل اتکا برای فونت‌ها و جدول‌ها). به همین دلیل برای پروژه‌هایی که می‌خواهند از پیش‌فرض‌های مرورگر بهره ببرند اما نه اشکالات آن‌ها، مناسب است.

رویکرد مدرن: ریست کوچک و هوشمند

/* Modern minimal reset */:where(html, body) {
  block-size: 100%;
  inline-size: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
button, input, select, textarea {
  font: inherit;
}

در این نسخهٔ به‌روز از ویژگی‌های CSS مدرن استفاده شده: box-sizing روی border-box برای ساده‌تر کردن محاسبات ابعاد، خط پایه مناسب، و نمایش بلاک برای تصاویر تا از بیرون‌زدگی جلوگیری شود. استفاده از :where باعث کاهش specificity می‌شود و امکان override راحت‌تر را فراهم می‌آورد.

اصلاح و بهبود نمونه‌های قدیمی

اگر از یک ریست قدیمی استفاده می‌کنید، بهتر است تغییرات زیر را اعمال کنید:

• اضافه کردن box-sizing: border-box برای همهٔ المان‌ها.
• حفظ behavior‌های مفید مثل focus outline (برای دسترس‌پذیری) به‌جای حذف کامل.
• استفاده از :where برای کاهش specificity و جلوگیری از مشکلات override.

نمونهٔ بهینه‌شدهٔ یک بخش از ریست قدیمی:

*, *::before, *::after { box-sizing: border-box; }
:where(a, button, input) { -webkit-tap-highlight-color: transparent; }

این تغییرها باعث می‌شوند از مشکلات محاسباتی و تجربهٔ لمسی جلوگیری شود، بدون آنکه دسترس‌پذیری یا UX را قربانی کنیم.

بهترین روش‌ها و نکات فنی

• ترتیب بارگذاری: ابتدا ریست/نرمالایز، سپس فایل‌های شناسنامه‌ای (base)، سپس componentها و در نهایت فایل layout. این ترتیب تضمین می‌کند که استایل‌های پایه‌ای شما قابل پیش‌بینی باشند.
• سکوپ کردن ریست: در بعضی پروژه‌ها (مثلاً لایبرری‌های UI) بهتر است ریست را داخل یک محدودهٔ مشخص قرار دهید تا global اثر نگذارد.
• نگه داشتن focus outline برای کیبورد: حذف outline برای دکمه‌ها و لینک‌ها می‌تواند دسترس‌پذیری را کاهش دهد؛ بهتر است آن را با یک استایل بهتر جایگزین کنید تا قابل مشاهده باشد.
• استفاده از modern-normalize یا sanitize.css به‌جای ریست‌های خیلی قدیمی، چون این بسته‌ها با مرورگرهای جدید و مسائل دسترس‌پذیری همسو شده‌اند.
• ملاحظات عملکرد: اضافه کردن فایل normalize از CDN یا به‌صورت bundle شده با build ابزار (مثلاً Webpack) می‌تواند بهتر باشد. اما از وارد کردن CSSهای بزرگ غیرضروری پرهیز کنید.

مثال کاربردی: ترتیب فایل‌ها در HTML

<!-- index.html -->
<link rel="stylesheet" href="normalize.min.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components/button.css">
<link rel="stylesheet" href="layout.css">

در این نمونه normalize ابتدا بارگذاری شده تا ناسازگاری‌ها اصلاح شوند. سپس base.css (تنظیمات تایپوگرافی، متغیرها، رنگ‌ها) و بعد componentها قرار می‌گیرند تا به‌راحتی بتوانید استایل‌ها را بازنویسی کنید.

چه زمانی از Reset و چه زمانی از Normalize استفاده کنیم؟

• اگر می‌خواهید کنترل کامل و صفر از ابتدا داشته باشید (مثلاً طراحی بسیار سفارشی یا سیستم طراحی اختصاصی)، از Reset استفاده کنید.
• اگر می‌خواهید پیش‌فرض‌های مرورگر را تا حدی حفظ کنید و فقط ناسازگاری‌ها را اصلاح کنید (به‌خصوص برای فرم‌ها و المان‌های تعاملی)، از Normalize یا modern-normalize استفاده کنید.
• برای کتابخانه‌ها و کامپوننت‌هایی که قرار است در پروژه‌های مختلف به‌کار روند، معمولاً Normalize یا sanitize منطقی‌تر است تا رفتار پیش‌بینی‌پذیر و دسترس‌پذیر داشته باشید.

نتیجه‌گیری

Reset و Normalize ابزارهای تکمیل‌کننده در جعبه‌ابزار هر توسعه‌دهندهٔ فرانت‌اند هستند. انتخاب بین آن‌ها بستگی به نیاز پروژه، میزان کنترل موردنظر و توجه به دسترس‌پذیری و عملکرد دارد. به‌عنوان یک قاعدهٔ کلی، برای پروژه‌های مدرن توصیه می‌شود از یک ریست کوچک و هوشمند یا normalize مدرن استفاده کنید و همواره رفتارهای مفید مرورگر را حذف نکنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال