اعتمد تطوير الويب المتجاوب تقليدياً على استعلامات الوسائط المستندة إلى حجم النافذة وخصائص CSS الفيزيائية مثل margin-left أو padding-top. بينما تكون هذه الطريقة فعالة، إلا أنها غالباً ما تنكسر عند انتقال التصاميم بين اللغات من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL)، أو عندما تحتاج المكونات إلى التكيف مع حاويتها المباشرة بدلاً من نافذة المتصفح بأكملها. اليوم، نستكشف معيارين قويين يحلان هاتين المشكلتين: خصائص CSS المنطقية واستعلامات الحاوية.
تبنّي الخصائص المنطقية
تستبدل خصائص CSS المنطقية الاتجاهات الفيزيائية بمعانٍ دلالية تستند إلى نمط الكتابة واتجاه النص في المستند. بدلاً من تحديد "يسار"، تحدد "بداية". وهذا يعني أن أنماطك تتكيف تلقائياً عند تغيير اتجاه النص من LTR إلى RTL، مما يلغي الحاجة إلى استعلامات وسائط معقدة أو تجاوزات يدوية.
فكر في تخطيط بطاقة قياسي حيث تريد وضع صورة رمزية في الزاوية العلوية اليسرى. في CSS الفيزيائي، ستستخدم position: absolute; top: 0; left: 0. في CSS المنطقي، يصبح هذا top: 0; inset-inline-start: 0. قيمة start تحل كـ "يسار" في سياقات LTR و"يمين" في سياقات RTL. هذا التحول الدقيق يقلل بشكل كبير من تكاليف الصيانة للتطبيقات العالمية.
/* الخصائص الفيزيائية مقابل المنطقية */
/* الطريقة القديمة */
.card {
margin-right: 1rem;
padding-left: 1rem;
border-right: 1px solid #ccc;
}
/* الطريقة الجديدة */
.card {
margin-inline-end: 1rem;
padding-inline-start: 1rem;
border-inline-end: 1px solid #ccc;
}من خلال استخدام خصائص مثل margin-block و padding-inline و width مقابل inline-size، تكتب كوداً أكثر قابلية للوصول ومحايداً ثقافياً بشكل جوهري.
قوة استعلامات الحاوية
بينما تستجيب استعلامات الوسائط لحجم النافذة، تسمح استعلامات الحاوية (CQs) للعناصر بالاستجابة لحجم حاوية الأب الخاصة بها. هذا يمثل تحولاً نموذجياً في هندسة المكونات القائمة. سابقاً، إذا أردت أن تغير بطاقة ما تخطيطها داخل شريط جانبي مقابل منطقة محتوى رئيسية، كان عليك استخدام محددات المعرف (ID) أو الفئات المساعدة. مع استعلامات الحاوية، يقرر المكون سلوكه الخاص.
لاستخدام استعلامات الحاوية، يجب أولاً إنشاء سياق احتواء على عنصر الأب باستخدام container-type. ثم تستخدم قاعدة @container لتعريف الأنماط بناءً على أبعاد تلك الحاوية.
/* إنشاء سياق الحاوية */
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
/* استعلام الحاوية */
@container sidebar (min-width: 400px) {
.card {
flex-direction: row;
}
}
@container sidebar (max-width: 399px) {
.card {
flex-direction: column;
}
}يتيح هذا النهج التغليف الحقيقي. يمكن لمكون الزر أن يصبح أوسع ويتحول إلى وضع الأيقونة فقط عند وضعه في درج تنقل ضيق، دون حاجة الأب إلى معرفة أي شيء حول الأنماط الداخلية للزر.
الجمع بين الخصائص المنطقية واستعلامات الحاوية
عند دمج الخصائص المنطقية مع استعلامات الحاوية، تنشئ مكونات مرنة وغير مرتبطة بإطار عمل معين. تضمن الخصائص المنطقية احترام المكون لاتجاه النص، بينما تضمن استعلامات الحاوية احترامه للقيود المكانية. هذا المزيج مثالي لأنظمة التصميم حيث يتم مشاركة المكونات عبر واجهات متنوعة.
على سبيل المثال، يمكن لمكون شريط البحث استخدام الخصائص المنطقية لمحاذاة أيقونته وحقل الإدخال بشكل صحيح بغض النظر عن اللغة، بينما يمكن لاستعلامات الحاوية ضبط عرضه ورؤية أيقونة البحث بناءً على ما إذا كان يتم عرضه في رأس الصفحة، أو شريط جانبي، أو نافذة منبثقة كاملة الصفحة.
الخاتمة
يتجه CSS الحديث نحو نموذج أكثر دلالية وقوة. من خلال إتقان الخصائص المنطقية، تضمن أن تصاميمك شاملة وقابلة للتكيف مع لغات مختلفة. من خلال اعتماد استعلامات الحاوية، تحصل على تحكم دقيق في سلوك المكون دون الاعتماد على حجم النافذة. معاً، تتيح هذه الميزات مستوى جديداً من تطوير الواجهات الأمامية الاحترافي، القابل للصيانة، والمتجاوب حقاً. ابدأ باستبدال left/right بـ start/end و @media بـ @container في مشروعك القادم لتجربة الفرق.