واحدهای اندازه‌گیری در CSS که شاید از وجود آن‌ها بی‌خبر باشید

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

واحد اندازه گیری rem

واحد اندازه‌گیری em در نمونهٔ زیر به font-size نسبت داده شده است و برای مثال اگر اندازهٔ فونت بدنهٔ اصلی را بر روی عددی خاص تنظیم نمایید، هر اصطلاحاً Child Element (زیرشاخه) از این بدنه که دارای واحد em باشد نسبت به آن عدد خاص محاسبه می‌شود:

<body>
    <div class="test">Test</div>
</body>

کدهای سی‌اس‌اس هم به صورت زیر است:

body {
    font-size: 14px;
}

div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

در نمونهٔ بالا، اندازهٔ فونت div را برابر با 1.2em قرار داده‌ایم و این بدان معنا است که فونت‌هایی که درون این بلوک قرار دارند دارای اندازهٔ 1/2 ضرب در هر عددی که برای بدنهٔ اصلی قرار داده‌ایم خواهند بود (در اینجا، ۱/۲ ضرب در ۱۴ که برابر می‌شود با 16.8px) اما اگر چندین div را درون یکدیگر قرار داده و برای هر یک از آن‌ها واحد اندازه‌گیری فونت را em قرار دهیم چه اتفاقی خواهد افتاد؟

پاسخ این است که هر یک از این بلوک‌ها اندازهٔ خود را از بدنهٔ پیشین خود یا اصطلاحاً Parent به ارث می‌برد و از آنجا که هر یک از آن‌ها دارای font-size= 1.2em هستند، پس هرچه به بلوک‌های داخلی‌تر پیش می‌رویم، اندازهٔ فونت نیز افزایش می‌یابد:

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

با اینکه روش بالا کاربردهای مخصوص به خود را دارا است، اما گاهی‌ اوقات دولوپرهای فرانت‌اند ترجیح می‌دهند که از معیاری واحد استفاده کرده و بقیهٔ واحدهای اندازه‌گیری را نسبت به آن معیار تعیین نمایند نه آنکه در هر مرحله ابتدا تشخیص دهند که Parent دارای چه واحد و اندازه‌ای بوده سپس بر اساس آن پیش بروند و اینجا است که واحد اندازه‌گیری rem به کمک ما می‌آید. حرف r در این کلمه برگرفته از root است که به اندازهٔ اصلی‌‌ترین اِلِمنت که معمولاً خودِ تگ <html> است، اشاره می‌کند:

html {
    font-size: 14px;
}

div {
    font-size: 1.2rem;
}

با استفاده از کد بالا، اندازهٔ فونت تمامی بلوک‌ها یکسان بوده و برابر با 16.8px خواهد بود چرا که تمامی آن‌ها بر اساس فرمول ۱/۲ ضرب در ۱۴ محاسبه می‌شوند که 14 همان اندازهٔ اِلِمنت ریشه یا اصلی است.

این واحد تنها برای اندازهٔ فونت‌ها کاربرد ندارد بلکه می‌توانید تمامی گرید وب‌سایت خود را به کمک rem بر پایهٔ اندازهٔ تگ روت تنظیم نمایید و سپس دیگر بخش‌های جزئی‌تر را با استفاده از em کنترل کنید. بدین ترتیب، اندازهٔ فونت سایت شما نه تنها قابل‌پیش‌بینی خواهد بود بلکه در اندازه‌های مختلف (ریسپانسیو) نیز به خوبی نمایش داده خواهد شد:

.container {
    width: 70rem; // 70 * 14px = 980px
}

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

واحد اندازه گیری vh و vw

پایه و اساس بسیاری از طراحی‌های ریسپانسیو (واکنش‌گرا) به استفاده از درصد به جای مقادیر پیکسلی در واحدهای اندازه‌گیری بستگی دارد اما متأسفانه درصدهای سادهٔ سی‌اس‌اس در خیلی از موارد ناکارآمد بوده و طرح ما را با مشکل و محدودیت مواجه می‌سازند و دلیل این موضوع آن است که width اندازهٔ خود را نسبت به نزدیک‌ترین والد محاسبه می‌نماید اما اگر بخواهیم اندازه‌های خود را بر اساس دریچهٔ دید کاربر (Viewport) تنظیم نماییم، باید به سراغ واحدهای vh و vw برویم.

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

واحد vh به تنهایی برابر یک‌صدم ارتفاع ویوپورت است که بدین ترتیب اگر ارتفاع ویوپورت برابر با 900 پیکسل باشد، این واحد برابر با 9 پیکسل خواهد بود. با همین مبنا، اگر عرض ویوپورت برابر با 750 پیکسل باشد، 1vw برابر با 7/5 پیکسل خواهد بود. به نظر می‌رسد که این واحدها بیش از آنچه تصورش را بکنیم به کار خواهند آمد. برای نمونه، یک راه ساده برای ایجاد اسلایدهایی با عرض 100 درصد یا نزدیک به تمام صفحه آن است که از کد زیر استفاده نماییم:

