التنسيق بـ CSS

بطاقة حجم 320 بكسل تتجاوز شاشة بحجم 320 بكسل

• العرض المُعلن عن البطاقة ليس دائمًا إجمالي عرضها. يمكن أن تضيف Padding والحدود مسافة خارج عرض المحتوى.
• CSS يطبق قواعد العرض. Selector يختار العناصر؛ Declaration يمنح خاصية وقيمة، مثل color: navy.

احسب كل جزء من الصندوق

• Box Model يتكون من Content و Padding و Border و Margin. Padding والحدود داخل الصندوق المرسوم؛ Margin يفصله عن الجيران.
• مع content-box، عرض 320 بكسل، هامش داخلي 16 بكسل من كلا الجانبين، وهوامش خارجية 2 بكسل من كلا الجانبين يعطي 356 بكسل قبل الهامش الخارجي. مع border-box، يُدرج 320 بكسل المعلن ضمن ذلك الهامش الداخلي والحدود.

اجعل العرض مرناً

• التصميم المتجاوب يكيّف المحتوى والتخطيط حسب المساحة المتاحة. تملأ هذه البطاقة حاويتها حتى 400 بكسل، شاملاً الهامش الداخلي والحدود.
• استخدم القاعدة على عنصر له class="card". لا يزال يجب التحقق من المحتوى الطويل غير المنكسر، وهامش الأب، والقواعد الأخرى؛ لا يمكن لإعلان واحد ضمان أن تتناسب الصفحة بأكملها.

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: 16px;
  border: 2px solid currentColor;
  overflow-wrap: anywhere;
}

غيّر التخطيط فقط عندما يحتاج إلى تغيير

• استعلام الوسائط يطبق قواعد تحت شرط معين. على سبيل المثال، غيّر عمودين إلى عمود واحد عندما يصبحان ضيقين جداً للقراءة.
• اختر نقطة الانقطاع بناءً على المحتوى، ثم اختبر عدة أبعاد ونصوص أكبر. لا تفترض أن جميع الهواتف أو أجهزة اللابتوب لها نفس العرض المفيد.

افحص القاعدة التي تربح فعلياً

• تأخذ السلسلة المتسلسلة في الاعتبار عوامل بما فيها الأصل والأهمية والطبقات قبل تحديدية المحدد. بالنسبة للقواعد المقابلة بشكل آخر، فإن المعرف (ID) أكثر تحديداً من الفئة (class)؛ والفئة أكثر تحديداً من محدد العنصر.
• عندما يكون للقواعد المقابلة نفس التحديدية، يمكن لترتيب المصدر اللاحق أن يحسم الأمر. استخدم أدوات مطور المتصفح لفحص القواعد المطابقة، وملف التنسيق المحمل، والقيم المحسوبة.

اختبر الصندوق وتجربة القراءة

• جرب حاويات ضيقة وعريضة، وتركيز لوحة المفاتيح، وتكبير النص. تأكد من أن النص مقروء في كلا الموضوعين اللونيين وأن المحتوى يمكن أن يلتف.
• اشرح إصلاح تدفق زائد واحد باستخدام حساب الصندوق، وصراع تنسيقي واحد باستخدام القواعد المطابقة الفعلية.

المصدر: W3C سلسلة متسلسلة لـ CSS.