CSSالحدود الخارجية

مفهوم الحدود الخارجية

الحدود الخارجية ( Outline ) هي خطوط يمكن إظهارها حول العناصر من كل الجهات مثل الحدود العادية ( Border ) و لكنها تستخدم لأهداف أخرى هي إظهار حدود مؤقتة حول العنصر الذي يقف عنده المستخدم مثل الزر الذي نقر عليه أو مربع النص الذي يكتب فيه و كذلك يمكن استخدامها لاكتشاف أخطاء القياسات الموضوعة للعناصر.

الحدود الخارجية تظهر حول الحدود التي يمكن إضافتها للعنصر.

في حال كانت زواية حدود العنصر مائلة فإن الحدود الخارجية ستميل مثلها.

يمكن إضافة هامش بين حدود العنصر و حدوده الخارجية ستميل مثلها.

خصائص الحدود الداخلية و الخارجية

التعامل مع الحدود الخارجية يشبه كثيراً التعامل مع الحدود العادية و القيم التي يمكن وضعها لخصائصهما هي نفسها و لكن الفرق بينهما أن الحدود الخارجية فيها خيارات أقل.

على سبيل المثال، الحدود العادية يمكن تحديد حجم و لون و شكل كل جهة فيها على حدا و هذا غير ممكن في الحدود الخارجية حيث يمكن تحديد شكل الحدود و حجمها و لونها من كل الجهات بذات القدر.

تحديد شكل الحدود الخارجية العنصر

لتحديد شكل الحدود الخارجية نضيف الخاصية outline-style و من ثم نمرر لها إحدى القيم التالية:

• dotted لإظهار الحدود الخارجية كنقط.
• dashed لإظهار الحدود الخارجية كخط متقطع.
• solid لإظهار الحدود الخارجية كخط.
• double لإظهار الحدود الخارجية كخط مزدوج.
• groove لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها أخدود.
• ridge لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها قمة.
• inset لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة السفلية ناحية اليمين.
• outset لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة العلوية ناحية اليسار.
• none لإزالة الحدود الخارجية و هي نفسها outline-width: 0;.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود خارجية لها شكل محدد حولها.
لتبسيط الشرح جعلنا أسماء الكلاسات مثل أسماء أشكال الحدود الخارجية التي تظهرها.

.dotted { 
    outline-style: dotted;
}

.dashed {
    outline-style: dashed;
}

.solid {
    outline-style: solid;
}

.double {
    outline-style: double;
}

.groove {
    outline-style: groove;
}

.ridge {
    outline-style: ridge;
}

.inset {
    outline-style: inset;
}

.outset {
    outline-style: outset;
}

.none {
    outline-style: none;
}

تحديد سمك الحدود الخارجية

لتحديد سمك الحدود الخارجية نضيف الخاصية outline-width و من ثم نمرر لها إحدى القيم التالية:

• thin لجعل الحدود الخارجية رفيعة السمك.
• medium لجعل الحدود الخارجية متوسطة السمك.
• thick لجعل الحدود الخارجية عريضة السمك.
• رقم بالبكسل px أو بوحدة قياس أخرى ليمثل سمك الحدود الخارجية.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود خارجية أحجامها مختلفة.

.one {
    outline-style: solid;
    outline-width: 2px;
}

.two {
    outline-style: solid;
    outline-width: medium;
}

.three {
    outline-style: solid;
    outline-width: thick;
}

تحديد لون الحدود الخارجية

لتلوين حدود العنصر الخارجية نستخدم الخاصية outline-color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.

فيما يلي قمنا بتلوين الحدود الخارجية للعناصر بـألوان مختلفة.

.one {
    outline-style: solid;
    outline-color: red;
}

.two {
    outline-style: solid;
    outline-color: green;
}

.three {
    outline-style: solid;
    outline-color: blue;
}

تعريف كل خصائص الحدود الخارجية بسطر واحد

لتحديد سمك، شكل و لون حدود العنصر الخارجية بشكل مختصر أكتب outline و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

في المثال التالي قمنا بإظهار حدود خارجية سمكها 5 بكسل على شكل خط لونه أحمر.

.demo {
    outline: 5px solid red;
}

إبعاد الحدود الخارجية عن الحدود الأصلية للعنصر

لإبعاد الحدود الخارجية للعنصر عن حدوده الأساسية نضيف الخاصية outline-offset و من ثم نمرر لها رقم بالبكسل أو بوحدة قياس أخرى ليمثّل حجم الفراغ بينهما.

في المثال التالي قمنا بإبعاد حدود العنصر الأساسية عن حدوده الخارجية بمقدار 5 بكسل.

.demo {
    border: 2px solid black;
    outline: 2px solid cadetblue;
    outline-offset: 5px;
}

في المثال التالي قمنا بإبعاد حدود العنصر الأساسية عن محتواه بمقدار 10 بكسل، و قمنا بإعداد حدوده الخارجية عن حدوده الأساسية بمقدار 5 بكسل.

.demo {
    border: 2px solid black;
    outline: 2px solid cadetblue;
    outline-offset: 5px;
    padding: 10px;
}

طريقة معرفة العنصر الذي يسبب مشكلة في حجم الصفحة

حين يصبح محتوى الصفحة كبيراً أحياناً تبدأ بملاحظة أنه يظهر شريط تمرير ( Scrollbar ) لسبب غير معروف و هذا الأمر يجعل الصفحة تظهر بشكل سيئ أمام المستخدم.

حتى نعرف من هو العنصر الذي يسبب المشكلة نقوم بإظهار الحدود الخارجية لجميع العناصر و من ثم نراقب من هو العنصر الذي يتطلب مساحة زيادة.

* {
    outline: 1px solid red;
}

كمثال عملي لاحظ أن الصفحة التالية يظهر فيها شريط تمرير في الأسفل مع أنه لا يوجد أي داعي لأن يظهر.

جرب الكود

لمعرفة سبب ظهور هذا الشريط نحتاج أن نعرف الحجم الفعلي للعناصر لكي نعرف من هو العنصر الذي يحتاج مساحة زيادة و الذي بسببه ظهر هذا الشريط. لذلك نقوم بإظهار حدود خارجية لجميع عناصر الصفحة كالتالي.

الآن نقوم بإزاحة شريط التمرير فيظهر لنا العنصر الذي يسبب هذه المشكلة بكل سهولة.

جرب الكود