CSS قبلا فقط دارای چهار واحد Viewport بود که باید آن‌ها را میشناختیم و تقریبا پاسخگوی همه نیازها بودند. با گذشت زمان و تغییر تکنولوژی، این چهار واحد موجود برای رسیدگی به تمام موارد کافی نبودند. به همین دلیل ۲۰ واحد Viewport دیگر به CSS اضافه شده است، اما آن‌ها به شش واحد اصلی با سه modifier منحصربه‌فرد تقسیم می‌شوند که در مجموع ۲۴ ترکیب را به ما می‌دهند. در این مقاله قصد داریم تا همه این واحدها را باهم بررسی کنیم.

چهار واحد اصلی viewport

واحدهای اصلی viewport در CSS عبارتند از: vw، vh، vminو vmax. در ادامه با هر یک از این موارد بیشتر آشنا خواهیم شد.

vw

vw مخفف عبارت Viewport Width است و عددی که قبل از vw قرار می‌گیرد بیانگر درصدی از عرض ویوپورت می‌باشد. به عنوان مثال، اگر ما ۱۰vwداشته باشیم، نشان می‌دهد که طول مورد نظر ۱۰٪ از عرض ویوپورت ما خواهد بود.

Viewport فقط یک کلمه جایگذین برای اندازه صفحه نمایش می‌باشد، بنابراین اگر روی یک دسکتاپ بزرگ با عرض ۱۹۲۰ پیکسل قرار داریم در این صورت ۱۰vw نشان دهنده ۱۹۲ پیکسل است. اما اگر روی صفحه نمایش یک تلفن همراه با عرض ۳۰۰ پیکسل قرار داشته باشیم، ۱۰vw فقط ۳۰ پیکسل خواهد بود.

vh

vh مخفف Viewport Height است و دقیقاً همان vw می‌باشد اما به جای عرض، ارتفاع را نشان می‌دهد. این دو واحد را می‌توانیم به صورت ترکیبی مورد استفاده قرار دهیم تا به راحتی یک المنت، اندازه کل صفحه نمایش را پر کند.

.full-screen {
  width: 100vw;
  height: 100vh;
}

vmin و vmax

vmin و vmax بیانگر حداکثر و حداقل اندازه Viewport هستند. به عنوان مثال، اگر از تلفن همراهی با عرض ۳۰۰ پیکسل و ارتفاع ۸۰۰ پیکسل استفاده می‌کنیم، vmin نشان‌دهنده عرض ویوپورت و vmax ارتفاع دستگاه است. اگر بخواهیم یک المنت را بر اساس ابعاد یک صفحه اندازه بگیریم، استفاده از این واحدها می‌تواند بسیار مفید باشد. مثلا CSS زیر مربعی را ایجاد می‌کند که تا حد امکان بزرگ باشد و در هیچ جهتی دچار overflow  نشود. دلیل این اتفاق این است که هرگز بزرگ‌تر از ۱۰۰٪ کوچک‌ترین بُعد صفحه نمایش نخواهد بود.

.no-overflow {
  width: 100vmin;
  height: 100vmin;
}

دو واحد جدید viewport

CSS تلاش کرده است تا از مدل top/bottom، left/right، height/width به سمت یک مدل پویاتر start/end، block/inline حرکت کند. دلیل اصلی این تغییر، سهولت در اتخاذ جهت‌های مختلف برای نوشتن در کد است. اگر کل برنامه ما از جهت نوشتاری افقی به جهت عمودی تغییر پیدا کند، ایده top/bottom، یا height/width لزوماً به همین معنا نیست، زیرا اگر بخواهیم padding را در بالا و پایین متن خود اضافه کنیم، در یک سیستم نوشتاری عمودی به جای padding بالا و پایین به صورت padding چپ و راست نمایش داده می‌شود. به همین دلیل است که CSS واحدهای viو vbرا اضافه کرده است.

vi

vi مخفف Viewport Inline است و جهت داخلی داکیومنت را نشان می‌دهد. این واحد در جهت نوشتاری افقی با عرض و در جهت نوشتاری عمودی با طول Viewport ما مطابقت دارد. یک راه آسان برای تشخیص آن توجه به متنی است که داریم. شروع و پایان جملات متن، جهت درونی را مشخص می‌کند.

.horizontal {
  writing-mode: horizontal-tb;
  width: 10vi; /* Same as 10vw */
}

.vertical {
  writing-mode: vertical-lr;
  height: 10vi; /* Same as 10vh */
}

vb

