في هذا الدرس 6تصفّح المواضيع
يمثل الإطار الخارجي — Outline في لغة CSS حلقة بصرية تُرسَم مباشرةً خارج حافة إطار الصندوق border بهدف إبراز الأزرار أو الحقول التفاعلية أو البطاقات المحددة بوضوح فوري على الشاشة.
يمتاز هذا الإطار الخارجي بميزة هندسية فارقة؛ فهو لا يحجز أي حيز تخطيطي في الصفحة، فلا يزيد عرض العنصر أو ارتفاعه ولا يدفع العناصر المجاورة له قيد أنملة كما يوضح المخطط والمثال العملي التالي:
.focus-demo {
border: 2px solid #cbd5e1;
outline-style: solid;
outline-width: 3px;
outline-color: #7750b2;
}يتساءل كثير من المتعلمين متى نعتمد على border ومتى نلجأ إلى Outline؟ يوضح الجدول الهندسي التالي الفروق الحاسمة بينهما:
| وجه المقارنة الهندسي | إطار الصندوق border | الإطار الخارجي Outline |
|---|---|---|
| أبعاد الصندوق | جزء من الصندوق ويزيد مساحته المحجوزة | يُرسَم خارج الصندوق ويضيف 0px لأبعاده |
| العناصر المجاورة | زيادة سماكته تدفع العناصر المجاورة | لا يزيح أو يحرك العناصر المجاورة مطلقاً |
| تخصيص الأضلاع | يدعم أضلاعاً منفردة مثل border-left | يحيط دائماً بكامل العنصر كحلقة متصلة |
| الوظيفة الأساسية | تأطير هيكلي دائم وفواصل بين الأقسام | مؤشرات التركيز وحلقات التنبيه البصرية |
توفّر CSS منظومة خصائص متكاملة للتحكم الدقيق في مظهر الإطار الخارجي عبر دروس هذا الفصل:
- خاصية النمط
outline-style: تحدد شكل خط الحلقة مثلsolidأوdashed، وقيمتها الابتدائية هيnoneفلا تظهر الحلقة إلا بتحديدها. - خاصية السماكة
outline-width: تضبط عرض الحلقة بوحدات الطول كالبكسل أو الكلمات المفتاحية القياسية. - خاصية اللون
outline-color: تحدد لون الحلقة البصرية، إلى جانب إمكانية التحكم في المسافة الفاصلة والاختصار الشامل اللذين سنتناولهما في الدروس القادمة من هذا الفصل. - عدم التجزئة لأضلاع منفردة: لا توجد في
CSSخصائص لضلع علوي أو جانبي للإطار الخارجي؛ بل يلتف دائماً كحلقة موحدة حول جميع جوانب العنصر.
ماذا يحدث عند رسم إطار خارجي حول بطاقة ناعمة أو زر كبسولة يمتلك خاصية border-radius؟ في جميع المتصفحات الحديثة، يتبع الإطار الخارجي مسار انحناء border-radius تلقائياً ويلتف حول الزوايا المستديرة بتوازٍ هندسي متناسق.
شغّل المثال التالي لملاحظة كيف تنحني الحلقة الخارجية بانسجام تام حول كل من البطاقة المستديرة وزر الكبسولة:
.rounded-card {
border-radius: 14px;
outline-style: solid;
outline-width: 3px;
outline-color: #0f766e;
}تعتمد جميع المتصفحات على الإطار الخارجي ليكون مؤشر التركيز البصري لمستخدمي لوحة المفاتيح الذين يتنقلون بين الروابط والأزرار والحقول بالضغط على مفتاح Tab دون فأرة.
إن إلغاء هذه الحلقة عبر كتابة outline-style: none; دون توفير بديل بصري واضح وعالي التباين يُعد خطأً جسيماً في إمكانية الوصول؛ لأن المستخدم يفقد أثر موضعه الحالي داخل الصفحة! بدلاً من إخفاء الحلقة، نسّق نمطها وسماكتها ولونها بتباين واضح ينسجم مع تصميمك:
.visible-ring {
background-color: #1e293b;
color: #ffffff;
outline-style: solid;
outline-width: 3px;
outline-color: #2563eb;
}للتحقق عملياً من أن الإطار الخارجي لا يضيف أي بكسل إلى أبعاد الصندوق، انقر بالزر الأيمن على العنصر واختر Inspect ثم افتح تبويب Computed: ستجد أرقام العرض والارتفاع ثابتة تماماً حتى لو رفعت outline-width إلى 6px.
اختبر ثبات موضع الصناديق المتجاورة عند تفعيل الحلقة الخارجية في المختبر التفاعلي التالي:
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرّفت في هذا الدرس على وظيفة الإطار الخارجي خارج حدود الصندوق وثبات أبعاد العنصر معه، وتتبعه التلقائي لاستدارة border-radius، وضرورة الحفاظ عليه لمستخدمي مفتاح Tab. في الخطوة التالية ننتقل إلى درس تحديد نوع الإطار الخارجي outline في لغة CSS لإتقان جميع أنماط الخط المتاحة وتفعيلها عملياً.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS Outline الإطار الخارجي
- حلقة بصرية تُرسَم خارج حدود إطار العنصر لإبرازه دون حجز مساحة تخطيطية أو تغيير أبعاده.
- للمراجعة
- 02 Focus Indicator مؤشر التركيز البصري
- الحلقة المرئية التي تحيط بالزر أو الرابط أو الحقل النشط حالياً أثناء التنقل بمفتاح Tab في لوحة المفاتيح.
- للمراجعة
- 03 Zero Layout Shift انعدام إزاحة التخطيط
- الميزة الهندسية للإطار الخارجي حيث لا تؤدي إضافته أو زيادة سماكته إلى تحريك العناصر المجاورة.
- للمراجعة
- 04 Uniform Ring Wrapping إحاطة الحلقة الموحدة
- القاعدة القياسية التي تجعل الإطار الخارجي يلتف حول جوانب العنصر الأربعة كوحدة متصلة غير قابلة للتجزئة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات نفاذية محتوى الويب العالمية التي توجب توفير مؤشر تركيز واضح وعالي التباين لمستخدمي لوحة المفاتيح.
- للمراجعة
- 02 CLS CLS
- Cumulative Layout Shift
- مقياس ثبات التخطيط البصري الذي يظل مستقراً عند إبراز العناصر بالإطار الخارجي بدلاً من تكبير سماكة الحدود.
- للمراجعة
- 03 UI UI
- User Interface
- عناصر واجهة المستخدم التفاعلية كالأزرار والحقول التي يوجه الإطار الخارجي انتباه الزائر إليها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر التجربة الأول وارفع قيمة outline-width داخل .focus-demo من 3px إلى 8px، وتأكد من عدم تحرك الصندوق الأسفل منه إطلاقاً.
-
في محرر التجربة الثاني، غيّر خاصية outline-color في .pill-control إلى #0f766e و outline-width إلى 4px لمشاهدة انسياب الحلقة حول الكبسولة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.