HTML وCSS / أنظمة عرض قابلة للصيانة / الدرس 16
التعزيز التدريجي واستعلامات الحاويات
ابن أساسا صالحا وأضف ميزات عرض مدعومة وكيف المكون مع مساحته.
في هذه الصفحة
أهداف الدرس
- البدء بأساس كامل
- تعزيز تخطيط قائمة بسيطة
- افتراضات توافق قابلة للمراجعة
البدء بأساس كامل
يبدأ التعزيز بمحتوى وتفاعل ينجزان المهمة ثم يضيف قدرات. لا يجب أن يمحو غياب التنسيق أو الدعم الطريق الوحيد للمعلومة. لا يعني تطابق كل المتصفحات بل سياسة دعم وبديل مفيد. توفر الروابط والنماذج والعناوين والتدفق أساسا. عند احتياج سكربت حدد ما يتاح قبل التهيئة وما يحدث عند غيابه أو توقفه جزئيا.
اكتشاف الميزات لا العلامات
تسأل @supports عن دعم تصريح أو صياغة وفق قواعدها ولا تثبت الإتاحة والصحة والأداء. اكتب أساسا آمنا وضع التعزيز فقط داخل الشرط. يتقادم تخمين المتصفح من هويته مقارنة بفحص القدرة. وقد يختلف التنفيذ رغم الدعم، فاحفظ مصفوفة اختبار وراجع البيانات الرسمية والوجهات الفعلية بدلا من تعميم «كل متصفح حديث».
تعزيز تخطيط قائمة بسيطة
يبدأ المثال مقالات مكدسة ثم يضيف Grid عند الدعم والاتساع. يوجد المحتوى والعناوين والترتيب خارج الشرط، فالبديل صفحة كاملة لا مكون فارغ. لا تخف التسميات أو الأخطاء داخل فحص ميزة، ولا تكرر شجرة المحتوى. اختبر تعطيل التعزيز عمدا حتى لا يتباعد البديل عن الحاجة الفعلية.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feature enhancement</title>
<style>
.collection article { margin-block: 1rem; padding: 1rem; border: 1px solid; } @supports (display: grid) { @media (min-width: 40rem) { .collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } } }
</style>
</head>
<body>
<main><h1>Enhanced collection</h1><div class="collection"><article><h2>Structure</h2><p>Always readable.</p></article><article><h2>Presentation</h2><p>Columns are optional.</p></article></div></main>
</body>
</html>
A complete stacked fallback with an optional wider grid.الأساس كتل عادية ويعزز المتصفح الأعمدة دون تغيير المحتوى أو الدلالات. النتيجة المتوقعة: بديل مكدس كامل وشبكة اختيارية.
استعلام حاوية المكون
تصف الوسائط البيئة، ويستجيب استعلام الحجم لأبعاد أب مؤهل. أنشئ حاوية inline-size في غلاف ونسق ابنا عند اتساعه. لا يستخدم العنصر عادة حاويته الذاتية ليستعلم حجمه وينسق نفسه؛ حدد حد الأب. يؤثر الاحتواء في التحجيم الداخلي وقد يغير عنصرا يضيق بحسب المحتوى. يبقي المثال أساسا مكدسا ويضيف عمودين داخليين عند حد الحاوية المسماة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Container adaptation</title>
<style>
.wrapper { container-type: inline-size; container-name: card-space; max-inline-size: 50rem; } .card { padding: 1rem; border: 1px solid; } @container card-space (min-width: 30rem) { .card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; } }
</style>
</head>
<body>
<main><h1>Container-aware card</h1><div class="wrapper"><article class="card"><h2>Workshop</h2><p>This card responds to its wrapper, not directly to the viewport.</p></article></div></main>
</body>
</html>
The card adapts at a 30rem container width with a stacked fallback.ينشئ الغلاف الحد المسماة وتكتسب البطاقة الأعمدة عند اتساعه وإلا بقي التدفق العادي. النتيجة المتوقعة: تتكيف البطاقة عند حاوية 30rem مع بديل مكدس.
افتراضات توافق قابلة للمراجعة
للاستعلامات والطبقات والمحددات تواريخ دعم مختلفة، فلا تستنتج أحدها من الآخر. يراجع المقرر الإرشادات بتاريخ معلن ويستخدم Chromium ممثلا، ويجب أن يتحقق المنتج من محركاته وتقنياته المساعدة. اجعل الفشل محليا؛ تبقى البطاقة مكدسة دون تعطيل الصفحة. اختبر مكونا ضيقا بصفحة واسعة وآخر واسعا بغلاف بسيط لتمييز التكيف الحقيقي من نجاح عرضي.
الأخطاء الشائعة وإصلاحها
تترك الميزة غير المدعومة فراغا
- لماذا يحدث؟
- اعتمد المحتوى الضروري على التعزيز.
- كيف تصلحه؟
- استعد أساسا مفيدا خارج الشرط.
- كيف تتجنب تكراره؟
- اختبر مسار التعطيل.
تستجيب البطاقة للصفحة لا موضعها
- لماذا يحدث؟
- استُخدمت وسائط لحاجة محلية.
- كيف تصلحه؟
- أنشئ حاوية الأب المقصودة واستعلمها.
- كيف تتجنب تكراره؟
- اختبر موضعا ضيقا بصفحة واسعة.
يغير container-type التحجيم الداخلي
- لماذا يحدث؟
- اعتُبر الاحتواء اسما سلبيا فقط.
- كيف تصلحه؟
- راجع عقد حجم الغلاف.
- كيف تتجنب تكراره؟
- قس قبل الاحتواء وبعده.
اختبر فهمك
1. اختر استعلام وسائط أو حاوية لبطاقة في الشريط والعمود الرئيسي.
اعرض الحل المشروح
استخدم حاوية إذا اعتمد الترتيب على الموضع، وحدد غلافا في كل سياق وبديل كدس. لا تميز الوسائط الشريط الضيق من العمود الواسع عند العرض نفسه.
2. لماذا لا تثبت @supports (display: grid) صلاحية واجهة بعينها؟
اعرض الحل المشروح
تفحص دعم التصريح ولا تفحص الترتيب والتباين والتركيز والتجاوز والمهمة. افصل الاختبار السلوكي والميسر عن كشف الدعم وتحقق من التصميم الكامل.
أهم ما تعلمته
- يحسن التعزيز أساسا صالحا.
- الدعم أضيق من صحة السلوك.
- لحد الحاوية آثار تحجيم.