راهنمای هنری سطح مؤلفه با درخواست‌های کانتینر CSS

پرس و جوهای کانتینر (CQ) به ما این امکان را می دهد که سبک های یک جزء را طوری تغییر دهیم که با اندازه نزدیکترین ظرف مطابقت داشته باشد. با CQ، می‌توانیم ظاهر یک عنصر را بر اساس محل قرارگیری یک عنصر و میزان فضای افقی که اشغال می‌کند، تغییر دهیم.

بسته به فضایی که وجود دارد، بسیاری از مدل‌های طراحی می‌توانند تغییر کنند. بنابراین پرس و جوهای کانتینر را می توان برای چیزی بیشتر از جابجایی عناصر در یک طرح استفاده کرد. (آیا دارید دیده می شود جیدر حال حاضر نسخه ی نمایشی وجود دارد؟!) اما ما فقط می توانیم اگر بتوانیم از آنها استفاده کنیم، از درخواست های کانتینری بالقوه ای که به ما ارائه می دهند، استفاده کامل را ببریم همه جا می توان از یک پرس و جوی معمولی برای مشاهده رسانه استفاده کرد.

اکنون که درخواست های کانتینری در CSS داریم، آنها را در HTML نیز می خواهم. به طور خاص، می توانم ببینم که اگر در HTML برای تغییر یک تصویر در دسترس باشند، راحت تر خواهند بود source داخل ، دقیقاً همانطور که در حال حاضر پرس و جوهای رسانه مبتنی بر view هستند. این به ما این امکان را می دهد که به جای برش دادن تصاویر، آنها را برای تناسب با چیدمان هدایت کنیم.

تصاویر معمولاً برای انطباق با تغییرات چیدمان، مشابه سایر عناصر رابط کاربری طراحی می‌شوند. به دلیل ماهیت آنها به عنوان عناصر نادیده گرفته شده، احتمالاً حتی مناسب تر است که تصاویر با طرح بندی نسبت به سایر عناصر رابط کاربری تغییر کنند.

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

با استفاده از ترکیبی از object-fit و aspect-ratio امروزه می‌توانیم هر تصویری را در یک ظرف با نسبت ابعادی که در CSS خود مشخص می‌کنیم، قرار دهیم. و با درخواست‌های کانتینر در دسترس، می‌توانیم پیاده‌سازی انعطاف‌پذیرتری ایجاد کنیم که در آن تصویر با اندازه خود نقشه، بدون در نظر گرفتن اندازه ویوپورت سازگار می‌شود. این در حال حاضر یک پیشرفت بزرگ نسبت به پیاده سازی مبتنی بر viewport است.

با کمک aspect-ratio ویژگی در نسخه ی نمایشی زیر نسبت ابعاد تصویر را بر اساس عرض جزء نقشه تغییر دادم. و object-fit برای برش و مقیاس‌بندی تصویر به‌منظور قرار گرفتن در محدوده‌های محفظه آن در هر سه مورد استفاده می‌شود (زیرا نسبت تصویر پیش‌فرض با هیچ یک از نسبت‌های تصویری که در CSS مشخص کرده‌ام مطابقت ندارد).

از آنجایی که نسخه آزمایشی از درخواست‌های کانتینر استفاده می‌کند، که در حال حاضر فقط در Chrome Canary پشت پرچم پشتیبانی می‌شوند، ممکن است فقط یک نسبت ابعاد را در هر سه تغییر نقشه مشاهده کنید. در اینجا یک اسکرین شات از شکل ظاهری تصویر برای 3 عرض کارت مختلف آورده شده است:

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

اما برش و مقیاس گذاری یک تصویر اینطور نیست همیشه با این حال بهترین روش است، زیرا همه تصاویر را نمی توان یا نباید برش داد. گاهی اوقات برش یک تصویر فقط آن را خراب می کند.

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

بنابراین، اگر کنترلی بر روی تصویر(های) مورد استفاده داشته باشیم، جایگزین بهتر این است که تصویر را به طور کامل در این مورد تغییر دهیم. اگر از پرتره شخصی در سایت استفاده می کردم، ممکن است بخواهم از دو عکس مختلف از آن شخص استفاده کنم – یکی برای منظره و دیگری برای طرح بندی پرتره.

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

picture>
source
		media="(min-width: 1024px)"
srcset="desk--wide.jpg">
img
src="desk--portrait.jpg" alt="My desk setup">
picture>

شما می توانید کد بالا را در عمل در صفحه میز من مشاهده کنید. و در اینجا یک اسکرین شات از صفحه میز است که دو عکس مختلف از تنظیم میز من را در یک صفحه باریکتر و یک صفحه بازتر نشان می دهد:

اما نکته اینجاست: تصاویری که به آنها اشاره می کنید مربوط به اندازه درگاه نمایش است، نه مؤلفه ای که در آن تعبیه شده است. تصویر صفحه دسکتاپ من وقتی اندازه صفحه تغییر می کند درگاه دید به 1024 پیکسل می رسد. و این برای این مورد خاص خوب است. اما اگر تصاویر را در داخل اجزا هدایت می‌کنیم، می‌خواهیم که با اندازه کامپوننت مطابقت داشته باشند، نه درگاه دید. از این گذشته، این نوع رفتار پاسخگو است که ما برای مدت طولانی به آن نیاز داشتیم و اکنون Container Queries ارائه می دهد. گام بعدی امیدواریم درخواست های کانتینر در HTML باشد.

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

.card__media {
	aspect-ratio: 2 / 3;
	background-image: url("https://assets.codepen.io/9674/desk--portrait.jpg");
	background-size: 100% auto;
}

.container {
  container-type: inline-size;
}

@container (min-width: 480px) {
	
	.card__media {
		aspect-ratio: 16 / 9;
		background-image: url("https://assets.codepen.io/9674/desk--wide.jpg");
	}
}

به عبارت دیگر، تصاویر باید تصاویر غیر معنایی و تزئینی باشند. اگر تصویر شما بخشی از محتوای معنایی شما باشد، باز هم نمی تواند به درخواست ظرف پاسخ دهد. و البته، از آنجایی که تصویر یک تصویر پس زمینه است، باید از آن استفاده کنیم aspet-ratio روی عنصری که این تصویر به آن ضمیمه شده است، در غیر این صورت جمع می شود. در اینجا یک نسخه آزمایشی زنده دوباره با استفاده از درخواست های کانتینر ارائه شده است، بنابراین در حال حاضر فقط در Canary کار می کند:

و اسکرین شات از نتیجه:

افکار نهایی

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

بیایید به جلو بردن وب ادامه دهیم.