.slide {
    height: 100vh;
}

فرض کنید که می‌خواهیم عرض هِدِر سایت را با توجه به عرض صفحه مقداردهی کنیم که برای این کار اندازهٔ font-size را بر اساس vw مقداردهی می‌کنیم تا با توجه به ویوپورت (هرچه باشد) این مقدار نیز خود را متناسب با آن تغییر دهد.

واحد اندازه گیری vmin و vmax

واحدهای قبلی، یعنی vw و vh، به ترتیب مربوط به عرض و ارتفاع ویوپورت بودند و vmin و vmax نیز کاربردی مشابه با آن دو دارند اما با این تفاوت که مربوط به مقادیر بیشینه و کمینهٔ عرض و ارتفاع صفحه هستند. به عنوان نمونه، اگر مرورگر شما دارای عرض 1100 پیکسل و ارتفاع 700 پیکسل باشد، 1vmin برابر با یک‌صدم مقدار مینیمم میان عرض و ارتفاع خواهد بود. در اینجا ارتفاع مرورگر از عرض آن کمتر است پس ارتفاع به عنوان مینیمم در نظر گرفته شده و vmin نیز به آن اشاره خواهد داشت و مقدار 7 پیکسل را باز می‌گرداند. حال اگر عرض را به 800 پیکسل و ارتفاع را به 1080 پیکسل تغییر دهیم، 1vmin برابر 8 پیکسل و 1vmax برابر با 10/8 پیکسل خواهند بود اما پرسش اینجا است که در چه زمانی این واحدها به کارمان خواهند آمد؟

فرض کنید می‌خواهید اِلِمنتی ایجاد نمایید که همواره بر روی صفحه نمایش داده می‌شود. اگر عرض و ارتفاع آن اِلِمنت را با واحد vmin و مقداری پایین‌تر یا برابر با 100 مقداردهی کنید، می‌توانید آن اِلِمنت را در هر شرایطی در صفحه نمایش دهید. برای نمونه، مربعی که در همه حال حداقل به دو گوشه از صفحه برخورد می‌کند را می توان با کد زیر ایجاد نمود:

.box {
    height: 100vmin;
    width: 100vmin;
}

اما اگر تمایل دارید تا این باکس مربعی تمام صفحه را پوشش دهد (همانند کاور، هر چهار جهت صفحه را لمس کند)، می‌توانید در کد بالا به جای vmin از vmax استفاده نمایید:

.box {
    height: 100vmax;
    width: 100vmax;
}

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

واحد اندازه گیری ex و ch

واحدهای ex و ch همانند دو واحد em و rem به فونت و اندازهٔ فونت سایت وابسته‌اند اما بر خلاف em و rem، این دو همچنین به font-family نیز وابسته‌اند چرا که اندازه‌های آن‌ها برای هر فونت خاصی متفاوت خواهد بود (واحد اندازه‌گیری ch برگرفته از کلمهٔ Character است.)

به بیانی ساده‌تر، اگر از فونت‌های مُونواِسپیس استفاده کنید و کد width: 40ch را به باکس یا اِلِمنت خود بدهید، آن اِلِمنت تنها می‌تواند 40 کاراکتر از آن فونت به خصوص را درون خود جای دهد (Monospace به فونت‌هایی گفته می‌شود که همگی حروف آن دارای عرض یکسان هستند.) همچنین x-height یک فونت برابر با ارتفاع حرف کوچک x در آن فونت است که در بسیاری از اوقات به اندازهٔ محور مرکزی فونت خواهد بود.

کاربردهای بی‌شماری برای این واحد وجود دارد که بیشتر آن‌ها برای تنظیمات و اصلاحات کوچک تایپوگرافی سایت است. برای نمونه، می‌توانید توان‌ها و عباراتی که باید کمی بالاتر از خط اصلی نوشته شوند را به کمک position: relative و bottom: 1ex به راحتی جایگذاری کنید و به همین ترتیب می‌توان عبارات پایین خطی را با به کار بردن کد bottom: -1ex به راحتی طراحی نمود که بدین ترتیب کنترل شما بر روی فونت بسیار بیشتر از گذشته خواهد بود و می‌توانید در هر زمان، قسمت‌های مختلف را به راحتی ادیت و اصلاح کنید:

sup {
    position: relative;
    bottom: 1ex;
}

sub {
    position: relative;
    bottom: -1ex;
}

جمع‌بندی

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

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