جاري التحميل...
جاري التحميل...
Container Queries، clamp()، Logical Properties، @supports
التصميم المتجاوب الحديث هو مجموعة من تقنيات CSS المتقدمة التي تتيح لك بناء مواقع ويب تتكيف تلقائياً مع أحجام شاشات وأجهزة مختلفة - لكن بطريقة أذكى وأكثر كفاءة من الأساليب التقليدية.
في الماضي، كنا نعتمد حصرياً على Media Queries للكشف عن عرض الشاشة وضبط التصميم وفقاً لذلك. لكن مع تطور الويب، هناك أدوات أقوى وأكثر مرونة:
التصميم المتجاوب الحديث ليس مجرد 'أداة إضافية' - بل هو ضرورة مطلقة في عالم الويب الحديث.
دعنا نأخذ مثالاً عملياً. تخيل مكون بطاقات يُستخدم في أماكن مختلفة:
✅ مشكلة الحاوية:
بطاقة في الشريط الجانبي (ضيقة) مقابل المحتوى الرئيسي (واسع) تحتاج تخطيطات مختلفة. Media Queries ترى فقط عرض منطقة العرض. Container Queries تحل هذا ببراعة!
✅ مشكلة الخط الثابت:
بدون clamp()، تحتاج مئات الأسطر في Media Queries لتغيير أحجام الخطوط عند كل نقطة توقف. clamp() يفعل ذلك بسطر واحد!
✅ مشكلة الاتجاه (LTR/RTL):
في تصاميم الويب العربية، تحتاج margin-right في LTR و margin-left في RTL. Logical Properties تحل هذا تلقائياً بـ margin-inline-end.
دعنا نشرح كل تقنية ببساطة قبل الغوص في الكود:
دعنا نفهم كيف تعمل هذه التقنيات على مستوى المتصفح:
ما هو الفرق الأساسي بين Media Queries و Container Queries؟
لماذا نوصي باستخدام inline-size بدلاً من size في Container Queries؟
ما المكافئ المنطقي لـ margin-left؟
متى تستخدم Container Queries بدلاً من Media Queries؟
أنشئ مكون تعليمي للبطاقات باستخدام Container Queries و clamp() و Logical Properties و aspect-ratio و @supports للتحسين التدريجي.
الحل:
.card-wrapper {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
}
}
.card {
display: flex;
flex-direction: column;
padding: 1rem;
}
.card-image {
aspect-ratio: 16 / 9;
}
:root {
--space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
--space-sm: clamp(0.5rem, 1vw, 1rem);
--space-md: clamp(1rem, 2vw, 2rem);
}استعلامات الحاوية:
.container {
container-type: inline-size;
container-name: my-container;
}
@container my-container (min-width: 500px) {
.child { /* ... */ }
}clamp() - قيم سائلة:
/* clamp(min, مفضل, max) */
font-size: clamp(1rem, 2.5vw, 2rem);
padding: clamp(1rem, 3vw, 3rem);
width: clamp(300px, 80%, 1200px);
:root {
--space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
--space-sm: clamp(0.5rem, 1vw, 1rem);
--space-md: clamp(1rem, 2vw, 2rem);
}min() و max():
/* min() - الأصغر من قيمتين */
width: min(80%, 800px);
/* max() - الأكبر من قيمتين */
width: max(300px, 50%);الخصائص المنطقية:
width -> inline-sizeheight -> block-sizemargin-left -> margin-inline-startmargin-right -> margin-inline-endpadding-top -> padding-block-starttext-align: left -> text-align: start