بطاقة CSS مريحة للقراءة، من دون أرقام عشوائية

قد يكون كل عنصر في بطاقتك صحيحاً وحده، ومع ذلك تبدو البطاقة مزدحمة. السبب غالباً هو العلاقة بين العناصر: المسافة بعد العنوان، عرض السطر، أو غياب الفرق بين النص الأساسي والتفاصيل.

سنغيّر مثالاً صغيراً بدلاً من حفظ قائمة خصائص. افتح المحرّر، واختر style.css. هذا مثال مكتوب بلا تسجيل؛ عدّل أي قيمة واضغط تشغيل لترى النتيجة.

#ابدأ بالمساحة، ثم اللون

padding يترك مساحة داخل حدود العنصر. margin يترك مساحة خارجه. إذا كان النص يلامس حافة البطاقة، تحتاج عادة إلى الأولى؛ وإذا التصقت بطاقتان ببعضهما، فابدأ بالفجوة بينهما.

.card {
  padding: 2rem;
  max-width: 28rem;
  margin-inline: auto;
}

max-width يضع سقفاً للعرض، لكنه لا يجبر البطاقة على تجاوزه في شاشة صغيرة. وmargin-inline يعمل مع اتجاه الكتابة، لذلك لا نحتاج إلى التفكير في اليمين واليسار في كل قاعدة.

#افتح المثال واختبر قراراً واحداً

.card {
  display: grid;
  gap: 16px;
  padding: 24px;
}

غيّر الحشو إلى 1rem، ثم إلى 3rem. قارن سهولة القراءة، لا مجرد حجم المستطيل. بعد ذلك غيّر line-height في العنوان والنص، وراقب أين يبدأ السطر التالي.

#اجعل النص الطويل جزءاً من الاختبار

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

اجعل ترتيب الأهمية واضحاً: عنوان، شرح، ثم إجراء. يمكن أن يكون الفرق في الحجم أو الوزن أو المسافة، ولا يلزم أن يكون كل عنصر بلون جديد.

#اختبار أخير قبل أن تعتبرها جاهزة

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

هذه اختبارات صغيرة، لكنها تكشف ما لا تظهره لقطة جميلة واحدة.