تصاویر، ویدئوها و فونت های واکنش گرا | درس 41 + پروژه درس

درس 41 از دوره آموزش HTML و CSS ارومیا دیزاین

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

سه مسئله متفاوت را جدا بشناسید

اول، اندازه عنصر باید داخل والد جا بگیرد و نسبت آن درست بماند. دوم، مرورگر باید امکان انتخاب یک فایل تصویری متناسب با فضای نمایش را داشته باشد. سوم، متن و کنترل های رسانه باید با تغییر عرض و بزرگ نمایی قابل استفاده بمانند. یک قانون CSS به تنهایی هر سه مسئله را حل نمی کند. در این جلسه هر کدام را با نمونه مستقل بررسی می کنیم تا دلیل هر دستور روشن باشد.

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

تصویر منعطف بدون کشیدگی

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero-image { width: 100%; }

max-width اجازه نمی دهد تصویر از عرض والد بزرگ تر شود. height: auto نسبت طبیعی را حفظ می کند و display: block فاصله خط مبنای تصاویر درون خطی را حذف می کند. width: 100% روی تصویر معرفی، آن را به عرض والد می رساند؛ اگر والد از وضوح فایل بزرگ تر باشد، کیفیت تصویر ممکن است کاهش پیدا کند. پس محدود کردن نمایش و انتخاب وضوح فایل، تصمیم های مرتبط ولی جدا هستند.

<img src="scene-960.webp"
     width="1440" height="900"
     alt="کوه های هندسی زیر خورشید زرد">

ابعاد width و height در HTML نسبت تصویر را به مرورگر معرفی می کنند و به رزرو فضای آن پیش از بارگیری کمک می کنند. CSS می تواند اندازه نمایشی را تغییر دهد؛ این دو ویژگی الزام نمی کنند که تصویر در گوشی هم 1440 پیکسل دیده شود. در پروژه همه نسخه ها نسبت یکسان دارند تا انتخاب فایل، نسبت کادر را عوض نکند. برای اثر padding و اندازه والد، درس مدل جعبه CSS را مرور کنید.

srcset؛ چند فایل واقعی با عرض مشخص

<img class="hero-image"
     src="scene-960.webp"
     srcset="scene-480.webp 480w,
             scene-960.webp 960w,
             scene-1440.webp 1440w"
     sizes="(min-width: 992px) 960px, calc(100vw - 32px)"
     width="1440" height="900"
     alt="کوه های هندسی سبز و آبی زیر خورشید زرد">

در srcset، توصیفگر 480w یعنی عرض واقعی همان فایل 480 پیکسل است؛ این عدد عرض CSS تصویر نیست. داخل ZIP سه فایل متفاوت با عرض های 480، 960 و 1440 وجود دارند. نباید فقط نام یک فایل بزرگ را سه بار عوض کنید و عرض ساختگی بنویسید. مرورگر این گزینه ها را با عرض مورد انتظار نمایش و تراکم پیکسل مقایسه می کند و با توجه به شرایط خودش انتخاب انجام می دهد.

انتخاب همیشه یک نگاشت قطعی از اندازه گوشی به یک نام فایل نیست. کش، تراکم پیکسل و تصمیم مرورگر می توانند اثر بگذارند؛ پس نگویید هر گوشی حتما فایل 480 را می گیرد. برای یک تصویر ثابت که فقط وضوح آن تغییر می کند، این روش مناسب است. اگر برش یا ترکیب بندی تصویر باید عوض شود، در ادامه سراغ picture می رویم.

sizes باید عرض نمایشی واقعی را توصیف کند

.container {
  width: min(960px, calc(100% - 32px));
  margin-inline: auto;
}

در پروژه، تصویر تمام عرض container است. ظرف تا قبل از سقف 960px، عرض viewport منهای 32px را می گیرد. بنابراین از viewport برابر 992px به بالا، sizes عرض 960px را اعلام می کند و در حالت کوچک تر، calc(100vw – 32px) را. این رابطه با CSS واقعی پروژه هماهنگ است. اگر تصویر را بعدا نیم عرض کنید ولی sizes را همان مقدار بگذارید، مرورگر ممکن است فایلی بزرگ تر از نیاز انتخاب کند.

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

چه زمانی picture لازم می شود؟

<picture>
  <source media="(max-width: 600px)" srcset="portrait-crop.webp">
  <img src="wide-scene.webp" width="1200" height="750"
       alt="توضیح محتوای اصلی تصویر">
