واحدهای مطلق (px و سایر)

واحدهایی که هیچ‌وقت تغییر نمی‌کنند: واحدهای مطلق

وارد فصل ششم شدیم؛ فصلی که به یکی از موضوعات پایه‌ای و در عین حال کاربردی CSS اختصاص داره: واحدهای اندازه‌گیری. تا اینجا در مثال‌های مختلف، بارها از px استفاده کردیم بدون این‌که دقیق توضیحش بدیم. حالا وقتشه با واحدهای مطلق شروع کنیم و ببینیم دقیقاً چه معنایی دارن و چه محدودیت‌هایی دارن.

واحد مطلق چیست؟

واحد مطلق (Absolute Unit) واحدیه که اندازه‌اش ثابته و به هیچ عامل خارجی‌ای (مثل اندازه فونت والد، اندازه صفحه‌نمایش یا تنظیمات کاربر) وابسته نیست. یک پیکسل، همیشه همون یک پیکسله؛ صرف‌نظر از این‌که کجای صفحه یا داخل چه عنصری استفاده بشه.

px: رایج‌ترین واحد مطلق

.box {
  width: 300px;
  font-size: 16px;
  margin: 20px;
}

px (پیکسل) پرکاربردترین واحد در CSS‌ه. با اینکه اسمش «پیکسل» است، از نظر فنی دقیقاً برابر یک پیکسل فیزیکی صفحه‌نمایش نیست؛ بلکه یک واحد مرجع استاندارد‌شده‌ست که مرورگر، بسته به تراکم پیکسلی صفحه‌نمایش (مثلاً صفحه‌های Retina با تراکم بالا)، اون رو به تعداد پیکسل فیزیکی مناسب تبدیل می‌کنه. برای کار روزمره با CSS، همین‌قدر کافیه بدونیم 1px همیشه یک اندازه ثابت و قابل‌پیش‌بینیه.

سایر واحدهای مطلق

علاوه بر px، چند واحد مطلق دیگه هم در استاندارد CSS تعریف شدن؛ هرچند کاربردشون در وب بسیار محدودتر از pxه:

واحد	نام کامل	رابطه با px
pt	Point	۱pt ≈ ۱.۳۳px
pc	Pica	۱pc = ۱۶px
in	Inch	۱in = ۹۶px
cm	Centimeter	۱cm ≈ ۳۷.۸px
mm	Millimeter	۱mm ≈ ۳.۷۸px

این واحدها (pt، pc، in، cm، mm) در اصل برای طراحی چاپی (Print) در نظر گرفته شدن، جایی که اندازه واقعی فیزیکی (مثل سانتی‌متر روی کاغذ) اهمیت داره.

@media print {
  body {
    font-size: 12pt;
  }
}

در این مثال، از pt داخل یک Media Query مخصوص چاپ استفاده شده؛ چون در دنیای چاپ، واحد Point سنتی و رایجه (این مفهوم Media Query رو به‌طور کامل در فصل Responsive Design بررسی می‌کنیم).

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

صفحه‌نمایش‌ها، برخلاف کاغذ، اندازه فیزیکی پیکسل‌هاشون بسیار متفاوته؛ یک صفحه‌نمایش موبایل کوچک و یک مانیتور بزرگ، می‌تونن تراکم پیکسلی کاملاً متفاوتی داشته باشن. به همین دلیل، واحدهایی مثل cm یا in که فرض می‌کنن اندازه فیزیکی واقعی رو کنترل می‌کنن، در طراحی رابط کاربری وب عملاً کاربرد معناداری ندارن و تقریباً همیشه به px ترجیح داده نمی‌شن.

مزیت اصلی واحدهای مطلق: پیش‌بینی‌پذیری کامل

.icon {
  width: 24px;
  height: 24px;
}