vb مخفف Viewport Block است و جهت بلاک داکیومنت را نشان می‌دهد. این واحد برعکس vi است، بنابراین در جهت نوشتاری افقی با طول و در جهت نوشتاری عمودی با عرض Viewport ما مطابقت دارد. برای به خاطر سپردن این واحد فقط باید به یاد داشته باشیم که جهت بلاک همیشه همان جهتی خواهد بود که المنت‌های بلاک (مثلاً دو div) روی یکدیگر قرار می‌گیرند.

.horizontal {
  writing-mode: horizontal-tb;
  width: 10vb; /* Same as 10vh */
}

.vertical {
  writing-mode: vertical-lr;
  height: 10vb; /* Same as 10vw */
}

Modifierهای واحد Viewport

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

این modifierها  s، lو dهستند. برای استفاده از یک modifier، فقط باید آن را بعد از عدد و قبل از واحد مورد نظر خود مانند ۱۰svwقرار دهیم. به این ترتیب برای هر یک از ۶ واحد Viewport، این ۴ ترکیب کل را خواهیم داشت: vw، svw، lvwو dvw.

هنگامی که ما از هیچ modifierای استفاده نکنیم، در این صورت مرورگری که داریم به طور خودکار از یکی از این ۳ نوع modifier استفاده خواهد کرد.

s Modifier

s modifier مخفف Small است و کوچک‌ترین Viewport ممکن را نشان می‌دهد. در مثال تلفن همراه، این اندازه برابر است با وقتی که نوار URL هم نشان داده می‌شود. اگر اندازه یک المنت را روی ۱۰۰svhتنظیم کنیم، زمانی که نوار URL نشان داده می‌شود ۱۰۰٪ طول صفحه را بر اساس اندازه صفحه اشغال می‌کند. مهم نیست که نوار URL قابل مشاهده است یا نه، این واحد همیشه اندازه خود را بر اساس اندازه Viewport در صورت نمایش نوار URL تعیین می‌کند.

l Modifier

l modifier  مخفف Large است و بزرگ‌ترین Viewport ممکن را نشان می‌دهد. این مفهوم تقریباً مخالف s modifier می‌باشد. در مثال تلفن همراه، این اندازه Viewport برابر با زمانی است که نوار URL نشان داده نمی‌شود. اگر اندازه یک المنت را روی ۱۰۰lvhتنظیم کنیم، زمانی که نوار URL نشان داده نمی‌شود، ۱۰۰٪ از طول صفحه را بر اساس اندازه صفحه اشغال می‌کند. مهم نیست که نوار URL قابل مشاهده است یا نه، این واحد همیشه اندازه خود را بر اساس آنچه که Viewport خواهد بود، تعیین می‌کند. اگر نوار URL نشان داده نشود، به این معنی است که اگر المنتی را روی ۱۰۰lvhتنظیم کنیم و نوار URL نشان داده شود، از نظر فنی بزرگ‌تر از صفحه نمایش خواهد بود.

d Modifier

d modifier مخفف Dynamic است و اندازه فعلی Viewport را نشان می‌دهد. این مفهوم مانند ترکیبی از modifier s و l می‌باشد. در مثال تلفن همراهی که داریم این مقدار بدون توجه به اینکه نوار URL نمایش داده می‌شود یا نه همیشه به اندازه فعلی Viewport خواهد بود. اگر نوار URL نشان داده شود، modifier d هم اندازه با modifier s است، اما اگر نوار URL نشان داده نشود در این حالت modifier d هم اندازه با modifier l خواهد بود.

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

پشتیبانی مرورگر

برای استفاده از این ویژگی‌های CSS همیشه باید پشتیبانی مرورگر را در نظر بگیریم. متأسفانه پشتیبانی مرورگر از این واحدهای جدید Viewport خیلی عالی نیست. در حال حاضر، این واحدهای جدید دارای پشتیبانی ۱۵٫۲ درصد هستند و فقط در سافاری و فایرفاکس پشتیبانی می‌شوند. دلیل این عدم پشتیبانی این است که این پروپوزال هنوز در مرحله پیش‌نویس کار است، به این معنی که بسیار جدید بوده و هنوز از این که جزو ویژگی‌های اصلی CSS باشد فاصله دارد.

جمع‌بندی

در این مقاله سعی کردیم همه ۲۴ واحدی که در Viewport وجود دارد را باهم بررسی کنیم. استفاده از این ترکیب‌های ساده قدرت زیادی به ما می‌دهد تا بتوانیم CSS layoutهای بسیار عالی را طراحی کنیم.