Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
پرسوجوهای کانتینر CSS را کاوش کنید، تکامل بعدی در طراحی واکنشگرا. بیاموزید چگونه کامپوننتهای تطبیقپذیر را بر اساس اندازه کانتینر، نه فقط اندازه نمای دید، ایجاد کنید.
طراحی واکنشگرا بیش از یک دهه است که سنگ بنای توسعه وب بوده است. به طور سنتی، ما برای انطباق چیدمانهای خود بر اساس اندازه نمای دید، به پرسوجوهای رسانه متکی بودهایم. با این حال، این رویکرد گاهی اوقات میتواند محدود کننده باشد، به خصوص هنگام کار با طرحهای پیچیده مبتنی بر کامپوننت. پرسوجوهای کانتینر CSS را وارد کنید - یک ویژگی قدرتمند جدید که به کامپوننتها اجازه میدهد تا بر اساس اندازه عنصر حاوی خود، نه فقط نمای دید، انطباق پیدا کنند.
پرسوجوهای کانتینر یک تغییر دهنده بازی هستند زیرا طراحی واکنشگرای مبتنی بر عنصر را فعال میکنند. به جای پرسیدن "اندازه صفحه چقدر است؟"، میتوانید بپرسید "این کامپوننت چقدر فضا در دسترس دارد؟" این امر دنیایی از امکانات را برای ایجاد کامپوننتهای واقعاً قابل استفاده مجدد و تطبیقپذیر باز میکند.
یک کامپوننت کارت را در نظر بگیرید که ممکن است در زمینههای مختلف ظاهر شود: یک نوار کناری باریک، یک بخش قهرمان عریض، یا یک گرید چند ستونی. با پرسوجوهای رسانه، شما نیاز به نوشتن قوانین خاص برای هر یک از این سناریوها بر اساس عرض نمای دید دارید. با پرسوجوهای کانتینر، کارت میتواند به طور هوشمندانه طرحبندی و سبک خود را بر اساس ابعاد کانتینر والد خود، صرف نظر از اندازه کلی صفحه، تنظیم کند.
پرسوجوهای کانتینر چندین مزیت کلیدی نسبت به پرسوجوهای رسانه سنتی ارائه میدهند:
بیایید به جنبههای عملی استفاده از پرسوجوهای کانتینر بپردازیم. اولین قدم تعریف یک کانتینر است. شما میتوانید این کار را با استفاده از ویژگی container-type روی عنصر والد انجام دهید:
ویژگی container-type چندین مقدار را میپذیرد:
size: پرسوجوهای کانتینر به هر دو بعد داخلی و بلوکی کانتینر واکنش نشان میدهند.inline-size: پرسوجوهای کانتینر فقط به بعد داخلی (عرض در حالتهای نوشتن افقی) کانتینر واکنش نشان میدهند. این رایجترین و اغلب مفیدترین گزینه است.block-size: پرسوجوهای کانتینر فقط به بعد بلوکی (ارتفاع در حالتهای نوشتن افقی) کانتینر واکنش نشان میدهند.normal: عنصر یک کانتینر پرسوجو نیست. این مقدار پیشفرض است.style: پرسوجوهای کانتینر به پرسوجوهای سبک و پرسوجوهای نام کانتینر (که بعداً پوشش داده میشوند) واکنش نشان میدهند و به شما امکان میدهند پرسوجوهای سفارشی تنظیم شده بر روی کانتینر را انجام دهید.در اینجا مثالی از تعریف یک کانتینر که به اندازه داخلی آن واکنش نشان میدهد آورده شده است:
.card-container {
container-type: inline-size;
}
شما همچنین میتوانید از ویژگی کوتاه شده container برای مشخص کردن هم container-type و هم container-name (که بعداً بحث خواهیم کرد) در یک اعلان واحد استفاده کنید:
.card-container {
container: card / inline-size;
}
در این مورد، 'card' نام کانتینر است.
پس از تعریف یک کانتینر، میتوانید از قانون at-rule @container برای نوشتن پرسوجوهای خود استفاده کنید. نحو آن شبیه پرسوجوهای رسانه است، اما به جای هدف قرار دادن ابعاد نمای دید، ابعاد کانتینر را هدف قرار میدهید:
@container card (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
در این مثال، ما "card" کانتینر را هدف قرار میدهیم و زمانی که عرض کانتینر حداقل 400 پیکسل است، سبکهایی را برای عناصر .card، .card__image و .card__content اعمال میکنیم. توجه داشته باشید که `card` قبل از `(min-width: 400px)`. این زمانی حیاتی است که کانتینر خود را با استفاده از `container-name` یا ویژگی کوتاه شده `container` نامگذاری کردهاید.
اگر کانتینر خود را نامگذاری نکردهاید، میتوانید نام کانتینر را حذف کنید:
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
شما میتوانید از همان طیف ویژگیهای رسانهای که در پرسوجوهای رسانه موجود است، مانند min-width، max-width، min-height، max-height و جهتگیری استفاده کنید.
نامگذاری کانتینرهای شما میتواند مفید باشد، به خصوص هنگام کار با کانتینرهای تودرتو یا چیدمانهای پیچیده. شما میتوانید با استفاده از ویژگی container-name نامی را به یک کانتینر اختصاص دهید:
.card-container {
container-name: card;
container-type: inline-size;
}
سپس، در پرسوجوهای کانتینر خود، میتوانید کانتینر را با نام آن هدف قرار دهید:
@container card (min-width: 400px) {
/* سبکها برای کانتینر 'card' */
}
پرسوجوهای سبک کانتینر به شما امکان میدهند به جای اندازه کانتینر، به سبک آن واکنش نشان دهید. این به ویژه هنگام ترکیب با خصوصیات سفارشی قدرتمند است. ابتدا، باید کانتینر خود را با container-type: style تعریف کنید:
.component-container {
container-type: style;
}
سپس میتوانید از @container style(--theme: dark) برای پرسوجو مقدار خصوصیت سفارشی --theme استفاده کنید:
.component-container {
--theme: light;
}
@container style(--theme: dark) {
.component {
background-color: black;
color: white;
}
}
این به کامپوننتهای شما امکان میدهد بر اساس پیکربندی که از طریق CSS و نه اندازه نمای دید تنظیم شده است، انطباق پیدا کنند. این امکانات عالی برای تمبندی و سبکدهی پویا را باز میکند.
بیایید به چند نمونه ملموس از نحوه استفاده از پرسوجوهای کانتینر در سناریوهای دنیای واقعی نگاه کنیم:
یک کامپوننت کارت را تصور کنید که اطلاعات محصول را نمایش میدهد. در یک کانتینر باریک، ما ممکن است بخواهیم تصویر و محتوا را به صورت عمودی روی هم قرار دهیم. در یک کانتینر عریضتر، میتوانیم آنها را در کنار هم نمایش دهیم.
HTML:
CSS:
.card-container {
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 16px;
}
.card__image {
width: 100%;
margin-bottom: 16px;
}
.card__content {
width: 100%;
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
margin-bottom: 0;
}
.card__content {
width: 50%;
}
}
در این مثال، کارت ابتدا تصویر و محتوا را به صورت عمودی روی هم قرار میدهد. هنگامی که عرض کانتینر به 400 پیکسل میرسد، کارت به چیدمان افقی تغییر میکند.
یک منوی ناوبری را در نظر بگیرید که نیاز به انطباق بر اساس فضای موجود دارد. در یک کانتینر باریک (به عنوان مثال، یک نوار کناری موبایل)، ما ممکن است بخواهیم موارد منو را در یک لیست عمودی نمایش دهیم. در یک کانتینر عریضتر (به عنوان مثال، یک سربرگ دسکتاپ)، میتوانیم آنها را به صورت افقی نمایش دهیم.
HTML:
CSS:
.nav-container {
container-type: inline-size;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav__item {
margin-bottom: 8px;
}
.nav__item a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
@container (min-width: 600px) {
.nav {
display: flex;
}
.nav__item {
margin-right: 16px;
margin-bottom: 0;
}
.nav__item a {
display: inline-block;
}
}
در این مثال، منوی ناوبری ابتدا موارد را در یک لیست عمودی نمایش میدهد. هنگامی که عرض کانتینر به 600 پیکسل میرسد، منو به چیدمان افقی تغییر میکند.
یک چیدمان مقاله را تصور کنید که بسته به محل قرارگیری آن نیاز به انطباق دارد. اگر در یک بخش پیشنمایش کوچک باشد، تصویر باید بالای متن قرار گیرد. اگر مقاله اصلی باشد، تصویر میتواند در کنار باشد.
HTML
Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
CSS
.article-container {
container-type: inline-size;
}
.article {
display: flex;
flex-direction: column;
}
.article-image {
width: 100%;
margin-bottom: 10px;
}
.article-content {
width: 100%;
}
@container (min-width: 768px) {
.article {
flex-direction: row;
}
.article-image {
width: 40%;
margin-right: 20px;
margin-bottom: 0;
}
.article-content {
width: 60%;
}
}
پشتیبانی مرورگر برای پرسوجوهای کانتینر اکنون در مرورگرهای مدرن، از جمله کروم، فایرفاکس، سافاری و اج، عالی است. مهم است که Can I Use را برای آخرین اطلاعات پشتیبانی مرورگر بررسی کنید، زیرا ویژگیها و جزئیات پیادهسازی میتوانند تکامل یابند.
در حالی که پرسوجوهای کانتینر یک جایگزین قدرتمند برای پرسوجوهای رسانه ارائه میدهند، درک اینکه هر رویکرد چه زمانی مناسبتر است، مهم است.
در بسیاری از موارد، شما احتمالاً ترکیبی از هر دو پرسوجوهای رسانه و کانتینر را استفاده خواهید کرد. از پرسوجوهای رسانه برای تعیین چیدمان کلی برنامه خود استفاده کنید، و سپس از پرسوجوهای کانتینر برای تنظیم دقیق ظاهر و رفتار کامپوننتهای جداگانه در آن چیدمان استفاده کنید.
پرسوجوهای کانتینر CSS یک گام مهم به جلو در تکامل طراحی واکنشگرا هستند. با فعال کردن واکنشگرایی مبتنی بر عنصر، آنها توسعهدهندگان را قادر میسازند کامپوننتهای انعطافپذیرتر، قابل استفاده مجدد و قابل نگهداری بیشتری ایجاد کنند. با بهبود مداوم پشتیبانی مرورگر، پرسوجوهای کانتینر آماده هستند تا به یک ابزار ضروری در زرادخانه هر توسعهدهنده وب تبدیل شوند.
هنگام پیادهسازی پرسوجوهای کانتینر برای مخاطبان جهانی، موارد زیر را در نظر بگیرید:
inline-start و inline-end به جای ویژگیهای فیزیکی مانند left و right استفاده کنید.em، rem) استفاده کنید تا اطمینان حاصل شود که متن شما به طور مناسب مقیاسبندی میشود.پرسوجوهای کانتینر CSS ابزاری قدرتمند برای ساخت برنامههای وب واقعاً واکنشگرا و تطبیقپذیر هستند. با پذیرش طراحی واکنشگرای مبتنی بر عنصر، میتوانید کامپوننتهایی ایجاد کنید که به طور یکپارچه با زمینههای مختلف تطبیق پیدا میکنند، کد شما را ساده میکنند و تجربه کاربری کلی را بهبود میبخشند. با رشد پشتیبانی مرورگر، پرسوجوهای کانتینر آماده هستند تا به بخشی اساسی از توسعه وب مدرن تبدیل شوند. این فناوری را بپذیرید، قابلیتهای آن را آزمایش کنید و سطح جدیدی از انعطافپذیری را در طرحهای واکنشگرای خود باز کنید. این رویکرد قابلیت استفاده مجدد کامپوننت، قابلیت نگهداری و فرآیند طراحی بصریتر را امکانپذیر میکند و آن را به یک دارایی ارزشمند برای توسعهدهندگان فرانتاند در سراسر جهان تبدیل میکند. انتقال به پرسوجوهای کانتینر، رویکردی متمرکزتر بر کامپوننت به طراحی را تشویق میکند که منجر به تجربههای وب قویتر و تطبیقپذیرتر برای کاربران در سراسر جهان میشود.