آموزش کار با Container Queries در CSS برای کامپوننت‌های فوق ریسپانسیو (کانتینر کوئری در CSS)

Container Queries چیست و چرا به آن نیاز داریم؟

تا همین چند وقت پیش، وقتی می‌خواستیم یه وب‌سایت رو برای نمایش تو دستگاه‌های مختلف بهینه کنیم، تنها راه چاره استفاده از Media Queries بود. Media Queries به ما اجازه میدادند بر اساس مشخصات کلی مرورگر (مثل عرض viewport یا رزولوشن صفحه)، استایل‌های مختلفی رو اعمال کنیم. مثلاً اگه صفحه نمایش زیر ۶۰۰ پیکسل بود، منوی سایت رو به یه آیکون همبرگری تبدیل می‌کردیم. این روش برای صفحات کلی خوب بود، اما یه مشکل اساسی داشت: کامپوننت‌ها!

تصور کن یه کارت محصول داری که هم تو صفحه اصلی وب‌سایت نمایش داده میشه، هم تو سایدبار، و هم شاید تو یه مودال (popup). هر کدوم از این مکان‌ها ممکنه عرض‌های متفاوتی داشته باشن. با Media Queries، کارت محصول فقط بر اساس سایز کلی صفحه تغییر می‌کرد. اگه viewport بزرگ بود، کارت تو سایدبار هم بزرگ نمایش داده میشد و ظاهرش به هم می‌ریخت، چون فقط به سایز کلی اهمیت می‌داد. اینجا بود که Container Queries وارد بازی شد.

Container Queries یا به اختصار CQ، به ما این امکان رو میده که استایل‌های یه المنت رو بر اساس سایز (عرض، ارتفاع یا حتی استایل) المنت والدش (parent) تغییر بدیم. به عبارت ساده‌تر، کامپپوننت‌های ما حالا می‌تونن بپرسن: “من الان تو یه ظرف بزرگم یا کوچیک؟” و بر اساس پاسخشون، خودشون رو تنظیم کنن. این یعنی هر کامپوننت می‌تونه رفتار ریسپانسیو مخصوص به خودش رو داشته باشه، بدون اینکه به بقیه صفحه کاری داشته باشه. این رویکرد رو “Component-Driven Responsive Design” یا “Container-Based Responsive Design” میگن که برای ساخت کدهای آماده و اسنیپت‌های واکنش‌گرا عالیه.

چرا CQ ضروریه؟

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

نحوه استفاده از Container Queries: گام به گام

استفاده از Container Queries خیلی سادست. فقط کافیه دو مرحله رو انجام بدی:

گام اول: تعریف کانتینر (Container Definition)

اولین کاری که باید بکنی، اینه که به مرورگر بگی کدوم المنت قراره “ظرف” باشه. این کار رو با ویژگی container-type انجام میدیم. این ویژگی دو مقدار اصلی می‌گیره:

• size: این المنت هم بر اساس عرض (width) و هم بر اساس ارتفاع (height) قابل کوئری گرفتن میشه. بهترین گزینه برای کامپوننت‌هایی که باید هم به عرض و هم به ارتفاع واکنش نشون بدن.
• inline-size: فقط بر اساس عرض (width) قابل کوئری گرفتنه. این رایج‌ترین و مفیدترین حالت برای اکثر سناریوهای ریسپانسیو کامپوننت‌هاست، چون بیشتر اوقات کامپوننت‌ها با تغییر عرض، خودشون رو تنظیم می‌کنن.

مثال: تعریف کانتینر

.my-container {
    container-type: inline-size; /* این المنت بر اساس عرضش قابل کوئری گرفتنه */
    container-name: card-container; /* اختیاری: یه اسم بهش میدیم برای وضوح بیشتر */
}

function copyCode(button) {
const codeBlock = button.nextElementSibling.querySelector(‘code’);
const textToCopy = codeBlock.innerText;
navigator.clipboard.writeText(textToCopy).then(() => {
button.innerText = ‘کپی شد!’;
setTimeout(() => { button.innerText = ‘کپی’; }, 2000);
}).catch(err => {
console.error(‘Failed to copy text: ‘, err);
});
}

ویژگی container-name هم اختیاریه، ولی خیلی به درد می‌خوره، مخصوصاً وقتی چند تا کانتینر تو هم تو هم داری (nested containers). با اسم‌گذاری، می‌تونی دقیقاً مشخص کنی که کوئری برای کدوم کانتینر اعمال بشه.

گام دوم: نوشتن کوئری (Writing the Query)

حالا که کانتینر رو تعریف کردیم، وقتشه استایل‌های مشروط رو برای المنت‌های داخلش بنویسیم. این کار با استفاده از قانون @container انجام میشه، که شبیه @media عمل می‌کنه:

