M

MLOG

فارسی

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

کوئری‌های کانتینر در Tailwind CSS: طراحی واکنش‌گرا مبتنی بر المان

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

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

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

مزایای کوئری‌های کانتینر

راه‌اندازی کوئری‌های کانتینر با Tailwind CSS

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

استفاده از پلاگین `tailwindcss-container-queries`

پلاگین `tailwindcss-container-queries` راهی مناسب برای ادغام کوئری‌های کانتینر در جریان کاری Tailwind CSS شما ارائه می‌دهد. برای شروع، باید این پلاگین را نصب کنید:

npm install tailwindcss-container-queries

سپس، پلاگین را به فایل `tailwind.config.js` خود اضافه کنید:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

این پلاگین به طور خودکار واریانت‌های جدیدی به کلاس‌های Tailwind CSS شما اضافه می‌کند که به شما امکان می‌دهد استایل‌ها را بر اساس اندازه‌های کانتینر اعمال کنید. به عنوان مثال، می‌توانید از `cq-sm:text-lg` برای اعمال اندازه متن بزرگتر زمانی که کانتینر حداقل به اندازه small تعریف شده در پیکربندی شما باشد، استفاده کنید.

پیکربندی اندازه‌های کانتینر

این پلاگین به شما اجازه می‌دهد تا اندازه‌های کانتینر سفارشی را در فایل `tailwind.config.js` خود تعریف کنید. به طور پیش‌فرض، مجموعه‌ای از اندازه‌های از پیش تعریف شده را ارائه می‌دهد. شما می‌توانید این اندازه‌ها را برای مطابقت با نیازهای طراحی خاص خود سفارشی کنید. در اینجا یک مثال آورده شده است:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      containerQueries: {
        'xs': '200px',
        'sm': '480px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
      },
    },
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

در این پیکربندی، ما پنج اندازه کانتینر تعریف کرده‌ایم: `xs`، `sm`، `md`، `lg` و `xl` که هر کدام با عرض خاصی مطابقت دارند. شما می‌توانید اندازه‌های بیشتری اضافه کنید یا اندازه‌های موجود را برای مطابقت با نیازهای پروژه خود تغییر دهید.

پیاده‌سازی کوئری‌های کانتینر در Tailwind CSS

حالا که پلاگین را راه‌اندازی کرده‌اید، بیایید بررسی کنیم که چگونه از کوئری‌های کانتینر در کامپوننت‌های Tailwind CSS خود استفاده کنیم.

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

ابتدا، باید مشخص کنید کدام المان به عنوان کانتینر برای کوئری‌های شما عمل خواهد کرد. این کار با افزودن کلاس `container-query` به المان انجام می‌شود. همچنین می‌توانید با استفاده از `container-[name]` (مثلاً `container-card`) یک نام برای کانتینر مشخص کنید. این نام به شما امکان می‌دهد در صورتی که چندین کانتینر در یک کامپوننت داشته باشید، کانتینرهای خاصی را هدف قرار دهید.

<div class="container-query container-card">
  <!-- Content of the component -->
</div>

اعمال استایل‌ها بر اساس اندازه کانتینر

پس از تعریف کانتینر، می‌توانید از واریانت‌های `cq-[size]:` برای اعمال استایل‌ها بر اساس عرض کانتینر استفاده کنید. به عنوان مثال، برای تغییر اندازه متن بر اساس اندازه کانتینر، می‌توانید از کد زیر استفاده کنید:

<div class="container-query container-card p-4 bg-gray-100 rounded-lg shadow-md"
     >
  <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
  >عنوان واکنش‌گرا</h2>
  <p class="text-gray-700 cq-sm:text-lg"
  >این پاراگرافی است که با اندازه کانتینر تطبیق پیدا می‌کند. این کامپوننت ظاهر خود را بر اساس اندازه کانتینرش تنظیم خواهد کرد.
  </p>
</div>

