تقاطع کوئری کانتینر CSS: تسلط بر ترکیب‌های چندگانه کوئری کانتینر

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

درک قدرت کوئری‌های کانتینر

قبل از اینکه به تقاطع‌ها بپردازیم، بیایید اصول اساسی کوئری‌های کانتینر را مرور کنیم.

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

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

سینتکس پایه کوئری کانتینر

سینتکس پایه شامل تعریف یک کانتینر و سپس استفاده از قاعده @container برای اعمال استایل‌ها بر اساس اندازه آن است. در اینجا یک مثال ساده آورده شده است:

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

@container my-container (min-width: 600px) {
  .element {
    color: blue;
  }
}
            

              
                Copy
              
            
          

در این مثال:

• .container عنصر دربرگیرنده است.
• container: my-container / inline-size; این عنصر را به عنوان یک کانتینر با نام "my-container" تعریف می‌کند که `inline-size` (عرض در حالت نوشتاری افقی) خود را ردیابی می‌کند. شما همچنین می‌توانید از `block-size` (ارتفاع) استفاده کنید. استفاده تنها از `container: my-container` کوئری‌های اندازه را فقط پس از اعمال صریح مهار (containment)، مانند مهار طرح‌بندی، استایل یا حالت، فعال می‌کند که فراتر از محدوده کوئری‌های اندازه پایه است.
• @container my-container (min-width: 600px) استایل‌ها را به .element فقط زمانی اعمال می‌کند که عرض کانتینر حداقل ۶۰۰ پیکسل باشد.

تقاطع کوئری کانتینر چیست؟

تقاطع کوئری کانتینر شامل ترکیب چندین کوئری کانتینر برای هدف قرار دادن شرایط خاص است. به آن مانند استفاده از منطق "AND" فکر کنید. استایل‌ها فقط زمانی اعمال می‌شوند که تمام شرایط مشخص شده برآورده شوند. این امکان استایل‌دهی دقیق‌تر و زمینه‌ای‌تری را نسبت به یک کوئری کانتینر تکی فراهم می‌کند.

سناریویی را در نظر بگیرید که در آن می‌خواهید یک کامپوننت کارت فقط زمانی به شکل خاصی نمایش داده شود که:

1. عرض کانتینر حداقل ۴۰۰ پیکسل باشد.
2. ارتفاع کانتینر حداقل ۳۰۰ پیکسل باشد.

شما می‌توانید با استفاده از تقاطع کوئری کانتینر به این هدف برسید.

پیاده‌سازی تقاطع کوئری کانتینر

چندین راه برای پیاده‌سازی تقاطع کوئری کانتینر در CSS وجود دارد.

۱. استفاده از چندین قاعده @container (تودرتو)

ساده‌ترین رویکرد، تودرتو کردن قواعد @container است. این کار به طور مؤثری یک شرط "AND" ایجاد می‌کند. کوئری داخلی فقط در صورتی اعمال می‌شود که شرط کوئری خارجی برآورده شود.

            .container {
  container: card-container / inline-size block-size;
}

@container card-container (min-width: 400px) {
  @container card-container (min-height: 300px) {
    .card {
      background-color: lightgreen;
      padding: 1em;
    }
  }
}
            

              
                Copy
              
            
          

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

مزایا:

• درک و پیاده‌سازی آسان.
• مناسب برای تقاطع‌های ساده.

معایب:

• می‌تواند با شرایط زیاد، پرکلام و مدیریت آن دشوار شود.
• خوانایی با تودرتویی عمیق کاهش می‌یابد.

۲. استفاده از خصوصیات سفارشی CSS (متغیرها)

این رویکرد از خصوصیات سفارشی CSS (متغیرها) برای ذخیره مقادیر بولی بر اساس شرایط کوئری کانتینر استفاده می‌کند. سپس می‌توانید از این متغیرها برای اعمال شرطی استایل‌ها استفاده کنید.

            .container {
  container: card-container / inline-size block-size;
  --is-wide: 0;
  --is-tall: 0;
}

@container card-container (min-width: 400px) {
  .container {
    --is-wide: 1;
  }
}

@container card-container (min-height: 300px) {
  .container {
    --is-tall: 1;
  }
}

.card {
  background-color: white; /* Default background */
  padding: 0.5em; /* Default padding */
}

.card:has(~ .container[style*="--is-wide: 1"][style*="--is-tall: 1"]) {
  background-color: lightgreen;
  padding: 1em;
}
            

              
                Copy
              
            
          

نحوه کار آن به این صورت است:

