لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
۷ واحد اندازه‌گیری در CSS که شاید از وجود آن ها بی‌خبر باشید!

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

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

Rem برای شروع واحد اندازه گیری را معرفی می کنیم که شبیه به چیزی است که با آن آشنایی دارید. واحد اندازه گیری em در نمونه ی زیر به font-size نسبت داده شده است پس برای مثال اگر اندازه ی فونت بدنه ی اصلی (body) را بر روی عددی خاص تنظیم نمایید، هر زیرشاخه و child element از این بدنه که دارای واحد em باشد، نسبت به آن عدد خاص محاسبه می شود. واضح است که در اینجا 1 em همان عدد خاص یا اندازه ی فونت body است.


<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 قرار داده ایم. این بدان معنا است که فونت هایی که در درون 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 Rem تنها برای اندازه ی فونت ها کاربرد ندارد. شما می توانید تمامی Grid وبسایت و یا UI Style خود را به کمک rem، بر پایه ی اندازه ی المنت html تنظیم نمایید و سپس دیگر بخش های جزئی تر را با استفاده از em کنترل کنید. بدین ترتیب اندازه ی فونت سایت و یا وبلاگ شما نه تنها قابل پیش بینی و ردیابی خواهد بود بلکه در اندازه های مختلف (responsive) نیز به خوبی نمایش داده خواهد شد.

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

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

vh و vw پایه و اساس بسیاری از طراحی های Responsive بر استفاده از درصد به جای مقادیر پیکسلی در واحدهای اندازه گیری بستگی دارد اما متأسفانه درصدهای ساده ی CSS در خیلی از موارد ناکارآمد بوده و طرح ما را با مشکل و محدودیت مواجه می سازند. دلیل این موضوع آن است که مشخصه ی 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 که شاید از وجود آن ها بی‌خبر باشید!

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

Ex و Ch واحدهای ex و ch همانند دو واحد em و rem به فونت و اندازه ی فونت سایت وابسته اند اما برخلاف em و rem، این دو همچنین به مشخصه ی font-family نیز وابسته اند چرا که اندازه های آن ها برای هر فونت خاص، متفاوت خواهد بود. واحد اندازه گیری ch یا "character" را به عنوان "واحد پیشرفته"ی اندازه گیری کاراکتر صفر (zero) می نامند. به بیانی ساده اگر از فونت های مونواسپیس (monospace به فونت هایی گفته می شود که همگی حروف آن دارای عرض یکسان هستند) استفاده کنید و عبارت "width: 40ch" را به باکس یا المنت خود بدهید، آن المنت تنها می تواند 40 کاراکتر از آن فونت به خصوص را در درون خود جای دهد. حال این کاربرد مثالی بسیار ساده و پیش پا افتاده از کاربردهای فراوان این واحد است که خودتان باید آن ها را کشف کنید! واحد 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 را به روز نگاه دارید. همانند همیشه، سکان آکادمی تمام تلاش خود را در جهت ارائه ی اطلاعات به روز و کاربردی به شما عزیزان خواهد کرد.