📝 ما هي خاصية Outline في CSS؟ دليلك الشامل للمبتدئين

اليوم سنتعرف على أداة مفيدة جداً في صندوق أدوات مصمم الويب، ألا وهي خاصية outline في CSS. إذا كنت قد استخدمت border من قبل، فستجد أن outline تشبهها، لكن لها دور مختلف ومهم جداً! هيا نبدأ.

🔍 ما هو الـ Outline؟

ببساطة، الـ Outline هو خط يرسم حول العنصر، خارج الحدود (border) مباشرة. تخيل أنك تضع إطاراً من الضوء حول صورة معلقة على الحائط، هذا الإطار الخارجي هو الـ Outline.

الهدف الرئيسي من الـ Outline هو جذب انتباه المستخدم إلى عنصر معين، خاصة عندما يكون هذا العنصر في حالة "التركيز" (:focus)، مثل حقل إدخال النصوص أو رابط عند التنقل باستخدام لوحة المفاتيح.

button:focus {
    outline: 3px solid blue;
}

التعليق: عند النقر على زر أو الانتقال إليه بلوحة المفاتيح، سيظهر له إطار أزرق سميك حوله.

⚖️ الفرق الجوهري: Outline vs. Border

هذا هو أهم جزء في الدرس! 🧠 كثير من المبتدئين يخلطون بين outline و border. دعنا نوضح الفروق الرئيسية:

الميزة outline border
المساحة لا يشغل مساحة من تخطيط الصفحة. يشغل مساحة ويؤثر على حجم العنصر وتخطيط الصفحة.
الموقع يرسم خارج الـ border. يرسم حول حافة العنصر نفسها.
الشكل لا يمكن جعل أضلاعه مختلفة (كل الأضلاع متساوية). يمكن تخصيص كل ضلع (علوي، سفلي، يمين، يسار) بشكل منفصل.
الزوايا لا يتبع border-radius (دائماً مستطيل). يتبع border-radius ويمكن أن يكون دائرياً.

مثال عملي يوضح الفرق:

<!DOCTYPE html>
<html>
<head>
<style>
    .box-border {
        width: 200px;
        padding: 20px;
        border: 10px solid red; /* حدود حمراء سميكة */
        margin: 30px;
    }
    .box-outline {
        width: 200px;
        padding: 20px;
        border: 10px solid green;
        outline: 15px solid blue; /* إطار أزرق خارجي */
        margin: 30px;
    }
</style>
</head>
<body>
    <div class="box-border">عنصر مع Border فقط</div>
    <br>
    <div class="box-outline">عنصر مع Border و Outline</div>
</body>
</html>

التعليق: لاحظ أن الإطار الأزرق (الـ Outline) يرسم خارج الحدود الخضراء ولا يدفع العناصر المجاورة بعيداً، بينما الـ Border الأحمر جزء من مساحة العنصر.

🛠️ خصائص الـ Outline (البناء خطوة بخطوة)

خاصية outline هي اختصار لثلاث خصائص فرعية يمكن كتابتها معاً أو كل على حدة. هيا نتعلمها:

1. outline-style (نمط الخط)

تحدد شكل الخط. أهم قيمه هي:

  • solid (خط متصل) – الأكثر استخداماً.
  • dotted (خط منقط).
  • dashed (خط متقطع).
  • double (خط مزدوج).
  • none (إزالة الـ Outline) – ⚠️ استخدمها بحذر!.
input {
    outline-style: dotted; /* خط منقط حول حقل الإدخال */
}

2. outline-width (سمك الخط)

تحدد سماكة الخط. يمكن استخدام px, em, أو الكلمات thin, medium, thick.

a:focus {
    outline-width: 4px; /* إطار سميك عند التركيز على رابط */
}

3. outline-color (لون الخط)

تحدد لون الـ Outline. يمكن استخدام أي لون في CSS.

button:focus {
    outline-color: #ff9900; /* لون برتقالي */
}

✨ كتابة الـ Outline بطريقة مختصرة (Shorthand)

بدلاً من كتابة الخصائص الثلاث كل على حدة، يمكنك استخدام الخاصية المختصرة outline بالترتيب التالي: outline: [width] [style] [color];

مثال:

/* الطريقة الطويلة */
input:focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: red;
}

/* الطريقة المختصرة (نفس النتيجة) */
input:focus {
    outline: 2px solid red;
}

🎯 خاصية outline-offset (المسافة البادئة)

هذه خاصية رائعة! تسمح لك بتحديد المسافة بين الـ outline والـ border. قيمتها تكون بعدد البكسل (px).

img:hover {
    border: 5px solid lightgray;
    outline: 3px solid darkblue;
    outline-offset: 10px; /* مسافة 10 بكسل بين الحدود والإطار */
}

التعليق: عند المرور على الصورة، سيظهر إطار أزرق مع مسافة واضحة بينه وبين الحدود الرمادية الفاتحة.

♿ أهمية Outline في إمكانية الوصول (Accessibility)

هذا جزء مهم وأخلاقي في التصميم. 👁️ المستخدمون الذين يتنقلون في الموقع باستخدام لوحة المفاتيح (مثل ذوي الاحتياجات الخاصة) يعتمدون على outline لمعرفة أي عنصر مُحدد حالياً.

⚠️ تحذير هام: لا تقم أبداً بإزالة الـ Outline بهذه الطريقة:

*:focus {
    outline: none; /* ❌ خطأ! يضر بتجربة مستخدمي لوحة المفاتيح */
}

✅ الحل الصحيح: إذا أردت تغيير مظهر الـ Outline لأسباب تصميمية، غيّر خصائصه بدلاً من إزالته.

*:focus {
    outline: 3px dashed #2a9d8f; /* ✅ تصميم واضح وجميل */
}