| المفهوم أو الخاصية | طريقة العمل والخصائص البرمجية | الأهمية في التصميم وتجربة المستخدم |
|---|---|---|
| عدم التأثير على التخطيط | يرسم خارج حدود العنصر تماماً ولا يشغل أي مساحة في الصفحة | يحمي التصميم من الاهتزاز أو تشريد العناصر المجاورة عند ظهور الإطار فجأة |
| شكل الإطار الخارجي | يكون دائماً على شكل مستطيل أو مربع حاد الحواف في معظم المتصفحات | لا يتأثر بخاصية الحواف المدورة border-radius ويبقى ثابتاً هندسياً |
| مكان الرسم البصري | يلتف حول إطار الـ border من الخارج تماماً دون التداخل معه | يصنع طبقة حماية بصرية إضافية تفصل العنصر عن بقية محتويات الصفحة |
| مؤشر التركيز Focus Indicator | هو الإطار التلقائي الذي يظهره المتصفح حول الأزرار والحقول عند تحديدها بالكيبورد | من الخطأ البرمجي إزالته عبر كود outline none دون توفير بديل واضح لأنه يحرم ذوي الاحتياجات الخاصة من تصفح الموقع |
| إزاحة الحد الخارجي outline-offset | خاصية تتحكم في حجم الفراغ الفاصل بين حدود العنصر وبين الـ outline | تتيح إبعاد الإطار للخارج لمنحه مظهراً جميلاً أو إدخاله للداخل عند استخدام قيم سالبة |
| صياغة الكود وكتابته | يكتب في سطر واحد تماماً مثل طريقة كتابة إطار الـ border العادي | يحدد فيه السمك أولاً بالبكسل ثم نوع الخط مثل solid ثم اللون المطلوب بالتفصيل |
**outline** يشبه border لكن بفوارق جوهرية:
1. **لا يؤثر على التخطيط** — لا يأخذ مساحة ولا يزيح العناصر الأخرى. 2. **لا يقبل border-radius** — دائماً مستطيلي (في معظم المتصفحات). 3. **يُرسم خارج border تماماً**.
**الاستخدام الأهم: مؤشر التركيز (Focus Indicator)** المتصفحات تضيف outline تلقائياً لعناصر التركيز. من الخطأ الشائع إزالته بـ `outline: none` بدون بديل — هذا يضر بالوصولية.
**outline-offset** يتحكم في المسافة بين outline والعنصر (تقبل القيم السالبة لإدخاله للداخل).
**الصياغة:** مثل border تماماً: `outline: width style color;`
| 1 | /* مؤشر تركيز مخصص للوصولية */ |
| 2 | button:focus-visible { |
| 3 | outline: 3px solid #3b82f6; |
| 4 | outline-offset: 2px; |
| 5 | } |
| 6 | |
| 7 | /* outline داخل العنصر */ |
| 8 | .inset-outline { |
| 9 | outline: 2px dashed white; |
| 10 | outline-offset: -8px; |
| 11 | } |
مثال 1: بديل outline للأزرار
| 1 | /* ❌ خطأ: إزالة outline بدون بديل */ |
| 2 | button:focus { outline: none; } |
| 3 | |
| 4 | /* ✅ صحيح: استبداله بتأثير مرئي واضح */ |
| 5 | button:focus-visible { |
| 6 | outline: none; |
| 7 | box-shadow: 0 0 0 3px rgba(59,130,246,0.5); |
| 8 | } |