في هذا الدرس 5تصفّح المواضيع
بعد تفعيل نمط الحلقة عبر outline-style وتحديد سماكتها عبر outline-width، تأتي خاصية outline-color لتمنح الحلقة دلالتها البصرية الواضحة. وبفضل استقلال outline-color تماماً عن لون الحدود border-color، يستطيع حقل الإدخال الاحتفاظ بحدوده الرمادية الهادئة مع إظهار حلقة خارجية زرقاء أو قرمزية مميزة حوله.
يساعد هذا التمييز اللوني الزائر على قراءة حالة العناصر بلمحة سريعة؛ كاللون الأزرق للحقل النشط واللون القرمزي للحقل الذي يتطلب مراجعة البيانات كما في المثال القابل للتشغيل أدناه:
.field-active {
outline-style: solid;
outline-width: 3px;
outline-color: #2563eb;
}
.field-alert {
outline-style: solid;
outline-width: 3px;
outline-color: crimson;
}أيّ لون يختاره المتصفح إذا كتبت outline-style: solid; و outline-width: 3px; دون تحديد outline-color؟ عند استخدام الأنماط القياسية كالخط المتصل solid أو المتقطع dashed، يستمد الإطار الخارجي تلقائياً لون النص الفعلي المحدد في خاصية color للعنصر نفسه.
قارن بين الصندوقين في المثال الحي التالي؛ فالأول أُغفلت فيه خاصية outline-color فاكتسبت حلقته اللون الأخضر الداكن darkgreen من لون النص تلقائياً، بينما خُصص للثاني لون بنفسجي مستقل عبر #7c3aed:
.auto-ring {
color: darkgreen;
outline-style: solid;
outline-width: 3px;
}
.custom-ring {
color: darkgreen;
outline-style: solid;
outline-color: #7c3aed;
}يمكنك إسناد قيمة outline-color إما بالأسماء اللونية الإنجليزية المباشرة أثناء التجريب السريع، وإما بأكواد #rrggbb السداسية والمختصرة #rgb لضمان تطابق درجة الحلقة مع دليل الهوية البصرية للمشروع:
| صيغة اللون | مثال التصريح | أنسب استخدام عملي |
|---|---|---|
| الترك الافتراضي | بدون تصريح مستقل | مطابقة لون النص color للعنصر تلقائياً |
| الأسماء اللونية | outline-color: crimson; | النماذج الأولية السريعة وتنبيهات الحالة |
| كود Hex السداسي | outline-color: #0f766e; | تطبيق درجات الهوية البصرية بدقة تامة |
| كود Hex الثلاثي | outline-color: #26f; | اختصار نظيف للأكواد المكررة الخانات #2266ff |
يفقد الإطار الخارجي فائدته الوظيفية تماماً إذا اختار المصمم درجة باهتة تذوب في خلفية الصفحة فلا يراها من يتنقل بمفتاح Tab عبر لوحة المفاتيح؛ فالحلقة الرمادية الفاتحة فوق خلفية بيضاء تكاد تختفي، كما تضيع الحلقة الكحلية فوق شريط علوي داكن.
احرص دائماً على اختبار تباين outline-color مع السطح المحيط بالعنصر: اعتمد درجات داكنة مشبعة مثل #1d4ed8 فوق الخلفيات الفاتحة، ودرجات مضيئة ساطعة مثل #fde047 فوق الأسطح الداكنة. جرّب الحالات الثلاث في المختبر التفاعلي والمحرر الحي أدناه:
.btn-on-light {
outline-style: solid;
outline-width: 3px;
outline-color: #1d4ed8;
}
.btn-on-dark {
outline-style: solid;
outline-width: 3px;
outline-color: #fde047;
}بدلاً من تخمين الأكواد اللونية بالتجربة المتكررة داخل ملف التنسيق، توفر لك أدوات المطور DevTools منتقي ألوان تفاعلياً مباشراً داخل لوحة Styles لاختبار درجات الحلقة لحظياً:
- انقر بالزر الأيمن على الزر أو الحقل واختر Inspect لفتح نافذة الفحص.
- ابحث عن تصريح
outline-colorفي لوحة Styles واضغط على المربع اللوني الصغير المجاور لاسم اللون أو كود Hex. - حرّك المؤشر داخل طيف منتقي الألوان Color Picker أو التقط لوناً من الصفحة بالقطّارة لمراقبة وضوح الحلقة مباشرةً، ثم انسخ قيمة
#rrggbbالنهائية إلى ملفك.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تخصيص لون الحلقة عبر خاصية outline-color، وفهمت استمدادها التلقائي للون النص عند عدم تحديدها، وطبّقت الأسماء اللونية وأكواد #rrggbb المعتمة مع مراعاة التباين العالي على الخلفيات الفاتحة والداكنة. في الخطوة التالية ننتقل إلى درس إزاحة الإطار الخارجي outline-offset في لغة CSS لترك مسافة فصل أنيقة بين حدود العنصر وحلقة الإبراز.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Outline Color لون الإطار الخارجي
- خاصية CSS المسمّاة outline-color التي تضبط لون الحلقة الخارجية باستقلال كامل عن لون حدود العنصر border-color.
- للمراجعة
- 02 Hexadecimal Color الكود اللوني الست عشري
- تمثيل لوني معتم من ست خانات (#rrggbb) أو ثلاث خانات (#rgb) يُستخدم لمطابقة درجات الهوية البصرية بدقة في حلقات الإطار الخارجي.
- للمراجعة
- 03 Contrast Ratio نسبة التباين البصري
- فرق السطوع البصري بين لون الحلقة ولون الخلفية المحيطة بها، ويُنصح بألا يقل عن 3:1 لضمان الوضوح التام.
- للمراجعة
- 04 DevTools Color Picker منتقي ألوان أدوات المطور
- الأداة البصرية المدمجة داخل لوحة Styles في المتصفح لمعاينة درجات outline-color واختبار وضوحها لحظياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HEX HEX
- Hexadecimal Notation
- النظام العددي ذو الأساس 16 (من 0 إلى 9 ومن A إلى F) المعتمد في CSS لتمثيل قنوات الأحمر والأخضر والأزرق.
- للمراجعة
- 02 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات إمكانية الوصول لمحتوى الويب الصادرة عن W3C، وتتضمن معيار التباين 3:1 للمؤشرات البصرية وحلقات التحديد.
- للمراجعة
- 03 CSS CSS
- Cascading Style Sheets
- لغة أوراق الأنماط المتتالية القياسية المسؤولة عن ضبط الألوان والحدود والإطارات الخارجية ومظهر صفحات الويب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر التجربة الثاني ولاحظ كيف تكتسب حلقة .auto-ring اللون الأخضر darkgreen من النص، ثم أضف إليها التصريح outline-color: #dc2626; وتحقق من تحول الحلقة للأحمر مع بقاء النص أخضر.
-
في محرر التجربة الثالث غيّر قيمة outline-color للعنصر .btn-on-dark من #fde047 إلى #5eead4 وقارن مدى وضوح الدرجة الفيروزية المضيئة فوق الخلفية الداكنة #0f172a.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.