مثال: کوئری ساده

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

.item {
    padding: 15px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

@container (min-width: 400px) {
    .item {
        font-size: 1.2em;
        padding: 20px;
        background-color: #e0f2f7; /* وقتی کانتینر بزرگ شد، رنگش هم عوض میشه */
    }
}

تو این مثال، المنت .item فقط زمانی استایل‌های داخل @container رو می‌گیره که عرض المنت .my-container حداقل ۴۰۰ پیکسل باشه. این یعنی اگه .my-container تو یه سایدبار کوچیک باشه (مثلاً ۳۰۰px)، .item همون استایل‌های اولیه رو داره، ولی اگه تو بخش اصلی صفحه باشه و عرضش به بالای ۴۰۰px برسه، استایل‌های جدید اعمال میشن.

کوئری با نام کانتینر

اگه کانتینرت رو نام‌گذاری کردی (با container-name)، می‌تونی تو کوئری هم از اسمش استفاده کنی. این کار برای جلوگیری از تداخل و شفافیت کد خیلی مفیده:

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

@container card-wrapper (min-width: 500px) {
    .item {
        display: flex;
        flex-direction: row; /* وقتی کانتینر بزرگ شد، آیتم‌ها کنار هم قرار می‌گیرن */
        justify-content: space-between;
    }
}

@container card-wrapper (max-width: 499px) {
    .item {
        flex-direction: column; /* وقتی کانتینر کوچیک شد، آیتم‌ها زیر هم میان */
    }
}

اینجا، المنت .item رفتار متفاوتی رو بر اساس عرض .card-wrapper داره. این انعطاف‌پذیری فوق‌العاده‌ای به ما میده.

مزایای بی‌نظیر Container Queries برای کامپوننت‌های مدرن

همونطور که تا اینجا متوجه شدی، CQ فقط یه قابلیت جدید نیست، یه تغییر پارادایم تو نحوه فکر کردن به طراحی ریسپانسیوه. بیاید چند تا از مهم‌ترین مزایاش رو مرور کنیم:

۱. طراحی ماژولار و مستقل کامپوننت‌ها

با CQ، هر کامپوننت می‌تونه خودش یه دنیای ریسپانسیو داشته باشه. دیگه لازم نیست نگران تداخل استایل‌ها یا پیچیدگی‌های Media Queryهای سراسری باشی. این یعنی می‌تونی یه کارت کاربری بسازی، یه دکمه، یه فرم یا هر چیزی که فکرش رو بکنی، و مطمئن باشی که تو هر سایزی، تو هر کانتینری، بهترین خودش رو نشون میده. این رویکرد به ویژه برای سیستم‌های طراحی (Design Systems) و کتابخانه‌های کامپوننت مثل React، Vue یا Angular فوق‌العادست.

۲. کاهش پیچیدگی CSS و بهبود خوانایی

یادت میاد چقدر طول می‌کشید تا یه استایل ریسپانسیو رو تو Media Queryهای مختلف پیدا کنی و تغییر بدی؟ با CQ، استایل‌های مربوط به ریسپانسیو بودن یه کامپوننت، دقیقاً کنار استایل‌های اصلی اون کامپوننت قرار می‌گیره. این نه تنها خوانایی کد رو به شدت بالا میبره، بلکه نگهداری و دیباگ کردنش رو هم آسون‌تر می‌کنه. انگار هر کامپوننت، CSS ریسپانسیو مخصوص به خودش رو داره.

۳. پشتیبانی بهتر از Flexbox و Grid Layout

Container Queries و Flexbox/Grid مثل پازلی هستن که کنار هم معرکه کار می‌کنن. می‌تونی یه کانتینر داشته باشی که چینش آیتم‌های داخلش (با استفاده از فلکس یا گرید) رو بر اساس عرض خودش تغییر بده. مثلاً اگه کانتینر پهن بود، آیتم‌ها رو تو دو ستون نشون بده و اگه باریک شد، همه رو تو یه ستون زیر هم بچینه. این ترکیب برای ساخت طرح‌بندی‌های پویا و پیچیده ضروریه.

۴. واکنش‌گرایی در ابعاد مختلف (موبایل، تبلت، لپ‌تاپ، تلویزیون)

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

کاربردها و سناریوهای واقعی

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

۱. کارت محصول (Product Card)

یه کارت محصول که شامل تصویر، عنوان، توضیحات، قیمت و دکمه “افزودن به سبد خرید” هست رو در نظر بگیر.

<div class="product-wrapper">
    <div class="product-card">
        <img src="product.jpg" alt="Product Image" class="product-image">
        <div class="product-details">
            <h4 class="product-title">عنوان محصول</h4>
            <p class="product-description">این یک توضیح کوتاه برای محصول است.</p>
            <span class="product-price">$29.99</span>
            <button class="add-to-cart">افزودن به سبد خرید</button>
        </div>
    </div>
</div>

.product-wrapper {
    container-type: inline-size;
    container-name: product-card-container;
    border: 1px solid #eee;
    margin: 10px;
    padding: 10px;
    background-color: #fff;
    /* این wrapper میتونه در layout های مختلفی قرار بگیره و سایزش تغییر کنه */
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-image {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.product-details {
    text-align: center;
}

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

.product-description {
    font-size: 0.9em;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines by default */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #e67e22;
    display: block;
    margin-top: 10px;
}

.add-to-cart {
    background-color: #3498db;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 0.95em;
}

/* Container Queries برای product-card-container */
@container product-card-container (min-width: 400px) {
    .product-card {
        flex-direction: row; /* وقتی کانتینر پهن شد، تصویر و جزئیات کنار هم */
        align-items: center;
        text-align: left;
        gap: 20px;
    }
    .product-image {
        max-width: 150px; /* تصویر کوچیکتر میشه */
    }
    .product-details {
        flex-grow: 1;
        text-align: left;
    }
    .product-title {
        font-size: 1.3em;
    }
    .product-description {
        -webkit-line-clamp: 3; /* توضیحات بیشتر */
    }
    .product-price {
        font-size: 1.4em;
        display: inline-block;
        margin-right: 15px;
    }
    .add-to-cart {
        padding: 10px 20px;
        font-size: 1em;
    }
}

@container product-card-container (min-width: 600px) {
    .product-title {
        font-size: 1.5em;
    }
    .product-image {
        max-width: 200px; /* تصویر بزرگتر */
    }
    .product-description {
        -webkit-line-clamp: 4; /* توضیحات بیشتر */
    }
}

تو این مثال، کارت محصول خودش رو با عرض .product-wrapper تطبیق میده. اگه .product-wrapper کوچیک باشه، تصویر و متن زیر هم قرار می‌گیرن، ولی اگه پهن بشه (مثلاً بالای ۴۰۰px)، تصویر و جزئیات محصول کنار هم قرار می‌گیرن. این همون جادویی که انتظارش رو داشتیم.

۲. ویجت اخبار یا بلاگ (News/Blog Widget)

یه ویجت که لیست آخرین اخبار رو نشون میده. این ویجت ممکنه هم تو سایدبار باشه، هم تو یه فوتر با عرض زیاد.

<div class="news-widget-wrapper">
    <h3>آخرین اخبار</h3>
    <div class="news-item">
        <img src="news1.jpg" alt="News Image">
        <div class="news-content">
            <h4>عنوان خبر اول</h4>
            <p>خلاصه‌ای از خبر جذاب و خواندنی اول...</p>
        </div>
    </div>
    <div class="news-item">
        <img src="news2.jpg" alt="News Image">
        <div class="news-content">
            <h4>عنوان خبر دوم</h4>
            <p>خلاصه‌ای از خبر جذاب و خواندنی دوم...</p>
        </div>
    </div>
</div>

.news-widget-wrapper {
    container-type: inline-size;
    container-name: news-widget;
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

.news-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    gap: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.news-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.news-content h4 {
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #2c3e50;
}

.news-content p {
    font-size: 0.9em;
    color: #777;
    line-height: 1.4;
}

@container news-widget (min-width: 350px) {
    .news-item {
        flex-direction: row; /* وقتی کانتینر پهن شد، تصویر و متن کنار هم */
        align-items: flex-start;
    }
    .news-item img {
        max-width: 100px;
        margin-right: 15px;
    }
}
@container news-widget (min-width: 500px) {
    .news-item img {
        max-width: 150px;
    }
    .news-content h4 {
        font-size: 1.2em;
    }
    .news-content p {
        font-size: 1em;
    }
}

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

ویژگی‌های پیشرفته و ملاحظات مهم

Units Based on Container (واحدهای وابسته به کانتینر)

شاید بدونی که CSS یه سری واحدهای وابسته به viewport داره مثل vw (viewport width) و vh (viewport height). حالا با Container Queries، ما واحدهای مشابهی داریم که به جای viewport، به کانتینر خودشون اشاره می‌کنن:

• cqw: ۱ درصد از عرض کانتینر (Container Query Width)
• cqh: ۱ درصد از ارتفاع کانتینر (Container Query Height)
• cqi: ۱ درصد از اندازه اینلاین کانتینر (inline size – معمولاً عرض)
• cqb: ۱ درصد از اندازه بلاک کانتینر (block size – معمولاً ارتفاع)
• cqmin: مقدار کوچکتر بین cqi و cqb
• cqmax: مقدار بزرگتر بین cqi و cqb

این واحدها فوق‌العاده کاربردی هستن، چون بهت اجازه میدن المنت‌های داخل کانتینر رو به صورت کاملاً پویا و متناسب با سایز کانتینر، اندازه‌گذاری کنی. مثلاً یه فونت سایز با 2cqi یعنی فونت سایز همیشه ۲ درصد از عرض کانتینر خواهد بود. این یعنی هرچی کانتینر کوچیک‌تر بشه، فونت هم کوچیک‌تر میشه و برعکس. دیگه لازم نیست تو هر @container یه فونت سایز جدید تعریف کنی.

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

.my-component {
    container-type: inline-size;
    padding: 1cqmin; /* padding 1 درصد از اندازه کوچکتر کانتینر */
}

.my-component h3 {
    font-size: 3cqi; /* فونت 3 درصد از عرض کانتینر */
    line-height: 1.2;
}

.my-component p {
    font-size: 1.5cqi; /* فونت 1.5 درصد از عرض کانتینر */
}

این واحدهای جدید برای ایجاد تایپوگرافی و spacing کاملاً پویا، ابزار قدرتمندی به حساب میان.

پشتیبانی مرورگرها (Browser Support)

خبر خوب اینه که Container Queries الان تقریباً توسط همه مرورگرهای مدرن (Chrome, Firefox, Edge, Safari) پشتیبانی میشه. این یعنی می‌تونی با خیال راحت ازش تو پروژه‌های جدیدت استفاده کنی. البته، همیشه بهتره با ابزارهایی مثل Can I Use سازگاری رو چک کنی.

تفاوت Container Queries با Media Queries: یه مقایسه ساده

برای اینکه این دو مفهوم کاملاً برات جا بیفته، یه مقایسه کوتاه بینشون انجام میدیم.

عیب‌یابی سریع (Troubleshooting)

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

۱. Container Queryهام کار نمیکنه! چرا؟

• تعریف کانتینر رو فراموش کردی؟ مطمئن شو المنت والدت container-type: inline-size; یا size; رو داره. اگه این ویژگی نباشه، کوئری هیچ تاثیری نداره.
• آیا المنت داخل کانتینر هست؟ CSS Selector باید المنت داخل کانتینر رو هدف قرار بده.
• تداخل با مدیا کوئری‌ها: اگه همزمان Media Query و Container Query داری، مطمئن شو که اولویت‌ها و تداخل‌ها رو درک کردی. معمولاً CQها چون خاص‌تر هستن، اولویت دارن.
• پشتیبانی مرورگر: هرچند الان گسترده شده، ولی اگه مرورگر خیلی قدیمی استفاده می‌کنی، ممکنه پشتیبانی نشه.

۲. المنت‌های داخل کانتینر، باعث تغییر سایز خود کانتینر میشن و یه حلقه بی‌نهایت ایجاد میشه!

این مشکل رو “Cyclical Dependency” یا “Size Containment Issue” میگن. اگه المنت‌های فرزند روی سایز کانتینر تاثیر بذارن و کانتینر هم بر اساس سایز خودش، استایل فرزندان رو تغییر بده، یه لوپ به وجود میاد. راه حلش اینه که به کانتینرت contain: layout; یا contain: size; یا contain: layout inline-size; رو اضافه کنی. این ویژگی به مرورگر میگه که سایز این المنت رو ایزوله کنه و از فرزندانش تاثیر نگیره یا فقط در جهت مشخصی تاثیر پذیر باشد. مثلاً:

.my-container {
    container-type: inline-size;
    container-name: my-panel;
    contain: layout inline-size; /* جلوگیری از لوپ بی‌نهایت */
    /* یا فقط contain: layout; اگر فقط مشکل layout داری */
}

۳. چگونه Container Queryها را در ابزار توسعه‌دهنده (DevTools) دیباگ کنم؟

اکثر مرورگرهای مدرن، ابزارهای خوبی برای دیباگ CQ ارائه میدن. تو Chrome DevTools، وقتی روی یه کانتینر کلیک می‌کنی، یه گزینه برای فعال کردن “Container badges” میبینی. این باعث میشه مرزهای کانتینرها مشخص بشن و می‌تونی اون‌ها رو Resize کنی و ببینی چطور المنت‌های داخلش واکنش نشون میدن. همچنین، تو پنل Styles، می‌تونی ببینی کدوم @container فعال شده.

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

جمع‌بندی و آینده ریسپانسیو وب

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

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