مقادیر و واحدهای اندازه‌گیری

مقدمه

در درس قبل دیدیم که هر پراپرتی CSS با توجه به نقش و ماهیتی که دارد، قادر به دریافت مجموعه‌ی مشخصی از مقادیر (values) است که در قالب نوع‌های داده تعریف می‌شوند. برای نمونه، طبیعی است که یک پراپرتی مانند color یا background-color یک مقدار رنگی را دریافت کند و یک پراپرتی مثل width یا height مقداری را که معرف طول (length) باشد. به علاوه، مقدار اغلب پراپرتی‌های CSS بر حسب یک واحد یا یکای اندازه‌گیری تعییین می‌شود. مستندات CSS شامل معرفی واحدهای اندازه‌گیری متعددی است که هر یک در شرایط مشخصی به کار می‌آیند. گاهی برای یک پراپرتی می‌توان از چندین واحد اندازه‌گیری استفاده کرد و در این شرایط، مهم است که با توجه به شرایط و نیازهای موجود، مناسب‌ترین واحد را انتخاب کنیم. در این درس، انواع مقادیر و مهمترین واحدهای اندازه‌گیری مقادیر در CSS را معرفی کرده و خواهیم دید که از هر بک از این واحدها باید در چه مواقعی استفاده کنیم.

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

پراپرتی‌هایی مانند width و height که برای تنظیم عرض و ارتفاع عناصر کاربرد دارند، به مقادیر عددی معرف طول (length) نیاز دارند و برای این مقادیر، واحدهای اندازه‌گیری متعددی وجود دارد که باید بسته به شرایط، واحد مناسب را از بین آنها انتخاب کنیم.

واحدهای اندازه‌گیری طول در CSS را می‌توان در دو گروه واحدهای مطلق (absolute) و نسبی (relative) جای داد. مقادیر تعیین‌شده با استفاده از واحدهای مطلق، همواره ثابت هستند اما مقادیر تعیین‌شده با استفاده از واحدهای نسبی می‌توانند تحت تأثیر عوامل خارجی، تغییر کنند. در ادامه، به بررسی این دو گروه واحدهای اندازه‌گیری در CSS پرداخته و با تفاوت‌های آنها و موارد استفاده‌ی هر یک آشنا می‌شویم.

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

واحدهای اندازه‌گیری مطلق (absolute units) گروهی از واحدهای اندازه‌گیری هستند که برای تعیین مقادیر ثابت و قطعی کاربرد دارند. این واحدها نسبت به هیچ چیز دیگری سنجیده نمی‌شوند و همواره مقدار ثابتی دارند. جدول زیر لیست واحدهای مطلق CSS را ارائه می‌دهد.

واحدهای اندازه‌گیری مطلق (به جز واحد پیکسل) اساساً تنها زمانی مفید هستند که سایز رسانه‌ی خروجی (output medium) مشخص و ثابت باشد. برای مثال، این واحدها برای اسناد چاپی یا اسنادی که در نهایت، روی یک نمایشگر با ابعاد مشخص و ثابت نمایش داده می‌شوند، مفید هستند.

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

در مثال زیر، از واحدهای مطلق برای تعیین اندازه‌ی فونت متن با استفاده از پراپرتی font-size استفاده شده است:

CSS

.cm{
  font-size: 1cm;
}

.pt{
  font-size: 36pt;
}

.pc{
  font-size: 4pc;
}

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

• تعیین مقدار پراپرتی border-width
• تعیین فونت پایه‌ی صفحه با استفاده از پراپرتی font-size برای عنصر root یعنی html
• تعیین breakpoint در یک مدیاکوئری

واحدهای طولی نسبی

همانطور که گفتیم، واحدهای مطلق به خاطر ماهیت ثابت و غیر قابل تغییرشان، برای استفاده در وب (جز در موارد خاص) مناسب نیستند. اینکه کاربران وب می‌توانند ابعاد پنجره‌ی مرورگر خود را تغییر دهند، لزوم نیاز وب به واحدهای اندازه‌گیری «انعطاف‌پذیر» و به عبارت بهتر، «مقیاس‌پذیر» را نشان می‌دهد. اگر تنوع و تعدد نمایشگرهای مختلف مورد استفاده توسط کاربران وب را نیز در نظر بگیریم، این نیاز را با شدت بیشتری حس می‌کنیم. اینجاست که واحدهای نسبی مفید واقع می‌شوند.

واحدهای اندازه‌گیری نسبی (relative units) گروهی از واحدهای اندازه‌گیری در CSS هستند که مقدارشان ثابت و قطعی نیست، بلکه همواره نسبت به چیزی سنجیده می‌شوند که می‌تواند تغییر کند. چیزی که یک واحد نسبی نسبت به آن سنجیده می‌شود، می‌تواند ابعاد پنجره‌ی مرورگر و یا سایز فونت عنصر والد و یا موارد دیگر باشد. تعدادی از مهمترین واحدهای نسبی در جدول زیر آورده شده‌اند.

