۳۰ مرداد ۱۴۰۴فارسی

پرس‌وجوهای کانتینر CSS را کاوش کنید، تکامل بعدی در طراحی واکنش‌گرا. بیاموزید چگونه کامپوننت‌های تطبیق‌پذیر را بر اساس اندازه کانتینر، نه فقط اندازه نمای دید، ایجاد کنید.

پرس‌وجوهای کانتینر CSS: انقلابی در طراحی واکنش‌گرا مبتنی بر عنصر

طراحی واکنش‌گرا بیش از یک دهه است که سنگ بنای توسعه وب بوده است. به طور سنتی، ما برای انطباق چیدمان‌های خود بر اساس اندازه نمای دید، به پرس‌وجوهای رسانه متکی بوده‌ایم. با این حال، این رویکرد گاهی اوقات می‌تواند محدود کننده باشد، به خصوص هنگام کار با طرح‌های پیچیده مبتنی بر کامپوننت. پرس‌وجوهای کانتینر CSS را وارد کنید - یک ویژگی قدرتمند جدید که به کامپوننت‌ها اجازه می‌دهد تا بر اساس اندازه عنصر حاوی خود، نه فقط نمای دید، انطباق پیدا کنند.

پرس‌وجوهای کانتینر CSS چیستند؟

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

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

چرا از پرس‌وجوهای کانتینر استفاده کنیم؟

پرس‌وجوهای کانتینر چندین مزیت کلیدی نسبت به پرس‌وجوهای رسانه سنتی ارائه می‌دهند:

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

نحوه پیاده‌سازی پرس‌وجوهای کانتینر CSS

بیایید به جنبه‌های عملی استفاده از پرس‌وجوهای کانتینر بپردازیم. اولین قدم تعریف یک کانتینر است. شما می‌توانید این کار را با استفاده از ویژگی container-type روی عنصر والد انجام دهید:

1. تعریف کانتینر

ویژگی 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' نام کانتینر است.

2. نوشتن پرس‌وجوهای کانتینر

پس از تعریف یک کانتینر، می‌توانید از قانون 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 و جهت‌گیری استفاده کنید.

3. نام کانتینرها

نام‌گذاری کانتینرهای شما می‌تواند مفید باشد، به خصوص هنگام کار با کانتینرهای تودرتو یا چیدمان‌های پیچیده. شما می‌توانید با استفاده از ویژگی container-name نامی را به یک کانتینر اختصاص دهید:


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

سپس، در پرس‌وجوهای کانتینر خود، می‌توانید کانتینر را با نام آن هدف قرار دهید:


@container card (min-width: 400px) {
  /* سبک‌ها برای کانتینر 'card' */
}

4. پرس‌وجوهای سبک

پرس‌وجوهای سبک کانتینر به شما امکان می‌دهند به جای اندازه کانتینر، به سبک آن واکنش نشان دهید. این به ویژه هنگام ترکیب با خصوصیات سفارشی قدرتمند است. ابتدا، باید کانتینر خود را با 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 و نه اندازه نمای دید تنظیم شده است، انطباق پیدا کنند. این امکانات عالی برای تم‌بندی و سبک‌دهی پویا را باز می‌کند.

نمونه‌های عملی پرس‌وجوهای کانتینر

بیایید به چند نمونه ملموس از نحوه استفاده از پرس‌وجوهای کانتینر در سناریوهای دنیای واقعی نگاه کنیم:

مثال 1: یک کامپوننت کارت

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

HTML:



  
    
    
      Product Title
      Product description goes here.
      Learn More

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 پیکسل می‌رسد، کارت به چیدمان افقی تغییر می‌کند.

مثال 2: یک منوی ناوبری

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

HTML:



  
    Home
    Products
    Services
    About
    Contact

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 پیکسل می‌رسد، منو به چیدمان افقی تغییر می‌کند.

مثال 3: چیدمان مقاله با تصویر ویژه

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

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 آگاه باشید. در صورت بروز رفتار سبکی غیرمنتظره از ابزارهای ویژگی CSS استفاده کنید.
بهبود تدریجی: استفاده از پرس‌وجوهای کانتینر را به عنوان یک بهبود تدریجی در نظر بگیرید. یک چیدمان پایه ارائه دهید که بدون پرس‌وجوهای کانتینر به خوبی کار کند، و سپس از پرس‌وجوهای کانتینر برای بهبود چیدمان برای مرورگرهایی که از آن‌ها پشتیبانی می‌کنند استفاده کنید.
سیستم‌های طراحی: پرس‌وجوهای کانتینر به ویژه برای استفاده در سیستم‌های طراحی مناسب هستند. آن‌ها به شما امکان می‌دهند کامپوننت‌های قابل استفاده مجدد ایجاد کنید که به راحتی می‌توانند در زمینه‌های مختلف برنامه شما تطبیق پیدا کنند.

پرس‌وجوهای کانتینر در مقابل پرس‌وجوهای رسانه: چه زمانی از کدام استفاده کنیم؟

در حالی که پرس‌وجوهای کانتینر یک جایگزین قدرتمند برای پرس‌وجوهای رسانه ارائه می‌دهند، درک اینکه هر رویکرد چه زمانی مناسب‌تر است، مهم است.

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

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

آینده طراحی واکنش‌گرا

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

ملاحظات جهانی

هنگام پیاده‌سازی پرس‌وجوهای کانتینر برای مخاطبان جهانی، موارد زیر را در نظر بگیرید:

جهت متن: اطمینان حاصل کنید که پرس‌وجوهای کانتینر شما با هر دو جهت متن از چپ به راست (LTR) و از راست به چپ (RTL) به درستی کار می‌کنند. از ویژگی‌های منطقی مانند inline-start و inline-end به جای ویژگی‌های فیزیکی مانند left و right استفاده کنید.
اندازه فونت: زبان‌های مختلف ممکن است برای خوانایی بهینه به اندازه‌های فونت متفاوتی نیاز داشته باشند. از اندازه‌های فونت نسبی (مانند em، rem) استفاده کنید تا اطمینان حاصل شود که متن شما به طور مناسب مقیاس‌بندی می‌شود.
طول محتوا: برخی از زبان‌ها ممکن است برای بیان همان اطلاعات به فضای بیشتری نسبت به انگلیسی نیاز داشته باشند. مطمئن شوید که چیدمان‌های خود را با زبان‌های مختلف تست می‌کنید تا اطمینان حاصل شود که کامپوننت‌های شما می‌توانند طول‌های مختلف محتوا را جای دهند.
قراردادهای فرهنگی: هنگام طراحی کامپوننت‌های خود، به قراردادهای فرهنگی توجه کنید. به عنوان مثال، قرارگیری تصاویر و متن ممکن است در فرهنگ‌های مختلف متفاوت باشد.

نتیجه‌گیری

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