1. ما دو خصوصیت سفارشی --is-wide و --is-tall را با مقدار 0 روی کانتینر مقداردهی اولیه می‌کنیم.
2. اولین کوئری کانتینر، اگر عرض کانتینر حداقل ۴۰۰ پیکسل باشد، --is-wide را به 1 تنظیم می‌کند.
3. دومین کوئری کانتینر، اگر ارتفاع کانتینر حداقل ۳۰۰ پیکسل باشد، --is-tall را به 1 تنظیم می‌کند.
4. در نهایت، از انتخابگر شبه‌کلاس :has() و انتخابگرهای ویژگی برای بررسی اینکه آیا هر دو --is-wide و --is-tall برابر با 1 هستند استفاده می‌کنیم. اگر چنین باشد، استایل‌های مورد نظر را به کارت اعمال می‌کنیم. این فرض می‌کند که .container و .card هم‌سطح هستند و .card قبل از .container قرار دارد. انتخابگر را مطابق با ساختار HTML خود تنظیم کنید. این انتخابگر ممکن است بسته به پیاده‌سازی خاص و پشتیبانی مرورگر از :has() نیاز به تنظیماتی برای سازگاری با مرورگرها داشته باشد. در صورت نیاز، استفاده از یک fallback یا polyfill را در نظر بگیرید.

مزایا:

• خلاصه‌تر از قواعد @container تودرتو، به ویژه با شرایط زیاد.
• خوانایی بهبود یافته.

معایب:

• نیاز به دانش پیشرفته‌تر CSS (خصوصیات سفارشی و انتخابگرهای ویژگی) دارد.
• به دلیل محاسبه و اعمال خصوصیات سفارشی، ممکن است کمی عملکرد کمتری نسبت به قواعد مستقیم @container داشته باشد.
• به شبه‌کلاس :has() متکی است که ممکن است در برخی مرورگرهای قدیمی‌تر پشتیبانی محدودی داشته باشد.

۳. استفاده از جاوا اسکریپت (Fallback/Enhancement)

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

1. تشخیص پشتیبانی از کوئری کانتینر.
2. اندازه‌گیری ابعاد کانتینر با استفاده از جاوا اسکریپت.
3. افزودن یا حذف کلاس‌های CSS بر اساس اندازه کانتینر.

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

• پشتیبانی از مرورگرهای قدیمی‌تری که به طور کامل از کوئری‌های کانتینر پشتیبانی نمی‌کنند.
• پیاده‌سازی منطق پیچیده‌ای که بیان آن در CSS دشوار یا غیرممکن است.
• تنظیم پویا استایل‌ها بر اساس تغییرات محتوای کانتینر.

مثال (مفهومی - نیاز به پیاده‌سازی کامل دارد):

            // Check for container query support (simplified)
const supportsContainerQueries = CSS.supports('container-type', 'inline-size');

if (!supportsContainerQueries) {
  // Fallback using JavaScript
  const container = document.querySelector('.container');
  const card = document.querySelector('.card');

  function updateCardStyle() {
    const width = container.offsetWidth;
    const height = container.offsetHeight;

    if (width >= 400 && height >= 300) {
      card.classList.add('card--large');
    } else {
      card.classList.remove('card--large');
    }
  }

  // Initial update
  updateCardStyle();

  // Update on resize (consider debouncing for performance)
  window.addEventListener('resize', updateCardStyle);
}
            

              
                Copy
              
            
          

مزایا:

• یک fallback برای مرورگرهای قدیمی‌تر فراهم می‌کند.
• امکان منطق پیچیده‌تر و تنظیمات پویا را فراهم می‌کند.

معایب:

• وابستگی به جاوا اسکریپت را اضافه می‌کند.
• پیاده‌سازی و نگهداری آن پیچیده‌تر است.
• اگر با دقت پیاده‌سازی نشود، می‌تواند بر عملکرد تأثیر بگذارد.

مثال‌های عملی از تقاطع کوئری کانتینر

بیایید چند مثال عملی از نحوه استفاده از تقاطع کوئری کانتینر در سناریوهای واقعی را بررسی کنیم.

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

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

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

            /* CSS (Conceptual) */
.nav-container {
  container: nav-container / inline-size;
}

@container nav-container (max-width: 600px) {
  @media (max-width: 768px) { /* Viewport width check */
    .nav-menu {
      display: none; /* Hide regular menu */
    }

    .hamburger-menu {
      display: block; /* Show hamburger menu */
    }
  }
}

            

              
                Copy
              
            
          

این مثال یک کوئری کانتینر را با یک کوئری رسانه‌ای سنتی ترکیب می‌کند تا یک رفتار واکنش‌گرای ظریف‌تر ایجاد کند. کوئری رسانه‌ای عرض ویوپورت را بررسی می‌کند و اطمینان می‌دهد که منوی همبرگری فقط در صفحه‌های کوچک‌تر نشان داده می‌شود. کوئری کانتینر عرض nav-container را بررسی می‌کند و به ناوبری اجازه می‌دهد حتی در صفحه‌های بزرگ‌تر نیز اگر کانتینر محدود باشد (مثلاً در یک نوار کناری) سازگار شود.

۲. سازگار کردن طرح‌بندی کارت‌ها

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

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

            /* CSS (Conceptual) */
.card-container {
  container: card-container / inline-size block-size;
}

@container card-container (min-width: 500px) {
  .card {
    display: flex; /* Side-by-side layout */
  }
}

