Bootstrap 6 Alpha يصل بنظام Sass حديث وJavaScript يعتمد ESM فقط

وصلت أول نسخة تجريبية Bootstrap 6 Alpha 1، في تحديث كبير لإطار الواجهات المفتوح المصدر الذي يُستخدم لبناء واجهات المواقع والتطبيقات بسرعة عبر مكوّنات وأنماط جاهزة.

لا يقتصر التحديث على تحسينات شكلية؛ إذ يعيد Bootstrap 6 تنظيم طريقة تخصيص التصميم، ويعتمد على قدرات أحدث في المتصفحات، ويغيّر أسلوب استخدام إضافات JavaScript. وبما أنها نسخة Alpha، فما زالت التفاصيل قابلة للتغيير قبل وصول النسخ التجريبية المستقرة ونسخ الإصدار النهائي.

تخصيص أقرب إلى CSS الحديثة

أبرز تغيير داخلي هو الانتقال إلى نظام الوحدات في Sass باستخدام @use و@forward بدلاً من @import، الذي لم يعد مدعوماً للتخصيص. Sass هي أداة تساعد على تنظيم وكتابة CSS، أما نظام الوحدات فيجعل الاستيراد وإدارة الإعدادات أوضح في المشاريع الكبيرة.

يعتمد Bootstrap 6 كذلك على خرائط الرموز التصميمية (token maps): وهي مجموعات من القيم التي تمثل عناصر التصميم، مثل المسافات والزوايا والألوان. تحوّل معظم متغيرات Sass الموجودة في Bootstrap 5 إلى CSS Variables ضمن هذه الخرائط.

النتيجة العملية هي إمكان تخصيص المظهر بطريقتين:

• قبل بناء ملفات CSS عبر Sass.
• أثناء تشغيل الصفحة عبر CSS Variables، لتنعكس التغييرات مباشرة على المكوّنات المرتبطة بها.

فعلى سبيل المثال، يمكن لتعديل قيمة المسافة الأساسية أو نصف قطر الحواف أن يؤثر في بطاقات الواجهة والتنبيهات وغيرها من المكوّنات التي تعتمد عليها.

متصفحات أحدث، وميزات CSS أصلية أكثر

يرفع Bootstrap 6 الحد الأدنى لدعم المتصفحات إلى Chrome وEdge 130، وFirefox 132، وSafari 18. لذلك لن يناسب الإصدار الجديد المشاريع التي تحتاج إلى دعم إصدارات أقدم من المتصفحات.

هذا القرار يسمح للإطار باستخدام خصائص متصفح حديثة مباشرة، من دون طبقات توافق إضافية أو بادئات قديمة أو polyfills. من بينها:

• container queries لجعل التصميم يتجاوب مع مساحة الحاوية الأم، لا مع عرض الشاشة فقط.
• light-dark() لتحديد ألوان مناسبة للوضعين الفاتح والداكن من دون تكرار قواعد التصميم.
• oklch() وcolor-mix() لبناء ألوان يمكن تكييفها انطلاقاً من ألوان أساسية.
• العنصرين الأصليين <details> و<summary> لتشغيل الأكورديون من دون JavaScript.
• عنصر <dialog> الأصلي للمكوّن الجديد Dialog.

كما يعتمد الإطار CSS Layers لترتيب أولوية الأنماط بصورة أكثر قابلية للتوقع، ويستخدم نطاقات الاستعلامات الإعلامية الحديثة مثل (width >= 768px).

تغيير في أسماء الأصناف المتجاوبة

يتبنى Bootstrap 6 أسلوب البادئة في الأصناف المتجاوبة وحالات التفاعل، بدلاً من وضع حجم الشاشة داخل الاسم كما في الإصدار الخامس. لذلك تتحول أمثلة مثل:

• .d-md-none إلى .md:d-none
• .col-lg-6 إلى .lg:col-6
• .opacity-50-hover إلى .hover:opacity-50
• .justify-content-md-end إلى .md:justify-content-end

ينطبق هذا التغيير على الأدوات والمكوّنات وتخطيط الشبكة، وهو من التغييرات الكاسرة التي يجب أخذها في الحسبان عند ترحيل مشروع قائم. كما أعيدت تسمية offcanvas في هذا السياق إلى drawer.

JavaScript يعتمد ESM فقط

تنتقل إضافات JavaScript في Bootstrap 6 إلى ESM فقط، أي صيغة الوحدات القياسية في JavaScript الحديثة. لم تعد حزمة UMD متاحة، ولن يوجد المتغير العام window.bootstrap.

من يستخدم Bootstrap عبر CDN ويعتمد فقط على سمات البيانات، مثل data-bs-toggle، يحتاج إلى إضافة type="module" إلى وسم script. أما من يستدعي مكوّنات مثل Tooltip برمجياً من CDN، فعليه استخدام استيراد صريح عبر import.

أما المشاريع الحديثة التي تستخدم Vite أو Webpack أو Parcel مع استيراد ESM، فيفترض أن تستمر استيراداتها بالعمل، مع دعم أفضل لإزالة الأجزاء غير المستخدمة من الحزمة. في المقابل، على المشاريع التي تستخدم require() في CommonJS الانتقال إلى import.

TypeScript وأدوات البناء والوثائق الموجهة للوكلاء

مصدر Bootstrap أصبح مكتوباً بـ TypeScript، ويشحن الإطار تعريفات الأنواع الخاصة به؛ لذلك يمكن إزالة الحزمة المنفصلة @types/bootstrap من الاعتمادات.

وعلى مستوى أدوات المشروع، استبدل الفريق Rollup وBabel بـ Rolldown، واستبدل Karma باختبارات Vitest تعمل في Chromium حقيقي عبر Playwright. هذه التفاصيل تهم بالدرجة الأولى من يبني Bootstrap من المصدر أو يساهم في تطويره.

أضاف المشروع أيضاً وثائق نصية موجهة لنماذج اللغة ووكلاء البرمجة، منها llms.txt كفهرس للوثائق وllms-full.txt كنسخة مجمعة منها، إضافة إلى ملفات مهارات في مجلد skills/. الهدف هو إعطاء الوكلاء إرشادات Bootstrap 6 المحدثة لمهام مثل الترحيل وكتابة المكوّنات واستخدام أدوات البناء المختلفة.

كيف يبدأ المطورون؟

يتوفر Bootstrap 6 Alpha 1 عبر npm وjsDelivr. لكن قبل تجربة الترقية من Bootstrap 5، ينبغي مراجعة دليل الترحيل والتأكد من توافق المتصفحات المطلوبة وأساليب استيراد JavaScript وأسماء الأصناف الجديدة مع المشروع.

سيستمر Bootstrap 5 متاحاً ومدعوماً للمشاريع التي لا يناسبها حد دعم المتصفحات في الإصدار السادس. ويخطط الفريق لإصدار Bootstrap 5.4.0 قبل إعلان موعد انتهاء دعم سلسلة الإصدار الخامس.