سی‌اس‌اس/ریست و نرمالایز

ملاحظات سئو

ریست و نرمالایز

shorthand

سی‌اس‌اس

مقدمه

مرورگرهای مختلف برای نمایش پیش‌فرض عناصر HTML، تنظیمات پیش‌فرض (مانند margin، padding، اندازهٔ فونت و ...) دارند که باعث تفاوت در ظاهر یکسان کدها در مرورگرهای مختلف می‌شود. برای حل این مشکل، توسعه‌دهندگان از دو تکنیک رایج استفاده می‌کنند:

• CSS Reset (ریست‌کردن سبک‌ها)
• Normalize.css (نرمال‌سازی سبک‌ها)

هدف هر دو، ایجاد پایه‌ای هماهنگ برای استایل‌دهی است، اما رویکرد آن‌ها متفاوت است.

CSS Reset چیست؟

ریست کردن CSS یعنی حذف تمام سبک‌های پیش‌فرض مرورگر برای تمامی عناصر HTML. با این کار، طراح یک پایه خالی و بدون مزاحمت برای طراحی در اختیار دارد.

نمونه CSS Reset ساده

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ریست معروف اریک مایر

یکی از ریست‌های پرکاربرد در جامعهٔ وب، ریست ساخته‌شده توسط Eric Meyer است:

/* 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 {
  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;
}

مزایا

• حذف تفاوت‌های پیش‌فرض بین مرورگرها
• کنترل کامل روی استایل‌ها

معایب

• حذف کامل استایل‌ها می‌تواند تجربهٔ کاربری را کاهش دهد
• نیاز به بازتعریف بسیاری از استایل‌های پایه

Normalize.css چیست؟

Normalize.css یک فایل CSS کوچک است که به جای حذف کامل سبک‌ها، آن‌ها را سازگار، یکنواخت و معقول در همهٔ مرورگرها می‌کند.

به‌جای پاک‌کردن همه‌چیز، Normalize:

• استایل‌های پیش‌فرض مفید را حفظ می‌کند
• رفتار ناسازگار بین مرورگرها را اصلاح می‌کند
• کمک می‌کند عناصر به‌طور معناداری رندر شوند

نصب Normalize.css

می‌توان از CDN یا نصب npm استفاده کرد:

CDN:

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">

npm:

npm install normalize.css

نمونه‌ای از Normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

مزایا

• حفظ ویژگی‌های مفید مرورگر
• بهبود دسترس‌پذیری و خوانایی
• نیاز کمتر به بازتعریف عناصر پایه

معایب

• پیچیده‌تر از CSS Reset
• در برخی پروژه‌های خاص ممکن است نیاز به ریست باشد

مقایسه ریست و نرمالایز

ویژگی	CSS Reset	Normalize.css
روش کار	حذف همهٔ استایل‌ها	اصلاح و هماهنگ‌سازی استایل‌ها
سازگاری با مرورگرها	ساده ولی خشن	سازگارتر و دقیق‌تر
تجربه کاربری پیش‌فرض	کمتر (نیاز به بازتعریف بیشتر)	بیشتر (با حفظ استایل‌های مفید)
کنترل کامل	بله	محدودتر
مناسب برای	طراحی از صفر	پروژه‌های مدرن و دسترس‌پذیر

ترکیب ریست و نرمالایز

برخی پروژه‌ها از ترکیب سبک‌های ریست و نرمالایز استفاده می‌کنند تا هم کنترل کامل و هم رفتار طبیعی مرورگر حفظ شود. حتی برخی فریم‌ورک‌ها (مثل Bootstrap) از نسخهٔ سفارشی Normalize استفاده می‌کنند.

نکات مهم

• هیچ کدام از این روش‌ها «درست یا غلط» نیست؛ انتخاب بین آن‌ها بستگی به نیاز پروژه دارد.
• اگر طراحی از پایه و کاملاً سفارشی است، Reset گزینهٔ بهتری است.
• اگر می‌خواهید ظاهر طبیعی HTML حفظ شود ولی ناسازگاری مرورگرها را نداشته باشید، از Normalize استفاده کنید.
• از حذف outlineها بدون جایگزین در ریست پرهیز کنید (برای حفظ دسترس‌پذیری).

تمرین

1. یک فایل HTML ساده بنویسید با چند تگ مانند h1، ul، button
2. با CSS Reset ظاهر آن را کاملاً یکسان و بدون حاشیه کنید
3. سپس با Normalize ظاهر آن را بررسی و تفاوت‌ها را تحلیل کنید

کاربرد این صفحه از آموزش css

استفاده از CSS Reset یا Normalize.css به شما کمک می‌کند که طراحی وب خود را بر پایه‌ای قابل پیش‌بینی، منسجم و بدون تفاوت‌های مزاحم بین مرورگرها آغاز کنید. شناخت تفاوت‌ها و انتخاب مناسب برای پروژه، یکی از مهارت‌های پایه‌ای در توسعهٔ حرفه‌ای وب است.