@container card-container (min-width: 700px) {
  @container card-container (min-height: 400px) {
    .card-description {
      display: block; /* Show full description */
    }
  }
}

            

              
                Copy
              
            
          

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

۳. ستون‌های جدول واکنش‌گرا

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

            /* CSS (Conceptual) */
.table-container {
  container: table-container / inline-size;
  overflow-x: auto; /* Enable horizontal scrolling if needed */
}

@container table-container (min-width: 800px) {
  .table-column--details {
    display: table-cell; /* Show details column */
  }
}

@container table-container (min-width: 1000px) {
    .table-column--actions {
        display: table-cell; /* Show actions column if there is additional room */
    }
}

            

              
                Copy
              
            
          

خصوصیت overflow-x: auto; برای اطمینان از اینکه جدول می‌تواند به صورت افقی اسکرول شود زمانی که از عرض کانتینر فراتر می‌رود، حیاتی است. این کار از بریده شدن محتوا جلوگیری می‌کند. کلاس‌های ستون خاص (.table-column--details، .table-column--actions) باید به سلول‌های جدول مناسب (عناصر <td>) در HTML اعمال شوند.

بهترین شیوه‌ها برای تقاطع کوئری کانتینر

در اینجا چند بهترین شیوه برای به خاطر سپردن هنگام کار با تقاطع کوئری کانتینر آورده شده است:

1. ساده نگه دارید: از تقاطع‌های بیش از حد پیچیده خودداری کنید. هرچه شرایط بیشتری اضافه کنید، استدلال در مورد رفتار کامپوننت‌های شما دشوارتر می‌شود.
2. خوانایی را در اولویت قرار دهید: روش پیاده‌سازی را انتخاب کنید که برای تیم شما خواناترین و قابل نگهداری‌ترین باشد. به عنوان مثال، اگر استفاده از خصوصیات سفارشی CSS خوانایی را بهبود می‌بخشد، حتی با افزایش پیچیدگی، ممکن است انتخاب درستی باشد.
3. به طور کامل تست کنید: کامپوننت‌های خود را در اندازه‌های مختلف کانتینر تست کنید تا اطمینان حاصل کنید که طبق انتظار رفتار می‌کنند. از ابزارهای توسعه‌دهنده مرورگر برای شبیه‌سازی ابعاد مختلف کانتینر استفاده کنید.
4. عملکرد را در نظر بگیرید: به پیامدهای عملکردی توجه داشته باشید، به خصوص هنگام استفاده از fallbackهای جاوا اسکریپت یا انتخابگرهای پیچیده CSS. کد خود را برای شناسایی گلوگاه‌های بالقوه پروفایل کنید.
5. از HTML معنایی استفاده کنید: ساختار HTML مناسب برای دسترسی‌پذیری و قابلیت نگهداری حیاتی است. اطمینان حاصل کنید که HTML شما به خوبی شکل گرفته و از عناصر معنایی مناسب استفاده می‌کند.
6. کد خود را مستند کنید: منطق کوئری کانتینر خود را به وضوح مستند کنید تا درک و نگهداری آن برای توسعه‌دهندگان دیگر (و خود آینده‌تان) آسان‌تر شود.
7. Fallback ارائه دهید: برای مرورگرهای قدیمی‌تری که از کوئری‌های کانتینر پشتیبانی نمی‌کنند، با استفاده از کوئری‌های رسانه‌ای یا جاوا اسکریپت، تنزل تدریجی (graceful degradation) ارائه دهید.
8. از ابزارهای توسعه‌دهنده مرورگر بهره ببرید: ابزارهای توسعه‌دهنده مرورگرهای مدرن پشتیبانی عالی برای بازرسی و اشکال‌زدایی کوئری‌های کانتینر دارند. از این ابزارها برای تجسم نحوه سازگاری کامپوننت‌های خود با اندازه‌های مختلف کانتینر استفاده کنید.

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

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

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

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

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

• اندازه‌بندی متن: اطمینان حاصل کنید که متن در تمام اندازه‌های کانتینر خوانا باقی می‌ماند. از استفاده از اندازه‌های فونت ثابت خودداری کنید. استفاده از واحدهای نسبی مانند em یا rem را در نظر بگیرید.
• کنتراست رنگ: کنتراست رنگ کافی بین متن و پس‌زمینه را در تمام اندازه‌های کانتینر حفظ کنید.
• ناوبری با صفحه‌کلید: اطمینان حاصل کنید که تمام عناصر تعاملی از طریق ناوبری با صفحه‌کلید قابل دسترسی باقی می‌مانند. ترتیب تب باید در اندازه‌های مختلف کانتینر منطقی و سازگار باقی بماند.
• نشانگرهای فوکوس: نشانگرهای فوکوس واضح و قابل مشاهده برای عناصر تعاملی فراهم کنید.
• سازگاری با صفحه‌خوان: طراحی واکنش‌گرای خود را با صفحه‌خوان‌ها تست کنید تا اطمینان حاصل کنید که محتوا به روشی منطقی و قابل فهم ارائه می‌شود.

نتیجه‌گیری

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