در این مثال، عنوان به طور پیش‌فرض `text-xl` خواهد بود، زمانی که کانتینر حداقل به اندازه `sm` باشد `text-2xl` و زمانی که کانتینر حداقل به اندازه `md` باشد `text-3xl` می‌شود. اندازه متن پاراگراف نیز زمانی که کانتینر حداقل به اندازه `sm` باشد به `text-lg` تغییر می‌کند.

مثال: یک کامپوننت کارت واکنش‌گرا

بیایید یک مثال کامل‌تر از یک کامپوننت کارت واکنش‌گرا ایجاد کنیم که لی‌آوت خود را بر اساس اندازه کانتینر تطبیق می‌دهد.

<div class="container-query container-card p-4 bg-white rounded-lg shadow-md flex flex-col cq-md:flex-row items-center"
     >
  <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="w-24 h-24 rounded-full mb-4 cq-md:mb-0 cq-md:mr-4">
  <div class="text-center cq-md:text-left"
  >
    <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
    >کارت واکنش‌گرا</h2>
    <p class="text-gray-700 cq-sm:text-lg"
    >این کامپوننت ظاهر خود را بر اساس اندازه کانتینرش تنظیم می‌کند. تصویر و متن بسته به فضای موجود به طور متفاوتی تراز می‌شوند.
    </p>
    <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
    >بیشتر بدانید</a>
  </div>
</div>

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

تکنیک‌های پیشرفته کوئری کانتینر

فراتر از کوئری‌های مبتنی بر اندازه پایه، کوئری‌های کانتینر قابلیت‌های پیشرفته‌تری را نیز ارائه می‌دهند.

استفاده از نام‌های کانتینر

شما می‌توانید با استفاده از کلاس `container-[name]` به کانتینرهای خود نام اختصاص دهید. این به شما امکان می‌دهد تا کانتینرهای خاصی را در یک سلسله مراتب کامپوننت هدف قرار دهید. برای مثال:

<div class="container-query container-primary">
  <div class="container-query container-secondary">
    <p class="cq-primary-sm:text-lg cq-secondary-md:text-xl">این متن با هر دو کانتینر تطبیق پیدا می‌کند.</p>
  </div>
</div>

در این مثال، اندازه متن زمانی که `container-primary` حداقل به اندازه `sm` باشد `text-lg` و زمانی که `container-secondary` حداقل به اندازه `md` باشد `text-xl` خواهد بود.

کوئری از استایل‌های کانتینر

برخی از پیاده‌سازی‌های پیشرفته کوئری کانتینر به شما امکان می‌دهند تا از استایل‌های خود کانتینر کوئری بگیرید. این می‌تواند برای تطبیق کامپوننت‌ها بر اساس رنگ پس‌زمینه کانتینر، اندازه فونت یا سایر استایل‌ها مفید باشد. با این حال، این قابلیت به طور بومی توسط پلاگین `tailwindcss-container-queries` پشتیبانی نمی‌شود و ممکن است به CSS سفارشی یا یک پلاگین دیگر نیاز داشته باشد.

کار با لی‌آوت‌های پیچیده

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

بهترین شیوه‌ها برای استفاده از کوئری‌های کانتینر

برای اطمینان از استفاده مؤثر و قابل نگهداری از کوئری‌های کانتینر، بهترین شیوه‌های زیر را در نظر بگیرید:

ملاحظات جهانی برای طراحی واکنش‌گرا

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

نمونه‌هایی از طراحی واکنش‌گرای جهانی

در اینجا چند نمونه از چگونگی استفاده از کوئری‌های کانتینر برای ایجاد طراحی‌های واکنش‌گرای سازگار با مخاطبان جهانی آورده شده است:

نتیجه‌گیری

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

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

کوئری‌های کانتینر در Tailwind CSS: طراحی واکنش‌گرا مبتنی بر المان برای وب‌سایت‌های مدرن | MLOG