‏اولین نسخه آلفای Bootstrap 6 منتشر شد

تیم Bootstrap اولین نسخه آلفای Bootstrap 6 رو منتشر کرده و به گفته خودشون یه بازسازی کامل از پایه‌ست. نسخه جدید از سیستم ماژول Sass، المان‌ها و APIهای بومی مرورگر بیشتر، پلاگین‌های جاوااسکریپت فقط ESM و کلی استاندارد جدید CSS استفاده می‌کنه. نویسنده می‌گه با اینکه کلی کتابخونه طراحی دیگه هست، هدف اصلی Bootstrap یعنی کمک به ساخت سریع‌تر و راحت‌تر نرم‌افزار، الان از همیشه مهم‌تره. Bootstrap از ۲۰۱۱ تا حالا بیش از ۱.۷۵ میلیارد بار نصب شده.

نسخه 6.0.0-alpha.1 الان روی npm و jsDelivr در دسترسه. چون جاوااسکریپت فقط ESM هست، اگه از CDN استفاده می‌کنید، تگ اسکریپت باید type="module" داشته باشه. حداقل مرورگرها هم حسابی بالا رفته: Chrome و Edge نسخه 130، Firefox نسخه 132 و Safari نسخه 18. دلیلش استفاده از ویژگی‌هایی مثل light-dark()، :has()، container queries، oklch()، color-mix() و المان بومی dialog هست و هیچ fallback یا polyfillی برای نسخه‌های قدیمی‌تر نداره. Bootstrap 5 همچنان پشتیبانی می‌شه و نسخه 5.4.0 هم قبل از اعلام پایان عمرش میاد.

مهم‌ترین تغییر تو شخصی‌سازیه. Bootstrap 6 از @use/@forward استفاده می‌کنه و شخصی‌سازی با token map انجام می‌شه، یعنی Sass mapهایی که همه متغیرهای CSS سراسری و هر کامپوننت رو نگه می‌دارن. Sass فقط برای کارهای برنامه‌نویسی مثل ساختن variantها و utilityها می‌مونه و همه تغییرات ظاهری با CSS انجام می‌شه. تقریباً همه متغیرهای Sass نسخه 5 حالا متغیر CSS هستن، یعنی می‌شه اونا رو تو زمان اجرا هم عوض کرد، نه فقط قبل از کامپایل. مثلاً کامپوننت alert این شکلیه:

$alert-tokens: defaults(
  (
    --alert-padding-x: var(--spacer),
    --alert-border-radius: var(--radius-5),
  ),
  $alert-tokens
);

تابع defaults() مقدارها رو ادغام می‌کنه، نه جایگزین. یعنی برای عوض کردن یه مقدار لازم نیست کل map رو دوباره بنویسید و می‌تونید توکن‌های خودتون رو هم کنارش اضافه کنید. شخصی‌سازی با @use ... with انجام می‌شه: $root-tokens برای توکن‌های سراسری و هر کامپوننت هم map مخصوص خودش رو داره، مثل $alert-tokens.

یه تغییر دیگه اینه که پیشوند bs دیگه تو سورس نیست. تو نسخه 5 یه متغیر Sass به اسم $prefix تو همه جا تکرار می‌شد، ولی حالا پیشوند موقع build با PostCSS اضافه می‌شه و باید تو تنظیمات PostCSS تعریفش کنید. مقیاس radius هم از یه مقدار پایه به اسم $radius ساخته می‌شه، پس با عوض کردن همین یه عدد هر ده پله با هم عوض می‌شن. $spacer هم برای فاصله‌ها همین کار رو می‌کنه.

نکات کلیدی:

• Bootstrap 6 Alpha 1 با نسخه 6.0.0-alpha.1 روی npm و jsDelivr منتشر شده.
• حداقل مرورگرها: Chrome و Edge 130، Firefox 132 و Safari 18، بدون polyfill.
• جاوااسکریپت فقط ESM هست و تگ اسکریپت CDN باید type="module" داشته باشه.
• شخصی‌سازی با token map و @use ... with انجام می‌شه و متغیرها تو زمان اجرا هم قابل تغییرن.
• $prefix حذف شده و پیشوند bs با PostCSS اضافه می‌شه.
• Bootstrap 5 پشتیبانی می‌شه و نسخه 5.4.0 هم منتشر می‌شه.