CSS @container: بررسی عمیق Container Queries

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

Container Queries چه هستند؟

Container Queries که با قانون @container تعریف می‌شوند، شبیه به media queries هستند اما به جای واکنش به اندازه viewport، به اندازه یا وضعیت یک عنصر *کانتینر* واکنش نشان می‌دهند. این بدان معناست که یک کامپوننت می‌تواند ظاهر خود را بر اساس فضای موجود در کانتینر والد خود، صرف نظر از اندازه کلی صفحه، تنظیم کند. این امر امکان رفتار واکنش‌گرای دقیق‌تر و آگاه از زمینه را فراهم می‌کند.

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

چرا از Container Queries استفاده کنیم؟

Container Queries چندین مزیت قابل توجه نسبت به media queries سنتی ارائه می‌دهند:

• واکنش‌گرایی در سطح کامپوننت: این ویژگی به شما امکان می‌دهد رفتار واکنش‌گرا را در سطح کامپوننت تعریف کنید، به جای اینکه به اندازه‌های کلی viewport تکیه کنید. این امر ماژولار بودن و قابلیت استفاده مجدد را ترویج می‌دهد.
• نگهداری بهبود یافته: با کپسوله کردن منطق واکنش‌گرا در کامپوننت‌ها، پیچیدگی CSS خود را کاهش داده و نگهداری آن را آسان‌تر می‌کنید.
• انعطاف‌پذیری بیشتر: Container Queries شما را قادر می‌سازند تا رابط‌های کاربری سازگارتر و آگاه از زمینه ایجاد کنید، که تجربه کاربری بهتری را در طیف وسیع‌تری از دستگاه‌ها و زمینه‌ها فراهم می‌کند. یک وب‌سایت چندزبانه را در نظر بگیرید؛ یک container query می‌تواند اندازه فونت را در یک کامپوننت تنظیم کند اگر زبانی با کلمات طولانی‌تر را تشخیص دهد، و اطمینان حاصل کند که متن از مرزهای خود خارج نمی‌شود.
• کاهش حجم CSS: به جای بازنویسی استایل‌های عمومی برای کامپوننت‌های خاص، کامپوننت رفتار واکنش‌گرای خود را مدیریت می‌کند که منجر به CSS تمیزتر و کارآمدتر می‌شود.

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

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

چندین مقدار ممکن برای container-type وجود دارد:

• size: کوئری‌های کانتینر به اندازه inline و block کانتینر واکنش نشان خواهند داد. این رایج‌ترین و همه‌کاره‌ترین گزینه است.
• inline-size: کوئری‌های کانتینر فقط به اندازه inline (عرض در حالت نوشتاری افقی) کانتینر واکنش نشان می‌دهند.
• normal: عنصر یک کانتینر کوئری نیست. این مقدار پیش‌فرض است.

در اینجا مثالی از نحوه تعریف یک کانتینر آورده شده است:

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

            

              
                Copy
              
            
          

همچنین، می‌توانید از ویژگی کوتاه‌نویس container برای تعریف همزمان container-type و container-name (که بعداً در مورد آن صحبت خواهیم کرد) استفاده کنید:

            .card-container {
  container: card / size; /* container-name: card, container-type: size */
}

            

              
                Copy
              
            
          

نوشتن Container Queries

هنگامی که یک کانتینر را تعریف کردید، می‌توانید از قانون @container برای نوشتن Container Queries استفاده کنید. سینتکس آن شبیه به media queries است:

            @container card (min-width: 300px) {
  .card {
    background-color: lightblue;
  }
}

            

              
                Copy
              
            
          

در این مثال، رنگ پس‌زمینه عنصر .card زمانی که کانتینر والد آن (با کلاس .card-container و container-type: size) حداقل ۳۰۰ پیکسل عرض داشته باشد، به آبی روشن تغییر می‌کند.