چهار واحد انتهایی جدول بالا یعنی واحدهای cap، ic، lh و rlh به تازگی معرفی شده‌اند و در نتیجه از پشتیبانی مناسبی در مرورگرها برخوردار نیستند. واحدهای دیگری مانند vi و vb نیز اخیراً‌ معرفی شده‌اند و فعلاً‌ در فاز آزمایشی قرار دارند و لذا در مرورگرها پشتیبانی نمی‌شوند.

دو مورد از پرکاربردترین واحدهای جدول بالا، واحدهای em و rem هستند که برای سایزدهی به هر چیزی از متون تا باکس‌ها مورد استفاده قرار می‌گیرند. بنابراین، درک صحیح این واحدها بسیار مهم است.

واحد em

همانطور که در جدول بالا هم اشاره شده، واحد em نسبت به سایز فونت عنصر سنجیده و محاسبه می‌شود. به مثال زیر دقت کنید:

CSS

.header{
  font-size: 24px;
  padding: 0.5em;
}

در اینجا مقدار پراپرتی font-size برای عنصر header برابر با 24px است و بنابراین، مقدار 0.5em برای پراپرتی padding معادل با 12px است. حالا به مثال زیر توجه کنید:

CSS

.header{
  font-size: 24px;
  padding: 0.5em;
}

.header li{
  font-size: 0.75em;
}

.header li a{
  font-size: 0.5em;
}

می‌دانیم که font-size یک پراپرتی inherited است (یعنی مقدارش از والد به فرزند به ارث می‌رسد). بنابراین، عناصر li درون header دارای سایز فونت 24px خواهند بود. بنابراین، مقدار 0.75em معادل 18px است. اما برای عناصر a درون li مقدار پراپرتی font-size از والد یعنی li به ارث می‌رسد و بنابراین، معادل 18px است و مقدار 0.5em برای این عناصر معادل 9px خواهد بود.

همانطور که مثال بالا نشان می‌دهد، وقتی از واحد em‌ برای عناص تودرتو شده استفاده می‌کنیم، باید مراقب ماهیت سلسله‌مراتبی آن که ناشی از به ارث رسیدن مقدار پراپرتی font-size از والد به فرزند است، باشیم.

واحد rem

rem نیز یک واحد مشابه با em است که نسبت به سایز فونت عنصر ریشه که در اسناد HTML همان عنصر html است، سنجیده می‌شود. واحد rem‌ بر خلاف em ماهیت سلسله‌مراتبی ندارد، چون همیشه نسبت به سایز فونت عنصر html سنجیده می‌شود. مثال زیر را ببینید:

CSS

html{
  font-size: 16px;
}

.ems li{
  font-size: 1.3em;
}

.rems li{
  font-size: 1.3rem;
}

در اغلب مرورگرها، سایز فونت پیش‌فرض عنصر html برابر با 16px است و بنابراین، اگر پراپرتی font-size را برای عنصر html تنظیم نکنیم، برابر با 16px در نظر گرفته می‌شود و لذا مقداری مثل 2rem معادل 32px خواهد بود.

واحد rem برای پراپرتی‌های مربوط به layout یک انتخاب مناسب محسوب می‌شود. در صورت زوم روی پنجره‌ی مرورگر، همه‌چیز به زیبایی و با حفظ تناسب، تغییر اندازه می‌دهد.

وحدهای Viewport

واحدهای vw و vh واحدهای viewport نامیده می‌شوند، چون نسبت به viewport یا همان پنجره‌ی مرورگر سنجیده می‌شوند. البته اگر بخواهیم دقیق‌تر باشیم، منظور از viewport بخشی از سند است که توسط کاربر مشاهده می‌شود؛ یعنی پنجره‌ی مرورگر منهای بخش‌هایی مثل نوار عنوان و نوار آدرس. واحدهای اندازه‌گیری vw و vh به ما امکان می‌دهند که سایز عناصر را نسبت به viewport و به عنوان درصدی از عرض و ارتفاع viewport فعلی تعیین کنیم. 1vw معادل یک درصد عرض viewport و 1vh معادل یک درصد ارتفاع viewport است. مثال زیر را ببینید:

CSS

div{
  border: 1px solid gray;
  background-color: lime;
  width: 50vw;
  height: 20vh;
  padding: 20px;
  font-size: 2vm;
}

در مثال بالا، با تغییر سایز پنجره‌ی مرورگر، ابعاد باکس مورد نظر و نیز سایز فونت آن تغییر می‌کند به گونه‌ای که همواره عرض باکس برابر با 50 درصد عرض پنجره‌ی مرورگر و ارتفاع باکس همواره برابر با 20 درصد ارتفاع پنجره باشد و متن درون باکس همواره با فونتی به بزرگی 2 درصد عرض پنجره‌ی مرورگر نمایش داده شود.

