في هذا الدرس 6تصفّح المواضيع
تبدأ جميع عناصر الصفحة بقيمة ابتدائية لخاصية outline-style تساوي none. ولهذا السبب لن يظهر أي أثر بصري لو حددت outline-width أو outline-color بمفردهما؛ بل لا بد من تعيين قيمة مرئية لخاصية outline-style أولاً لتشغيل الحلقة الخارجية.
تأمل المخطط التوضيحي والمثال العملي التالي لملاحظة الفرق المباشر بين غياب النمط وتفعيله:
.inactive-ring {
outline-width: 4px;
outline-color: #dc2626;
}
.active-ring {
outline-style: solid;
outline-width: 4px;
outline-color: #7750b2;
}تهيمن ثلاثة أنماط ثنائية الأبعاد على تصميم الواجهات الحديثة لصفاء حوافها ووضوح قراءتها بمختلف السماكات:
- المتصل
solid: يرسم حلقة مستمرة غير متقطعة، ويُعد الخيار الأول لحلقات التركيز الأساسية والعناصر النشطة. - المتقطع
dashed: يرسم شُرطاً متساوية المسافات، ويُفضَّل لروابط التخطي السريعة والمناطق القابلة للتحرير أو السحب. - المنقط
dotted: يرسم سلسلة نقاط متتابعة تمنح تمييزاً هادئاً شرط اختيار لون عالي التباين مع الخلفية.
.ring-solid {
outline-style: solid;
}
.ring-dashed {
outline-style: dashed;
}
.ring-dotted {
outline-style: dotted;
}تقدّم خاصية outline-style قيمتين مميزتين لتلبية احتياجات الإبراز الواضح:
- الخط المزدوج
double: يرسم خطين متوازيين تفصل بينهما فجوة دقيقة؛ احرص دائماً على منحه سماكةoutline-widthلا تقل عن3pxأو4pxحتى يتسع الحيز للخطين والفراغ الفاصل بينهما. - النمط التلقائي
auto: يفوّض المتصفح ونظام التشغيل برسم حلقة التركيز الأصيلة المدمجة لديه، وهي غالباً حلقة مزدوجة التباين مصممة لتبقى مقروءة فوق الخلفيات الفاتحة والداكنة على السواء.
تدعم خاصية outline-style أربع قيم ثلاثية الأبعاد كلاسيكية يشتق المتصفح تدرجات الظل والإضاءة فيها من قيمة outline-color:
- الغائر والبارز
grooveوridge: يحاكيان أخدوداً محفوراً للداخل فيgrooveمقابل إطار ناتئ للخارج فيridge. - المنخفض والمرتفع
insetوoutset: يوحيان بأن الصندوق مضغوط للداخل أو بارز كأزرار الأنظمة الكلاسيكية؛ ونظراً لضعف وضوح التظليل عند السماكات الرفيعة، تفضّل الواجهات العصرية نمطيsolidوdouble.
.ring-double {
outline-style: double;
outline-width: 5px;
}
.ring-ridge {
outline-style: ridge;
outline-width: 6px;
}تذكّر دائماً قاعدتين حاكمتين عند كتابة outline-style في أوراق الأنماط:
- قبول قيمة مفردة واحدة حصراً: على عكس
border-style: solid dashed;التي تقبل قيماً متعددة للجوانب، لا تقبلoutline-styleسوى كلمة مفتاحية واحدة فقط تحيط بكامل العنصر؛ فكتابةoutline-style: solid dashed;تُعد خطأً نحوياً يرفضه المتصفح بالكامل. - الإيقاف بالقيمة
none: تعيد القيمةoutline-style: none;إخفاء الحلقة الخارجية وتصفير سماكتها المحسوبة إلى0px، لذا تجنب ترك الأزرار التفاعلية بلا تمييز بديل واضح.
يلخّص الجدول المرجعي والمختبر التفاعلي التالي جميع القيم العشر المتاحة لخاصية outline-style لاختيار الأنسب لكل عنصر في واجهتك:
| مجموعة النمط | القيم القياسية المتاحة | الاستخدام الموصى به في الواجهات |
|---|---|---|
| الواضح والنظامي | solid، auto | حلقات التركيز الأساسية للأزرار والروابط وحقول الإدخال |
| المتقطع والمنقط | dashed، dotted | روابط التخطي ومناطق السحب والتنبيهات الثانوية |
| المزدوج | double | إبراز البطاقات المميزة بسماكة 3px فأكثر |
| الثلاثي والإيقاف | groove، ridge، inset، outset، none | القوالب الكلاسيكية أو الإلغاء المشروط ببديل وصول واضح |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تفعيل الإطار الخارجي عبر خاصية outline-style، والمفاضلة بين أنماط solid و dashed و dotted و double و auto والأنماط البارزة، مع الالتزام بتمرير قيمة واحدة موحدة لكامل العنصر. في الخطوة التالية ننتقل إلى درس عرض الإطار الخارجي outline في لغة CSS لضبط سماكة الحلقة بالكلمات المفتاحية ووحدات البكسل.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Outline Style Activation تفعيل نمط الإطار الخارجي
- تعيين كلمة مفتاحية مرئية لخاصية outline-style بدلاً من القيمة الافتراضية none لتمكين ظهور السماكة واللون.
- للمراجعة
- 02 Auto Outline Keyword النمط التلقائي auto
- قيمة خاصة في outline-style تطلب من المتصفح رسم حلقة التركيز الأصيلة المدمجة في نظام التشغيل.
- للمراجعة
- 03 Double Outline Ring الحلقة الخارجية المزدوجة
- قيمة double التي ترسم خطين خارجيين متوازيين حول العنصر عند ضبط السماكة على 3px أو أكثر.
- للمراجعة
- 04 Single-Value Ring Rule قاعدة القيمة الموحدة
- القاعدة النحوية التي تلزم خاصية outline-style بقبول قيمة واحدة فقط تحيط بكامل العنصر دون تجزئة للجوانب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 OS OS
- Operating System
- نظام التشغيل الذي يعتمد المتصفح أسلوب حلقة التركيز الأصيلة الخاصة به عند استخدام القيمة auto.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- لغة أوراق الأنماط المتتالية التي تحدد القيم العشر لخاصية outline-style في وحدة واجهة المستخدم.
- للمراجعة
- 03 W3C W3C
- World Wide Web Consortium
- رابطة الويب العالمية المشرفة على مواصفة واجهة المستخدم القياسية في CSS.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر التجربة الأول وأضف التصريح outline-style: dashed; داخل .inactive-ring ليظهر إطاره الخارجي الأحمر ذو السماكة 4px فوراً.
-
في محرر التجربة الثالث، بدّل قيمة outline-style داخل .ring-ridge من ridge إلى auto ولاحظ كيف يرسم متصفحك حلقته الأصيلة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.