شما می‌توانید از هر یک از ویژگی‌های استاندارد media query در یک Container Query استفاده کنید، مانند min-width، max-width، min-height، max-height و غیره. همچنین می‌توانید چندین شرط را با استفاده از عملگرهای منطقی مانند and، or و not ترکیب کنید.

مثال: تطبیق اندازه فونت

فرض کنید یک عنوان در یک کامپوننت کارت دارید و می‌خواهید اندازه فونت آن را زمانی که کارت در یک کانتینر کوچک‌تر نمایش داده می‌شود، کاهش دهید:

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

.card h2 {
  font-size: 2em;
}

@container (max-width: 400px) {
  .card h2 {
    font-size: 1.5em;
  }
}

            

              
                Copy
              
            
          

در این حالت، زمانی که عرض کانتینر ۴۰۰ پیکسل یا کمتر باشد، اندازه فونت عنصر h2 به 1.5em کاهش می‌یابد.

نام‌گذاری کانتینرها

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

            .main-content {
  container: main-content / size;
}

.sidebar {
  container: sidebar / inline-size;
}

@container main-content (min-width: 700px) {
  /* Styles applied when the main-content container is at least 700px wide */
}

@container sidebar (min-inline-size: 200px) {
  /* Styles applied when the sidebar container is at least 200px wide */
}

            

              
                Copy
              
            
          

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

استفاده از واحدهای Container Query

Container Queries واحدهای جدیدی را معرفی می‌کنند که نسبت به اندازه کانتینر هستند:

• cqw: ۱٪ از عرض کانتینر.
• cqh: ۱٪ از ارتفاع کانتینر.
• cqi: ۱٪ از اندازه inline کانتینر (عرض در حالت نوشتاری افقی).
• cqb: ۱٪ از اندازه block کانتینر (ارتفاع در حالت نوشتاری افقی).
• cqmin: مقدار کوچک‌تر از بین cqi یا cqb.
• cqmax: مقدار بزرگ‌تر از بین cqi یا cqb.

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

            .card h2 {
  font-size: 5cqw;
}

            

              
                Copy
              
            
          

این امر تضمین می‌کند که عنوان همیشه یک رابطه بصری ثابت با اندازه کارت را حفظ می‌کند، صرف نظر از ابعاد مطلق آن.

مثال‌های عملی و موارد استفاده

بیایید چند مثال عملی از نحوه استفاده از Container Queries برای ایجاد رابط‌های کاربری سازگارتر و واکنش‌گرا را بررسی کنیم.

۱. ناوبری واکنش‌گرا

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