وقتی از px استفاده می‌کنیم، مطمئنیم که این آیکون همیشه دقیقاً ۲۴ پیکسل خواهد بود؛ صرف‌نظر از اینکه اندازه فونت والد چیه، اندازه صفحه‌نمایش چقدره، یا کاربر تنظیمات خاصی روی مرورگرش داره. این ویژگی، px رو برای مواردی که نیاز به اندازه‌ای کاملاً ثابت و پیش‌بینی‌پذیر داریم (مثل ضخامت یک border، یا اندازه دقیق یک آیکون)، انتخاب مناسبی می‌کنه.

محدودیت اصلی واحدهای مطلق: عدم انعطاف‌پذیری

body {
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

مشکل اینجاست: اگه کاربری بخواد اندازه فونت پیش‌فرض مرورگرش رو (مثلاً به‌خاطر ضعف بینایی) از طریق تنظیمات مرورگر بزرگ‌تر کنه، مقادیر تعریف‌شده با px برای font-size، به این تغییر واکنشی نشون نمی‌دن؛ چون px یک واحد کاملاً مطلق و مستقل از هر تنظیماتیه. این دقیقاً همون محدودیتی‌ست که واحدهای نسبی (مثل rem و em که در درس بعدی می‌بینیم) اومدن حلش کنن.

کاربردهای مناسب px در پروژه‌های واقعی

• Border: ضخامت خطوط معمولاً باید کاملاً ثابت و پیش‌بینی‌پذیر باشه.
• Box Shadow و مقادیر کوچک تزئینی: جایی که دقت مطلق اهمیت بیشتری از انعطاف‌پذیری داره.
• آیکون‌ها و تصاویر با اندازه ثابت: وقتی می‌خوایم مطمئن باشیم یک عنصر بصری همیشه دقیقاً یک اندازه مشخص داره.

.card {
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

یک مثال مقایسه‌ای برای جمع‌بندی

.fixed-element {
  width: 200px;
  padding: 16px;
  border: 2px solid teal;
}

در این مثال، تمام مقادیر با px تعریف شدن؛ یعنی این عنصر همیشه دقیقاً همین اندازه‌ها رو خواهد داشت، بدون توجه به هیچ عامل خارجی‌ای. این پیش‌بینی‌پذیری کامل، هم مزیت اصلی px است و هم، در مواردی مثل font-size، محدودیت اصلی‌اش.

نکات مهم

• واحدهای مطلق (مخصوصاً px) اندازه‌ای ثابت و مستقل از هر عامل خارجی ارائه می‌دهند.
• واحدهای فیزیکی مثل cm، mm و in عمدتاً برای چاپ کاربرد دارند، نه طراحی صفحات وب.
• استفاده گسترده از px برای font-size، می‌تواند مانع از پاسخگویی صفحه به تنظیمات دسترسی‌پذیری کاربر (مثل بزرگ‌نمایی فونت) شود.

اشتباهات رایج

• استفاده از واحدهای فیزیکی مثل cm یا in در طراحی رابط کاربری وب، جایی که این واحدها عملاً معنای فیزیکی واقعی ندارند.
• تعریف تمام مقادیر font-size با px، بدون در نظر گرفتن تأثیر منفی این کار روی دسترسی‌پذیری برای کاربرانی که نیاز به بزرگ‌نمایی فونت دارند.

جمع‌بندی

واحدهای مطلق، به‌خصوص px، اندازه‌ای ثابت و مستقل از هر عامل خارجی فراهم می‌کنند و برای مواردی مثل ضخامت border یا اندازه دقیق آیکون‌ها مناسب هستند. سایر واحدهای مطلق (pt، pc، in، cm، mm) عمدتاً برای طراحی چاپی کاربرد دارند و در طراحی وب کمتر استفاده می‌شوند. محدودیت اصلی این واحدها، عدم واکنش‌پذیری نسبت به تنظیمات کاربر یا اندازه فونت والد است؛ مشکلی که واحدهای نسبی، موضوع درس بعدی، حلش می‌کنند.