طراحی ریسپانسیو بدون بریکپوینت
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
بریکپوینتها از اون روزی که وب روی موبایل هم اجرا شد، به یکی از اصلیترین ابزارهای طراحی ریسپانسیو تبدیل شدن. مدل کار هم خیلی ساده بود: یه سری عرض مشخص برای دستگاههای مختلف تعریف کن، بعد بگو در هر عرضی چه اتفاقی بیفته. این رویکرد یه جواب عملی برای یه مشکل واقعی بود و هنوز هم خیلی از پروژههای production ازش استفاده میکنن.
اما امیت شین، نویسنده این مقاله، معتقده که وب مدرن دیگه page-first نیست؛ component-first شده. یه کامپوننت ممکنه در یه فید تمامعرض، یه سایدبار باریک، یه مودال، و یه تایل داشبورد ظاهر بشه، اون هم در یه اپلیکیشن. وقتی کامپوننتها در کانتینرهای مختلف قرار میگیرن، قوانین بر اساس viewport میتونن رفتارهای ناهماهنگ ایجاد کنن.
مشکل دیگه اینه که با گسترش تنوع دستگاهها، انتخاب بریکپوینتهای درست دیگه یه سیستم پایدار نیست، بلکه یه حدس متغیره. ضمناً خیلی از تغییرات ریسپانسیو اصلاً نیاز به پرشهای گسسته ندارن؛ فقط یه مقیاسبندی روان در تایپوگرافی، فاصلهگذاری و اندازههاست.
خوشبختانه CSS مدرن راهحلهای بهتری داره. اولین روش استفاده از لایهبندی intrinsicه. مثلاً برای یه گرید کارت، به جای اینکه در هر بریکپوینت تعداد ستونها رو hard-code کنیم، میشه با auto-fit و minmax به مرورگر گفت «تا جایی که جا داره ستون بساز، ولی هیچوقت از ۳۲۰ پیکسل کمتر نشه». مرورگر بقیه کار رو خودش انجام میده و نتیجه دقیقاً همون چیزیه که با چند بریکپوینت میساختیم، اما با کد خیلی کمتر.
برای لایهبندی دو ناحیهای مثل sidebar و محتوای اصلی هم میشه با flex-wrap و تعریف flex properties برای هر بخش، یه لایهبندی سیال ساخت که بهصورت خودکار از حالت تکستونه به دو ستون تبدیل میشه، بدون هیچ media query.
روش دوم استفاده از مقادیر سیال با clamp() هست. خیلی از تغییرات ریسپانسیو فقط تنظیم اندازهها هستن؛ مثل font-size، padding یا border-radius. با clamp() میشه یه حداقل و یه حداکثر تعریف کرد و بین این دو محدوده، مقدار بهصورت سیال با عرض viewport مقیاس میشه. نتیجه یه قانون CSS جایگزین چند media query میشه و مقیاسبندی خیلی روانتره.
روش سوم استفاده از container unitsه. این ویژگی که حالا پشتیبانی گستردهای داره، بهمون اجازه میده مقادیر رو بر اساس اندازه واقعی کانتینر کامپوننت تعریف کنیم، نه viewport. یعنی font-size یه کارت بر اساس عرض خود کارت مقیاس میشه، نه صفحه. این ایدهآلترین رویکرد برای سیستمهای کامپوننتمحوره چون کامپوننت هر جایی که قرار بگیره درست رفتار میکنه.
نکته مهم اینه که نویسنده نمیگه media query رو کلاً کنار بذاریم. بلکه میگه media query رو برای چیزهایی که واقعاً به device capability یا user preference ربط دارن نگهداریم، نه به عنوان موتور اصلی لایهبندی.
نکات کلیدی:
- بریکپوینتها برای وب page-first خوب بودن، اما وب مدرن component-first شده
- auto-fit و minmax() میتونن جایگزین چندین بریکپوینت برای گریدها بشن
- clamp() مقیاسبندی سیال رو بدون media query برای typography و spacing ممکن میکنه
- container units بهترین ابزار برای کامپوننتهایی هستن که در کانتینرهای مختلف استفاده میشن
- media query هنوز کاربرد داره، اما باید برای قابلیتهای دستگاه و ترجیحات کاربر استفاده بشه، نه لایهبندی
- این رویکرد کد تمیزتر، قابلپیشبینیتر و قابلنگهداریتری تولید میکنه
