یک فهرست کارت را می‌توان طوری ساخت که با کم شدن فضای کانتینر، ستون‌هایش کمتر شوند، بدون اینکه برای هر عرض صفحه یک breakpoint بنویسیم. این رفتار از قواعد خود چیدمان می‌آید: حداقل عرض قابل قبول کارت، فضای میان کارت‌ها و امکان تقسیم فضای باقی‌مانده. طراحی واکنش‌گرا بدون Media Query برای چنین مسائل مشخصی مفید است. تبدیل آن به قانون منع استفاده از query، تصمیم‌های لازم برای محتوا و دسترس‌پذیری را دشوار می‌کند.
پرسش اولیه این است که کدام ویژگی باید پیوسته تغییر کند و کدام رفتار در یک شرایط مشخص باید عوض شود. عرض کارت می‌تواند سیال باشد؛ تبدیل یک نوار ابزار پیچیده به ساختار دیگری ممکن است شرط روشن بخواهد. ابتدا رفتار مطلوب را توصیف کنید، سپس ابزار را انتخاب کنید. تعداد کمتر قواعد به‌تنهایی معیار کیفیت نیست؛ خوانایی، ترتیب محتوا و پایداری در فضای واقعی اهمیت دارند.
از اندازه محتوا شروع کنید
عرض مناسب یک کارت به عنوان، توضیح و کنترل‌های داخل آن وابسته است. اگر عنوان سه خط می‌شود یا دکمه‌ها از لبه بیرون می‌زنند، کوچک‌تر شدن کارت همیشه پذیرفتنی نیست. حداقل عرض را با محتوای واقعی تعیین کنید؛ متن کوتاه نمونه محدودیت را پنهان می‌کند. سپس اجازه بدهید تعداد ستون‌ها بر اساس فضای موجود تغییر کند، نه اینکه نام یک دستگاه را به یک عرض ثابت گره بزنید.
فضای والد نیز با عرض viewport یکسان نیست. کارت ممکن است داخل ستون کناری، پنل گفت‌وگو یا بخش اصلی قرار بگیرد. قواعد ذاتی Grid و Flexbox از فضای کانتینر استفاده می‌کنند و برای این تفاوت مفیدند. در عین حال، مقدارهایی بر اساس vw همچنان به viewport وابسته‌اند. استفاده از یک تابع جدید در CSS به‌خودی‌خود مؤلفه را مستقل از محیط نمی‌کند.
Grid چگونه تعداد ستون‌ها را تعیین می‌کند؟
در نمونه زیر، کانتینر cards یک Grid است و هر article با کلاس card فرزند مستقیم آن محسوب می‌شود. ترکیب repeat، auto-fit و minmax اجازه می‌دهد تعداد ستون‌های قابل جاگیری شکل بگیرد. حد پایین با min برابر کوچک‌ترِ صددرصد عرض و ۱۶rem است؛ بنابراین در فضای بسیار باریک، حداقل ثابت باعث سرریز اجباری نمی‌شود. فضای اضافی میان ستون‌های موجود تقسیم می‌شود.
مرجع grid-template-columns شکل تعریف trackها را توضیح می‌دهد. auto-fit و auto-fill رفتار کاملاً یکسانی ندارند: تفاوت آن‌ها در برخورد با trackهای خالی اهمیت پیدا می‌کند. اگر کارت‌ها کم باشند، انتخاب شما بر گسترده شدن آیتم‌های باقی‌مانده اثر می‌گذارد. به جای حفظ کردن یک خط CSS، رابطه تعداد محتوا و فضای قابل استفاده را در تصمیم چیدمان لحاظ کنید.
نمونه کامل با چهار کارت
کد را به نام cards.html ذخیره و به عنوان فایل HTML باز کنید. همه CSS داخل style همان فایل است؛ JavaScript، تصویر یا بسته خارجی ندارد. چهار کارت در markup وجود دارد و ترتیب آن‌ها همان ترتیب خواندن است. هیچ Media Query در نمونه نوشته نشده است. تعداد ستون‌ها عدد ثابت ندارد و بر اساس عرض فضای در دسترس تعیین می‌شود؛ در محیط باریک، کارت‌ها زیر هم قرار می‌گیرند.
<!doctype html>
<html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>کارت‌های سیال</title>
<style>
*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:#f1f4f7;color:#17243a;font-size:1rem;line-height:1.9}.shell{width:min(72rem,calc(100% - 2rem));margin-inline:auto;padding-block:2rem}h1{font-size:clamp(1.5rem,1rem + 2vw,2.5rem);line-height:1.6}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}.card{min-width:0;background:white;border:1px solid #cbd5e1;border-radius:.75rem;padding:1.25rem;overflow-wrap:anywhere}.card h2{margin-block:0 .5rem;font-size:1.2rem}.card p{margin:0}
</style></head><body><main class="shell"><h1>چهار موضوع برای مطالعه</h1><section class="cards" aria-label="موضوع‌ها">
<article class="card"><h2>ساختار محتوا</h2><p>محتوا را بر اساس نیاز خواننده دسته‌بندی کنید.</p></article>
<article class="card"><h2>عنوان‌های روشن</h2><p>عنوان باید موضوع و کاربرد مطلب را توضیح دهد.</p></article>
<article class="card"><h2>ترتیب خواندن</h2><p>ترتیب عناصر در سند با مسیر منطقی مطالعه هماهنگ باشد.</p></article>
<article class="card"><h2>متن بلندتر</h2><p>این کارت توضیح طولانی‌تری دارد تا معلوم شود افزایش محتوا نباید به ارتفاع ثابت و حذف بخش‌های ضروری متن منتهی شود.</p></article>
</section></main></body></html>
کلاس shell عرض کل محتوا را محدود می‌کند و حاشیه جانبی می‌سازد. کلاس cards مسئول تعداد ستون‌ها و فاصله میان آن‌هاست؛ card فقط ظاهر و محتوای هر آیتم را تنظیم می‌کند. این تفکیک باعث می‌شود تغییر فاصله یا حداقل عرض روی خود Grid انجام شود و با استایل داخلی کارت مخلوط نشود. مقدار min-width برابر صفر و شکستن واژه‌های طولانی از دو نوع سرریز رایج در محتوا جلوگیری می‌کنند.
Flexbox برای ردیف‌های قابل شکستن
اگر مسئله یک ردیف کنترل یا مجموعه برچسب‌هاست، Flexbox با امکان wrap می‌تواند انتخاب ساده‌تری باشد. اندازه پایه آیتم و اجازه رشد یا کوچک شدن تعیین می‌کند هر عنصر چه سهمی از فضا داشته باشد. تفاوت را از مسئله محتوا بفهمید: Grid برای رابطه ردیف و ستون مناسب است؛ Flexbox در یک محور تصمیم می‌گیرد. انتخاب بر اساس شهرت ابزار معمولاً به قواعد جبرانی بیشتری منتهی می‌شود.
در ردیف دکمه‌ها، شکستن خط باید همچنان ترتیب منطقی داشته باشد. اگر عمل اصلی در آخرین ردیف گم می‌شود، شاید ساختار کنترل‌ها نیاز به تغییر داشته باشد. عرض ثابت برای همه دکمه‌ها نیز می‌تواند با عنوان‌های فارسی بلند مشکل ایجاد کند. اجازه دادن به wrap بخشی از راه‌حل است، اما باید فاصله عمودی، هم‌ترازی و رفتار عنوان چندخطی را هم تعیین کنید.
clamp برای تغییر پیوسته اندازه
تابع clamp یک حد پایین، مقدار ترجیحی و حد بالا می‌گیرد. در عنوان نمونه، مقدار میانی ترکیبی از rem و vw است و اندازه در محدوده تعیین‌شده تغییر می‌کند. این ابزار برای فاصله و اندازه‌های سیال مفید است، ولی انتخاب عددها همچنان تصمیم طراحی می‌خواهد. تابع نمی‌داند عنوان در چه نقطه‌ای سخت خوانده می‌شود یا چه اندازه‌ای با متن بدنه هماهنگ است.
اندازه متن را صرفاً با واحد viewport تعریف نکنید. رفتار هنگام بزرگ‌نمایی و تغییر تنظیم اندازه قلم را در نظر بگیرید. محدودیت بالا و پایین می‌تواند رشد متن را محدود کند و باید با نیاز خواندن هماهنگ باشد. متن بدنه نمونه اندازه پایه و line-height مشخص دارد؛ همه نوشته‌ها برای نمایش حرکت سیال بزرگ و کوچک نشده‌اند. کاربرد تابع باید به مسئله‌ای واقعی پاسخ دهد، نه به نمایش توان CSS.
Container Query همچنان یک شرط است
Container Query را در فهرست «تکنیک‌های بدون query» قرار دادن دقیق نیست. این ابزار شرایط کانتینر را بررسی می‌کند و بر اساس آن قواعدی را اعمال می‌کند؛ فقط مرجع شرط با Media Query متفاوت است. وقتی مؤلفه در عرض کم به چیدمان دیگری نیاز دارد، این روش می‌تواند مناسب باشد. برای سازوکار و کاربرد آن، راهنمای CSS Container Queries ادامه مستقیم همین موضوع است.
اگر یک کارت همیشه فقط کوچک و بزرگ می‌شود، ممکن است قواعد ذاتی کافی باشند. اگر در فضای زیاد، اطلاعات جانبی کنار تصویر قرار می‌گیرد و در فضای کم زیر آن می‌آید، شرط مبتنی بر کانتینر مفهوم روشنی دارد. انتخاب را با این سؤال انجام دهید: آیا اندازه‌ها تغییر می‌کنند یا رابطه اجزای محتوا هم عوض می‌شود؟ پاسخ کمک می‌کند از پیچیده کردن بی‌دلیل CSS جلوگیری کنید.
ترتیب بصری را از ترتیب خواندن دور نکنید
با Grid و Flexbox می‌توان ظاهر آیتم‌ها را جابه‌جا کرد، اما ترتیب DOM برای بسیاری از تعامل‌ها همچنان اهمیت دارد. اگر کارت اول از نظر بصری جای دیگری است و focus ابتدا به آن می‌رود، استفاده با صفحه‌کلید گیج‌کننده می‌شود. برای چیدمان ساده، ترتیب طبیعی markup را نگه دارید. تغییر نمایشی ترتیب محتوا نیاز به دلیل و بررسی رابطه آن با خواندن و تعامل دارد.
مخفی کردن جزئیات در عرض کم نیز همیشه انتخاب خوبی نیست. اگر اطلاعات برای تصمیم لازم است، کاربر موبایل هم به آن نیاز دارد. بهتر است اولویت، چینش و میزان خلاصه‌سازی را تعیین کنید. فشرده کردن همه چیز در یک خط یا حذف توضیح، تنها برای رسیدن به ظاهر تمیز، می‌تواند استفاده را سخت کند. واکنش‌گرایی باید امکان انجام همان کار را در فضای محدود حفظ کند.
سرریز را با انواع داده بسنجید
عنوان بلند، رشته بدون فاصله، عدد بزرگ و متن چندزبانه رفتارهای متفاوت دارند. overflow-wrap می‌تواند جلوی بیرون زدن یک رشته را بگیرد، اما ممکن است خواندن شناسه را دشوار کند. برای بعضی داده‌ها، ناحیه اسکرول یا امکان کپی کردن انتخاب بهتری است. به هر مسئله سرریز با یک قاعده سراسری پاسخ ندهید. کارت خبر و جدول داده به رفتار متفاوتی نیاز دارند.
ارتفاع ثابت نیز می‌تواند نثر فارسی یا اندازه قلم بزرگ‌تر را قطع کند. در نمونه، کارت‌ها ارتفاع اجباری ندارند و محتوای اضافه در جریان طبیعی باقی می‌ماند. اگر هم‌ارتفاع بودن لازم است، روش آن باید متن کامل را حفظ کند. کوتاه‌سازی عنوان با ellipsis به معنی حل مشکل محتوا نیست؛ باید معلوم باشد نسخه کامل از چه راهی قابل دسترسی است و آیا برای تصمیم کاربر لازم است.
شرط‌های لازم را آگاهانه نگه دارید
ترجیحات کاربر مانند کاهش حرکت، حالت چاپ یا برخی نیازهای ساختاری ممکن است به Media Query نیاز داشته باشند. استفاده از آن‌ها شکست طراحی ذاتی محسوب نمی‌شود. قواعد بدون breakpoint برای بخش‌هایی مثل کارت‌ها هزینه نگهداری را کم می‌کنند؛ شرط‌های روشن برای رفتارهای دیگر همچنان قابل دفاع هستند. درباره هر قاعده بنویسید چه نیاز محتوا یا کاربر را برآورده می‌کند تا تصمیم بعدی قابل پیگیری باشد.
در تحویل نهایی، حداقل عرض کارت، فاصله‌ها، حداکثر عرض صفحه و رفتار متن بلند را توضیح دهید. توسعه‌دهنده باید بتواند با تغییر محتوا همان قرارداد را حفظ کند. یک چیدمان واکنش‌گرا زمانی قابل اتکا است که با داده واقعی جمع شود، خوانایی را حفظ کند و ترتیب تعامل آن روشن بماند. حذف query فقط یکی از نتیجه‌های احتمالی انتخاب قواعد مناسب است.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!