خاصية outline في لغة CSS تُستخدم لرسم خط حول عنصر HTML، يشبه إلى حد كبير خاصية border، لكن مع بعض الاختلافات المهمة. تُستخدم outline عادةً لإبراز العناصر، مثل عند التركيز عليها (focus) أو عند النقر عليها (active)، دون التأثير على تخطيط الصفحة.

الفرق بين outline و border:

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

خصائص outline:

تُعتبر outline خاصية مُختصرة (shorthand property) تجمع عدة خصائص فرعية:

  • outline-width: تُحدد سُمك الخط. القيم المُمكنة:
    • thin
    • medium (القيمة الافتراضية)
    • thick
    • قيمة رقمية بوحدات البكسل (px) أو غيرها.
  • outline-style: تُحدد شكل الخط. القيم المُمكنة:
    • none (القيمة الافتراضية، لا يتم رسم أي خط)
    • dotted (خط مُنقط)
    • dashed (خط مُتقطع)
    • solid (خط مُتصل)
    • double (خط مُزدوج)
    • groove (تأثير ثلاثي الأبعاد)
    • ridge (تأثير ثلاثي الأبعاد)
    • inset (تأثير ثلاثي الأبعاد)
    • outset (تأثير ثلاثي الأبعاد)
  • outline-color: تُحدد لون الخط. القيم المُمكنة:
    • اسم اللون (مثل red، blue)
    • قيمة Hex (مثل #FF0000)
    • قيمة RGB (مثل rgb(255, 0, 0))
    • قيمة HSL (مثل hsl(0, 100%, 50%))
    • invert (يُعكس لون الخلفية)
  • outline-offset: تُحدد المسافة بين الخط وحدود العنصر. قيمة رقمية بوحدات البكسل (px) أو غيرها.

مثال:

CSS
button {
  outline-style: solid;
  outline-color: blue;
  outline-width: 2px;
  outline-offset: 5px;
}

input:focus {
  outline: 3px dashed red; /* خاصية مختصرة */
}

في هذا المثال:

  • يتم رسم خط أزرق مُتصل حول أزرار button بسُمك 2 بكسل، مع مسافة 5 بكسل بين الخط وحدود الزر.
  • عند التركيز على حقول الإدخال input، يتم رسم خط أحمر مُتقطع بسُمك 3 بكسل.

متى نستخدم outline؟

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

ملخص هام:

الخاصيةالوصف
outlineخاصية مختصرة لضبط جميع خصائص outline في آن واحد.
outline-widthتُحدد سُمك الخط.
outline-styleتُحدد شكل الخط (مُتصل، مُتقطع، مُنقط، إلخ).
outline-colorتُحدد لون الخط.
outline-offsetتُحدد المسافة بين الخط وحدود العنصر.

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