‏بریک‌پوینت‌های rem تیلویند: دسترس‌پذیری یا دردسر؟

ماجرا از یه باگ شروع می‌شه که نویسنده نمی‌تونست بازتولیدش کنه: ستون‌هایی که باید کنار هم باشن روی هم می‌رفتن، اونم روی عرض‌هایی که ده بار تست شده بود. آخرش معلوم می‌شه گزارش‌دهنده فونت پیش‌فرض مرورگرش رو بزرگ کرده بوده. از تیلویند ۳.۲ بریک‌پوینت‌های پیش‌فرض با rem نوشته می‌شن و نسخهٔ ۴ هم همین رو نگه داشته: sm یعنی ۴۰rem، md یعنی ۴۸rem، lg یعنی ۶۴rem و 2xl یعنی ۹۶rem.

نکتهٔ اول اینه که rem داخل شرط یه media query اصلاً به CSS تو کاری نداره. طبق اسپک Media Queries Level 4، واحدهای نسبی داخل مدیا کوئری با مقدار initial فونت حساب می‌شن، نه با چیزی که تو html { font-size } نوشتی. پس اگه فونت ریشه رو ۱۰px کنی، min-width: 48rem همون جای قبلی trigger می‌شه. خیلی از نوشته‌ها همین‌جا تموم می‌شن، ولی نویسنده می‌گه این فقط نصف ماجراست.

نصف دیگه اینه که «مقدار initial» یعنی مقداری که خود مرورگر از اون شروع می‌کنه، و کاربر روش دست داره. اگه کاربر تو تنظیمات مرورگر فونت پیش‌فرض رو عوض کنه، بریک‌پوینت‌های rem و em جابه‌جا می‌شن اما px‌ها سر جاشون می‌مونن؛ زوم صفحه هم هر سه‌تا رو با هم بزرگ می‌کنه. یعنی کاربری که فونت پیش‌فرضش رو ۲۴px کرده، با بریک‌پوینت rem لایوتی می‌گیره که براش جا باز می‌کنه، و با px متنش بزرگ می‌شه ولی ستون‌ها قفل می‌مونن. این دقیقاً دلیل انتخاب تیم تیلویند بوده.

طرف دیگهٔ معامله هم همین‌جاست. وقتی بریک‌پوینت با فونت جابه‌جا می‌شه، کنترل اینکه کدوم لایوت رندر بشه دست یه تنظیمیه که نه می‌بینیش نه تستش کردی. مثلاً md:grid-cols-3 که روی ۱۶px قشنگ بود، برای کاربر ۲۰px تو عرض باریک‌تری فعال می‌شه و کارت‌ها سرریز می‌کنن. این مشکل تقریباً نامرئیه: زوم رو فوری بازتولید می‌کنی، ولی تنظیم فونت پیش‌فرض ته منوهای مرورگره و تقریباً تو ماتریس تست هیچ‌کسی نیست.

به گفتهٔ نویسنده، این حرف که «px دسترس‌پذیری رو خراب می‌کنه» هم درست نیست: معیار WCAG 1.4.4 می‌گه متن باید بتونه به ۲۰۰ درصد برسه، با هر مکانیزمی که مرورگر می‌ده، و خود W3C زوم صفحه رو تکنیک کافی می‌دونه. چون زوم بریک‌پوینت px رو هم بزرگ می‌کنه، px این استاندارد رو رد نمی‌کنه. انتخاب rem یه قدم بالاتر از حداقل استانداردست، نه شرط عبور از اون. اگه خواستی تو تیلویند ۴ عوضش کنی، با @theme بازنویسی می‌شه:

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

نکات کلیدی:

• از تیلویند ۳.۲ بریک‌پوینت‌های پیش‌فرض rem هستن: ۴۰rem برای sm تا ۹۶rem برای 2xl
• واحد rem داخل شرط media query با مقدار initial فونت حساب می‌شه، نه با html { font-size }
• تغییر فونت پیش‌فرض مرورگر بریک‌پوینت rem رو جابه‌جا می‌کنه و px رو نه؛ زوم صفحه هر دو رو جابه‌جا می‌کنه
• بریک‌پوینت px معیار WCAG 1.4.4 رو رد نمی‌کنه، چون زوم صفحه تکنیک کافی حساب می‌شه
• تو تیلویند ۴ با @theme و تو نسخهٔ ۳ با theme.screens می‌شه به px برگشت