دو واحد اندازه‌گیری مبتنی بر viewport دیگر با نام‌های vmin و vmax نیز داریم که مینیمم و ماکزیمم ابعاد viewport را ملاک اندازه‌گیری قرار می‌دهند. یعنی 1vmin برابر است با مینیمم 1vw و 1vh و 1vmax برابر است با ماکسیمم 1vw و 1vh.

سایر واحدهای نسبی

واحدهای اندازه‌گیری ch و ex که البته کمتر مورد استفاده قرار می‌گیرند، سایزدهی را بر اساس اندازه‌ی کاراکترهای مشخصی از فونت‌ها انجام می‌دهند. به این ترتیب که واحد ex مقادیر را نسبت به ارتفاع کاراکتر x در فونت عنصر می‌سنجد و واحد ch نیز عرض کاراکتر 0 در فونت عنصر را ملاک قرار می‌دهد. واحد ch برای تعیین سایز عرض باکس‌های حاوی متن مفید است؛ زیرا معادل با تعداد کاراکترهایی است که می‌توان درون باکس جا داد.

با توجه به عدم پشتیبانی مرورگرهای قدیمی‌تر از این دو واحد و به‌خصوص واحد ch باید از اینها به همراه یک استراتژی fallback استفاده کرد.

واحد lh نیز همانطور که در جدول بالا ذکر شده، ارتفاع خطوط یا فاصله‌ی بین خطوط (line height) را به عنوان معیار اندازه‌گیری در نظر می‌گیرد. این واحد اندازه‌گیری فعلاً در مود آزمایشی قرار دارد و اگر قصد استفاده از آن را دارید، باید یک استراتژی fallback مناسب نیز فراهم کنید.

مقادیر درصدی

برخی از پراپرتی‌های CSS می‌توانند مقادیر را بر حسب درصد (percentage) دریافت کنند. درصد، ذاتاً یک واحد اندازه‌گیری نسبی است؛ زیرا عبارت n درصد (n%) با این سوال همراه است که n درصد از چه چیزی؟ این سوال را در CSS می‌توان اینگونه پاسخ داد:

در مورد اغلب پراپرتی‌ها، مقدار n% به معنای n% از مقدار همان پراپرتی برای عنصر والد است. اما استثنائاتی هم داریم؛ مثلاً در مورد پراپرتی padding مقدار n% یعنی n% از مقدار پراپرتی width.

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

همانند واحدهای viewport، واحد درصد نیز برای طراحی واکنشگرا بسیار مفید است. این امر را در فصل یازدهم در عمل خواهیم دید.

مقادیر محاسباتی

گروه دیگری از مقادیر ممکن برای پراپرتی‌های CSS مقادیر محاسباتی هستند که با استفاده از توابع محاسبه می‌شوند. در برنامه‌نویسی، یک تابع (function) مجموعه‌ای از کدهاست که دارای قابلیت استفاده‌ی مجدد هستند و می‌توان آنها را فقط یک بار نوشت و هر چند بار که لازم است، فراخوانی و اجرا کرد. اما در CSS توابع به عنوان مقادیر محاسباتی برای پراپرتی‌ها حضور دارند. ما تا اینجا تعدادی از توابع CSS مانند rgb() و hsl() یا url() را دیده‌ایم.

اما تابع دیگری با نام calc() داریم که شاید بیشتر به تعریف تابع در زبان‌های برنامه‌نویسی شبیه باشد. این تابع به ما امکان انجام اعمال محاسباتی را در CSS می‌دهد و به طور خاص برای مواقعی مفید است که می‌خواهیم با مقادیری کار کنیم که نمی‌توانیم آنها را هنگام نوشتن کدهای CSS تعیین کنیم، بلکه باید مرورگر در زمان اجرا آن مقادیر را تعیین کند. مثال زیر را ببینید:

CSS

.wrapper{
  width: 400px;
  height: 100px;
  border: 1px soid gray;
}

.box{
  width: calc(20%+100px);
  border: 5px solid purple;
}

در این مثال، عرض باکس را با استفاده از تابع calc() برابر با 20%+100px تعیین کرده‌ایم. نکته اینجاست که 20 درصد عرض عنصر والد چیزی نیست که در زمان نوشتن کدها مشخص باشد؛ زیرا مقدار فعلی می‌تواند با تغییر مقدار والد (یعنی 400px) تغییر کند. بنابراین، با استفاده از تابع calc() از مرورگر خواسته‌ایم تا در زمان اجرا، این مقدار را محاسبه کند.

مقادیر بدون واحد

بعضی از پراپرتی‌های CSS با توجه به نوع و ماهیت خود، مقادیر عددی فاقد واحد اندازه‌گیری را به عنوان مقدار خود می‌پذیرند. برای مثال، می‌توانیم به پراپرتی opacity اشاره کنیم که میزان شفافیت (transparency) یک عنصر را کنترل می‌کند و یک عدد بین صفر تا 1 را به عنوان مقدار دریافت می‌کند.