جاري التحميل...

Outline في CSS

يمكنك رسم حدّ (border). أما outline فأداة قريبة بمهمة مختلفة: ترسم حلقة خارج صندوق الحد — وعلى عكس border — لا تأخذ مساحة تخطيط. الجيران لا يتحركون عند إضافة outline.

Outline مقابل border

أبقِ الأداتين منفصلتين في خريطتك الذهنية.

📊 Outline مقابل border

الميزة Outline Border
مساحة التخطيط لا تأخذ مساحة؛ حجم الصندوق يبقى كما هو تأخذ مساحة؛ قد تكبر صندوق الحد
الموضع المعتاد خارج حافة الحد حول الـ padding
الاستخدام الشائع حلقات الفوكَس، تأكيد مؤقت حواف واجهة دائمة وإطارات البطاقات
في حساب حجم نموذج الصندوق لا نعم (مع قياس content-box الافتراضي)

Outline بسيط

الأسلوب والعرض واللون يعملان كثيراً مثل border — لكن الحلقة تجلس في الخارج.

outline أساسي

css
CSS Code 
.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}

اختصار outline

الثلاثي المألوف: عرض وأسلوب ولون. الأسلوب مطلوب لظهور outline — outline: 2px #000 وحده لا يكفي.

اختصار outline

css
CSS Code 
.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}

أنماط outline الشائعة

Solid وdashed وdotted خيارات يومية. outline: none يزيل الحلقة — استخدمه بحذر (انظر الفوكَس أدناه).

عينات أنماط outline

css
CSS Code 
.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }

outline-offset — ادفع الحلقة للخارج

outline-offset يحرّك الـ outline بعيداً عن حافة الحد دون تغيير حجم التخطيط. القيم الموجبة تدفع للخارج؛ السالبة تسحب للداخل.

outline مع offset

css
CSS Code 
.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

نفس المظهر، تكلفة تخطيط مختلفة

صندوقان قد يبدوان متشابهين، لكن الحد وحده يغيّر كم مساحة يشغلها العنصر.

الحد يكبر؛ الـ outline لا

css
CSS Code 
.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}

.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* كلاهما يبدو جريئاً؛ .with-border يشغل عرض تخطيط أكبر */

عادة صديقة للفوكَس

المتصفحات غالباً تستخدم outline (أو حلقة مشابهة) لإظهار فوكَس لوحة المفاتيح. لا تضع outline: none على كل شيء. إن أعدت تصميم الفوكَس، وفّر حلقة بديلة واضحة حتى يرى مستخدمو لوحة المفاتيح أين هم.

أبقِ حلقة فوكَس مرئية

css
CSS Code 
.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

جرّب بنفسك

  1. أعطِ صندوقاً بـ padding حداً وoutline أثخن — لاحظ أن الجيران يبقون في مكانهم.
  2. بدّل نمط الـ outline بين solid وdashed وdotted.
  3. أضف outline-offset: 8px وشاهد الحلقة تطفو للخارج.
  4. قارن .with-border و.with-outline جنباً إلى جنب — وزن بصري مشابه، عرض تخطيط مختلف.
  5. صمّم :focus-visible على زر بدل إزالة الـ outlines عالمياً.

أخطاء شائعة

  • معاملة outline كالحد عند حساب عرض التخطيط (الـ outline لا يضيف حجماً)
  • استخدام outline: none على كل العناصر بلا بديل فوكَس
  • توقّع أن يدفع الـ outline الجيران بعيداً (هذه مهمة margin أو border)
  • كتابة عرض ولون بلا أسلوب (solid / dashed / …)
  • خلط outline بطبقات نموذج الصندوق التي تعلّمتها للتو

ملخص

  • الـ outline يُرسم خارج الحد ولا يأخذ مساحة تخطيط
  • الاختصار: عرض وأسلوب ولون — الأسلوب مطلوب
  • outline-offset يحرّك الحلقة دون تغيير حجم الصندوق
  • الـ border للحواف الدائمة؛ الـ outline للفوكَس والحلقات المؤقتة
  • أبقِ outline فوكَس مرئياً (أو بديلاً مساوياً) لمستخدمي لوحة المفاتيح

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Css درس تعليمي