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

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

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

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

rem 
این واحد اندازه‌گیری شبیه به چیزی است که با آن آشنایی دارید؛ واحد اندازه‌گیری em در نمونهٔ زیر به font-size نسبت داده شده است. پس برای مثال، اگر اندازهٔ فونت بدنهٔ اصلی (body) را بر روی عددی خاص تنظیم نمایید، هر زیرشاخه (Child Element) از این بدنه که دارای واحد em باشد، نسبت به آن عدد خاص محاسبه می‌شود. واضح است که در اینجا 1 em همان عدد خاص یا اندازهٔ فونت body است:


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

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

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

در نمونهٔ بالا، اندازهٔ فونت div را برابر با 1.2em قرار داده‌ایم و این بدان معنا است که فونت‌هایی که درون div قرار دارند، دارای اندازهٔ 1.2 × هر عددی که برای بدنهٔ اصلی قرار داده‌ایم خواهند بود (در اینجا، 14×1.2 که برابر می‌شود با 16.8px).

حال اگر چندین div را درون یکدیگر قرار داده و برای هر یک از آنها واحد اندازه‌گیری فونت را em قرار دهیم چه اتفاقی خواهد افتاد؟ پاسخ این است که هر یک از این divها، اندازهٔ خود را از بدنهٔ پیشین خود (Parent) به ارث می‌برد و از آنجا که هر یک از آنها دارای font-size= 1.2em هستند، پس هرچه به divهای درونی‌تر پیش می‌رویم، اندازهٔ فونت نیز افزایش می‌یابد:

<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>

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

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


html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

با استفاده از کد بالا، اندازهٔ فونت تمامی divها یکسان بوده و 16.8px خواهد بود چرا که تمامی آنها بر اساس فرمول 14*1.2 محاسبه می‌شوند که 14 همان اندازهٔ اِلِمنت ریشه است.

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

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

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

vh و vw
پایه و اساس بسیاری از طراحی‌های Responsive (واکنش‌گرا) به استفاده از درصد به جای مقادیر پیکسلی در واحدهای اندازه‌گیری بستگی دارد اما متأسفانه درصدهای سادهٔ CSS در خیلی از موارد ناکارآمد بوده و طرح ما را با مشکل و محدودیت مواجه می‌سازند!

دلیل این موضوع آن است که مشخصهٔ width اندازهٔ خود را نسبت به نزدیک‌ترین بدنه (یا Parent) محاسبه می‌نماید اما اگر بخواهیم اندازه‌های خود را بر اساس دریچهٔ دید کاربر (Viewport) تنظیم نماییم چه‌طور؟ این دقیقاً همان کاری است که واحدهای vh و vw برای آن ساخته شده‌اند!

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

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


.slide {
    height: 100vh;
}

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

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

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;
}

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

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

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

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

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

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

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

واحد ex را به عنوان «ارتفاع x فونت» یا 1.5 برابر یک em تعریف می‌کنند. مشخصهٔ x-height یک فونت برابر با ارتفاع حرف کوچک «x» در آن فونت است که در بسیاری از اوقات به اندازهٔ محور مرکزی فونت خواهد بود:

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

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

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


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

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

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

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