</picture>

این نمونه مفهومی برای هدایت ترکیب بندی است: در عرض کم ممکن است برش نزدیک تری از سوژه لازم باشد و در فضای عریض تصویر گسترده نمایش پیدا کند. فایل های این قطعه کد مفهومی اند و در پروژه اجرایی استفاده نشده اند؛ پروژه عمدا روی انتخاب وضوح با srcset تمرکز دارد. source باید داخل picture و پیش از img باشد؛ متن جایگزین روی img باقی می ماند.

اگر برش های مختلف نسبت های متفاوت دارند، رزرو فضای هر حالت را هم آگاهانه طراحی کنید تا جابه جایی نامطلوب ایجاد نشود. picture فقط برای تغییر ترکیب بندی نیست و می تواند در ارائه فرمت های متفاوت هم کاربرد داشته باشد. برای یک تصویر محتوایی ساده که تفاوت فقط وضوح آن است، بی دلیل چند لایه شرط اضافه نکنید.

cover و contain؛ اندازه رسانه با محتوای داخل آن فرق دارد

.crops img {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.cover { object-fit: cover; }
.contain { object-fit: contain; }

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

object-fit رفتار محتوای img یا video را داخل کادر آن کنترل می کند؛ با background-size برای پس زمینه یک عنصر یکسان نیست، هرچند مقادیر آشنا دارد. برای مرور پس زمینه ها، درس cover و contain در تصویر پس زمینه را بخوانید. اگر قاب ثابت لازم ندارید، ارتفاع auto ساده تر است و تمام تصویر را با نسبت اصلی نگه می دارد.

ویدئوی واکنش گرا با کنترل پخش

<video controls playsinline preload="metadata"
       poster="poster.webp" width="640" height="400"
       aria-describedby="video-description">
  <source src="demo.mp4" type="video/mp4">
  مرورگر شما ویدئو را پشتیبانی نمی کند.
</video>
<p id="video-description">توضیح محتوای ویدئو</p>

ویدئوی ZIP یک نمونه سه ثانیه ای بی صدا از همان منظره هندسی است. کنترل پخش در اختیار کاربر قرار دارد و autoplay تعریف نکرده ایم. playsinline درخواست نمایش درون صفحه را بیان می کند و preload یک راهنما برای رفتار بارگیری است؛ مرورگر ملزم نیست همیشه دقیقا مطابق آن عمل کند. ابعاد، نسبت پخش کننده را مشخص می کنند و CSS عمومی، عرض را در والد نگه می دارد.

برای ویدئوی گفتاردار، زیرنویس مناسب و مسیر دسترسی به محتوای صوتی لازم است؛ یک متن جایگزین کوتاه روی ویدئو جای آن را نمی گیرد. نمونه این درس گفتار، صدا یا اطلاعات زمانی اضافی ندارد و توضیح متنی، تمام محتوای آن را بیان می کند. در پروژه یک لینک دانلود مستقل هم وجود دارد. برای iframe سرویس خارجی، همین قاعده height: auto لزوما نسبت را حفظ نمی کند؛ قاب دارای aspect-ratio و اندازه مناسب iframe لازم است.

فونت واکنش گرا؛ فایل فونت و اندازه متن را جدا بفهمید

@font-face {
  font-family: "CourseYekan";
  src: url("YekanBakh-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "CourseYekan", Tahoma, sans-serif;
  line-height: 1.9;
}

در اینجا منظور از فونت واکنش گرا، تایپوگرافی و اندازه متنی است که با فضا سازگار می شود؛ فایل فونت با کم شدن عرض صفحه خودکار نسخه موبایل نمی شود. پروژه از فایل محلی یکان بخ استفاده می کند. font-display: swap اجازه نمایش متن با فونت موقت و سپس تعویض آن را می دهد؛ اختلاف معیار فونت ها ممکن است جابه جایی ایجاد کند، پس خروجی بارگیری را هم بررسی کنید. برای وب واقعی، فایل دارای مجوز و فرمت مناسب مثل WOFF2 را ارزیابی کنید.

برای وزن های دیگر باید فایل و تعریف وزن درست داشته باشید؛ نوشتن font-weight به تنهایی فایل وزن واقعی را اضافه نمی کند. این پروژه فایل Regular را تعریف می کند و نمونه اصلی ما درباره اندازه متن است. مبانی خانواده فونت، وزن و فاصله سطر در درس تایپوگرافی CSS توضیح داده شده است.

عنوان منعطف با clamp و حداقل خوانا

h1 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  line-height: 1.5;
}

clamp سه بخش دارد: حداقل، مقدار ترجیحی و حداکثر. مقدار میانی با عرض viewport تغییر می کند، اما نتیجه بین دو حد باقی می ماند. ترکیب rem و vw، وابستگی را فقط به عرض صفحه محدود نمی کند. با این حال حتی این ترکیب هم تضمین خودکار رعایت تمام نیازهای بزرگ نمایی نیست؛ متن را در عرض های مختلف و بزرگ نمایی واقعی آزمایش کنید.

برای عنوان ارتفاع ثابت نگذارید؛ متن فارسی بلندتر باید بتواند به خط بعد برود. از اندازه صرفا vw برای متن اصلی با حداقل نامناسب استفاده نکنید. برای قواعد شرطی بزرگ تر شدن متن، درس مدیا کوئری هم ابزار دیگری در اختیار شما می گذارد. انتخاب بین اندازه پیوسته و تغییر پله ای باید با طراحی و خوانایی هماهنگ باشد.

روش آزمایش؛ فایل انتخابی را با ظاهر اشتباه نگیرید

عرض های 320، 768، 991، 992 و 1280 پیکسل را در پروژه بررسی کنید. تصویر و ویدئو نباید اسکرول افقی کل صفحه بسازند. عنوان را بلند و بزرگ نمایی را 200 درصد کنید؛ متن باید باقی بماند و از کادر بریده نشود. برای سرریز رشته بلند و حداقل اندازه آیتم، درس overflow را مرور کنید.

برای بررسی srcset، عنصر img را در ابزار توسعه انتخاب کنید و currentSrc آن را ببینید؛ راهنمای ZIP نمونه دستور را توضیح می دهد. مرورگر ممکن است فایل بزرگ تر کش شده را پس از کوچک کردن پنجره نگه دارد. در آزمایش بارگیری، کش و تراکم پیکسل شبیه سازی شده را هم در نظر بگیرید؛ صرف دیدن یک تصویر کوچک، انتخاب فایل کوچک را ثابت نمی کند. این تفکیک، مهم ترین نکته کارایی این درس است.

تمرین مستقل و پاسخ درس 41

عنوان بخش practice در حالت اولیه اندازه ثابت 1.5rem دارد. آن را با clamp بین 1.5rem و 2.5rem نگه دارید و مقدار میانی را 1rem + 2vw بنویسید. ارتفاع عنوان نباید محدود شود. سپس یک جمله بلندتر جای عنوان قرار دهید و در فضای باریک و بزرگ نمایی آزمایش کنید.

.practice h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height: 1.5;
}