با Container Queries، می‌توانید این کار را بدون تکیه بر media queries عمومی انجام دهید.

            .nav-container {
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-toggle {
  display: none;
}

@container (max-inline-size: 600px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

            

              
                Copy
              
            
          

در این مثال، هنگامی که عرض .nav-container کمتر از ۶۰۰ پیکسل باشد، لینک‌های ناوبری پنهان شده و دکمه تغییر وضعیت ناوبری نمایش داده می‌شود.

۲. کارت‌های محصول سازگار

همانطور که قبلاً ذکر شد، کارت‌های محصول یک مورد استفاده عالی برای Container Queries هستند. شما می‌توانید طرح‌بندی و محتوای کارت را بر اساس فضای موجود در کانتینر آن تنظیم کنید.

            .product-card-container {
  container-type: size;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  margin-bottom: 10px;
}

.product-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-description {
  font-size: 0.9em;
  margin-bottom: 10px;
}

.product-price {
  font-weight: bold;
}

@container (max-width: 300px) {
  .product-image {
    display: none;
  }

  .product-description {
    display: none;
  }

  .product-title {
    font-size: 1em;
  }
}

            

              
                Copy
              
            
          

در این مثال، هنگامی که عرض .product-card-container کمتر از ۳۰۰ پیکسل باشد، تصویر و توضیحات محصول پنهان شده و اندازه فونت عنوان محصول کاهش می‌یابد.

۳. گریدهای تنظیم شونده پویا

Container Queries هنگام کار با طرح‌بندی‌های گرید بسیار مفید هستند. یک گرید که تصاویر را نمایش می‌دهد، برای مثال، می‌تواند تعداد ستون‌ها را بر اساس عرض موجود در کانتینری که در آن قرار گرفته است، تنظیم کند. این ممکن است به ویژه در سایت‌های تجارت الکترونیک یا صفحات نمونه کار مفید باشد.

            .grid-container {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
}

@container (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

            

              
                Copy
              
            
          

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

ملاحظات دسترسی‌پذیری

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

• HTML معنایی: از عناصر HTML معنایی برای ارائه ساختار واضح برای محتوای خود استفاده کنید. این به فناوری‌های کمکی کمک می‌کند تا هدف هر عنصر را درک کنند.
• کنتراست کافی: اطمینان حاصل کنید که کنتراست کافی بین رنگ متن و پس‌زمینه وجود دارد تا خواندن محتوای شما برای افراد دارای اختلالات بینایی آسان باشد. شما می‌توانید کنتراست را با استفاده از ابزارهایی مانند ابزار بررسی کنتراست WebAIM ارزیابی کنید.
• ناوبری با صفحه‌کلید: مطمئن شوید که تمام عناصر تعاملی از طریق ناوبری با صفحه‌کلید قابل دسترسی هستند. این برای کاربرانی که نمی‌توانند از ماوس استفاده کنند، ضروری است.
• نشانگرهای فوکوس: نشانگرهای فوکوس واضح و قابل مشاهده برای کاربران صفحه‌کلید فراهم کنید. این به آنها کمک می‌کند تا بفهمند کدام عنصر در حال حاضر انتخاب شده است.
• تصاویر واکنش‌گرا: از عنصر <picture> یا ویژگی srcset برای ارائه تصاویر واکنش‌گرا که برای اندازه‌های مختلف صفحه بهینه شده‌اند، استفاده کنید. این کار عملکرد را بهبود بخشیده و مصرف پهنای باند را کاهش می‌دهد.
• آزمایش با فناوری‌های کمکی: وب‌سایت خود را با فناوری‌های کمکی مانند صفحه‌خوان‌ها آزمایش کنید تا اطمینان حاصل شود که کاملاً قابل دسترس است.

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

پشتیبانی مرورگرها از Container Queries به طور کلی در مرورگرهای مدرن خوب است. شما می‌توانید وضعیت پشتیبانی فعلی را در وب‌سایت‌هایی مانند Can I use... بررسی کنید.

از اواخر سال ۲۰۲۴، اکثر مرورگرهای اصلی، از جمله Chrome، Firefox، Safari و Edge، از Container Queries پشتیبانی می‌کنند. با این حال، همیشه ایده خوبی است که آخرین به‌روزرسانی‌ها را بررسی کرده و اطمینان حاصل کنید که وب‌سایت شما در مرورگرها و دستگاه‌های مختلف آزمایش شده است.

بهترین شیوه‌ها برای استفاده از Container Queries

برای بهره‌برداری حداکثری از Container Queries، این بهترین شیوه‌ها را در نظر بگیرید:

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

اشتباهات رایج و نحوه اجتناب از آن‌ها

در حالی که Container Queries مزایای قابل توجهی را ارائه می‌دهند، برخی از اشتباهات رایج نیز وجود دارد که باید از آنها آگاه بود:

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

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

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

نتیجه‌گیری

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

با Container Queries آزمایش کنید، موارد استفاده مختلف را کاوش کنید و کشف کنید که چگونه می‌توانند گردش کار طراحی واکنش‌گرای شما را بهبود بخشند. آینده طراحی واکنش‌گرا اینجاست و توسط Container Queries قدرت گرفته است!

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

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

امکانات بی‌پایان هستند، پس Container Queries را بپذیرید و سطح بعدی طراحی واکنش‌گرا را باز کنید.