Green Data

واحدهای تخصصی: زاویه، زمان و Resolution

تا اینجا تمرکز ما روی واحدهای اندازه‌گیری طول و فاصله بود (px، %، em، rem، vw، fr و مشابه‌ها). اما CSS برای مفاهیمی غیر از فاصله هم واحدهای اختصاصی داره؛ زاویه برای چرخش عناصر، زمان برای کنترل مدت انیمیشن‌ها، و Resolution برای تصمیم‌گیری بر اساس کیفیت صفحه‌نمایش. در این درس، هرکدوم رو مختصر و کاربردی می‌بینیم.

واحدهای زاویه (Angle Units)

واحدهای زاویه عمدتاً در Propertyهایی مثل transform (مخصوصاً تابع rotate()) و بعضی از توابع Gradient (مثل linear-gradient()) استفاده می‌شن؛ جاهایی که نیاز به تعریف یک جهت یا چرخش داریم.

deg: درجه

.rotated {
  transform: rotate(45deg);
}

deg (درجه) رایج‌ترین واحد زاویه‌ست. یک دایره کامل برابر 360deg است؛ 45deg یعنی یک‌هشتم چرخش کامل.

grad: گراد

.box {
  transform: rotate(50grad);
}

grad (گراد) واحدی کمتر رایجه که یک دایره کامل رو برابر 400grad در نظر می‌گیره؛ یعنی 100grad معادل یک چهارم چرخش (یا همون ۹۰ درجه) است.

rad: رادیان

.box {
  transform: rotate(0.785rad);
}

rad (رادیان) واحد ریاضی رایج در محاسبات مثلثاتی‌ست؛ یک دایره کامل برابر 2π rad (تقریباً 6.28rad) است. این واحد بیشتر در محاسبات جاوااسکریپتی یا کارهای مرتبط با گرافیک دیده می‌شه، تا استفاده مستقیم دستی در CSS.

turn: چرخش کامل

.box {
  transform: rotate(0.25turn);
}

turn شهودی‌ترین واحد زاویه‌ست: 1turn دقیقاً برابر یک چرخش کامل (۳۶۰ درجه) است. پس 0.25turn یعنی یک‌چهارم چرخش، که دقیقاً معادل 90deg است.

واحدهای زمان (Time Units)

واحدهای زمان مشخص می‌کنن یک Transition یا Animation چه مدت طول می‌کشه؛ مفاهیمی که در فصل‌های اختصاصی Transitions و Animations با جزئیات کامل بررسی‌شون می‌کنیم. فعلاً فقط با خود واحدها آشنا می‌شیم.

s: ثانیه

.box {
  transition: background-color 0.3s;
}

s (ثانیه) رایج‌ترین واحد زمانه؛ 0.3s یعنی این تغییر رنگ، سی‌صدم ثانیه طول می‌کشه.

ms: میلی‌ثانیه

.box {
  transition: transform 300ms;
}

ms (میلی‌ثانیه) برابر یک‌هزارم ثانیه‌ست؛ 300ms دقیقاً معادل 0.3s است. انتخاب بین این دو واحد صرفاً یه ترجیح نوشتاری‌ست؛ هر دو از نظر عملکرد کاملاً یکسانن.

واحدهای Resolution

واحدهای Resolution (کیفیت تصویر) عمدتاً داخل Media Query به اسم @media استفاده می‌شن تا بر اساس تراکم پیکسلی صفحه‌نمایش کاربر (مثلاً صفحه‌های معمولی در برابر صفحه‌های Retina یا HiDPI)، استایل‌های متفاوتی اعمال کنیم. جزئیات کامل Media Query رو در فصل Responsive Design می‌بینیم؛ اینجا فقط با خود واحدها آشنا می‌شیم.

dpi: نقطه در هر اینچ

@media (min-resolution: 192dpi) {
  .logo {
    background-image: url("logo@2x.png");
  }
}

dpi (Dots Per Inch) تعداد نقاط تصویر در هر اینچه. این Media Query می‌گه: «اگه تراکم پیکسلی صفحه‌نمایش حداقل ۱۹۲ باشه (یعنی دو برابر تراکم استاندارد ۹۶ dpi)، از یک تصویر با کیفیت بالاتر استفاده کن».

dpcm: نقطه در هر سانتی‌متر

@media (min-resolution: 75dpcm) {
  .icon {
    background-image: url("icon-hd.png");
  }
}

dpcm (Dots Per Centimeter) همون مفهوم dpi رو داره، ولی بر اساس سانتی‌متر به‌جای اینچ. این واحد نسبت به dpi بسیار کمتر استفاده می‌شه.

dppx: نقطه در هر پیکسل (رایج‌ترین در وب مدرن)

@media (min-resolution: 2dppx) {
  .avatar {
    background-image: url("avatar@2x.png");
  }
}

dppx (Dots Per Pixel) شهودی‌ترین و امروزه رایج‌ترین واحد Resolution در توسعه وبه. مقدار 1dppx یعنی تراکم استاندارد (هر پیکسل CSS دقیقاً یک پیکسل فیزیکی)، و 2dppx یعنی صفحه‌نمایش دو برابر متراکم‌تره (مثل اکثر صفحه‌های Retina)؛ یعنی هر پیکسل CSS، عملاً با دو پیکسل فیزیکی رسم می‌شه.

جدول جمع‌بندی

دسته	واحدها	کاربرد اصلی
زاویه	deg، grad، rad، turn	transform: rotate()، جهت Gradientها
زمان	s، ms	transition، animation
Resolution	dpi، dpcm، dppx	Media Query برای تراکم پیکسلی صفحه‌نمایش

نکات مهم

deg رایج‌ترین واحد زاویه است؛ turn شهودی‌ترین ولی کمتر استفاده می‌شود.
s و ms از نظر عملکرد کاملاً یکسان هستند و فقط تفاوت نوشتاری دارند.
dppx امروزه رایج‌ترین واحد Resolution در وب مدرن است، چون مستقیماً با مفهوم پیکسل CSS مرتبط است.

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

فراموش کردن واحد هنگام نوشتن مقدار زاویه یا زمان (مثلاً نوشتن فقط 45 به‌جای 45deg)، که باعث نامعتبر شدن کل Declaration می‌شود.
قاطی کردن s و ms در محاسبه مدت واقعی یک Transition یا Animation.
استفاده از dpi به‌جای dppx در Media Queryهای مدرن، در حالی که dppx خوانایی و تطابق بهتری با مفهوم پیکسل CSS دارد.

جمع‌بندی

علاوه بر واحدهای طول، CSS واحدهای تخصصی دیگری هم دارد: واحدهای زاویه (deg، grad، rad، turn) برای چرخش و جهت، واحدهای زمان (s، ms) برای مدت Transition و Animation، و واحدهای Resolution (dpi، dpcm، dppx) برای تشخیص تراکم پیکسلی صفحه‌نمایش در Media Query. هرکدام از این واحدها فقط در زمینه (Context) خاص خودشان معنا و کاربرد دارند.

واحدهای زاویه، زمان و Resolution