پاسخ داخل solution.css است و از ابتدا فعال نیست. برای مقایسه، خط زیر را پس از style.css در head اضافه کنید. تصویرها و ویدئو در ZIP واقعی هستند؛ برای این تمرین نیازی به دانلود فایل از سایت دیگر ندارید.

<link rel="stylesheet" href="solution.css">

پرسش های متداول

آیا width: 100% حجم فایل تصویر را کم می کند؟

خیر؛ اندازه نمایش را تغییر می دهد. برای انتخاب منبع مناسب از فایل های واقعی با srcset و sizes هماهنگ استفاده کنید.

آیا sizes عرض تصویر را تنظیم می کند؟

خیر؛ عرض نمایشی مورد انتظار را برای انتخاب منبع توصیف می کند. CSS همچنان اندازه نمایش را مشخص می کند.

برای حفظ تمام تصویر cover بهتر است یا contain؟

contain همه تصویر را نگه می دارد و ممکن است فضای خالی ایجاد کند؛ cover قاب را پر می کند و احتمال برش دارد.

آیا clamp نیاز به آزمایش بزرگ نمایی را حذف می کند؟

خیر؛ محدودیت ها و مقدار میانی باید با محتوای واقعی و تنظیمات کاربر بررسی شوند.

آیا ZIP ویدئو و فونت هم دارد؟

بله؛ سه اندازه تصویر، پوستر، ویدئوی محلی کوتاه، فونت یکان بخ، HTML، CSS و پاسخ تمرین داخل فایل هستند.

منابع فنی: تصاویر واکنش گرا در MDN، عنصر video و تابع clamp.

ادامه دوره: درس 42؛ ساخت منوی واکنش گرا با HTML و CSS همراه پروژه درس.