شرح CSS border color مع استخدام border shorthand

كُلُّ مَا تَحْتَاجُهُ عَنْ CSS Outline

فِي عَالَمِ تَصْمِيمِ وَتَطْويرِ المَوَاقِعِ، نُرَكِّزُ دَائِمًا عَلَى جَمَالِيَّاتِ العَنَاصِرِ بِاسْتِخْدَامِ الخَصَائِصِ الشَّهِيرَةِ مِثْلَ الحَوَافِّ (border) وَالهَوَامِشِ (padding وَ margin). لَكِنَّ هُنَاكَ بَطَلًا خَفِيًّا غَالِبًا مَا يَتِمُّ تَجَاهُلُهُ أَوْ خَلْطُهُ بِغَيْرِهِ، وَهُوَ الإِطَارُ الخَارِجِيُّ (CSS Outline).

إِلَيْكَ دَلِيلًا شَامِلًا وَحَصْرِيًّا يُفَصِّلُ كُلَّ مَا تَحْتَاجُهُ عَنْ هَذِهِ الخَاصِّيَّةِ، مَعَ شَرْحِ كَيْفِيَّةِ عَمَلِهَا، وَفَارِقِهَا الجَوْهَرِيِّ عَنِ الحَوَافِّ، وَكَيْفِيَّةِ اسْتِخْدَامِهَا بِاحْتِرَافِيَّةٍ.

---

مَا هُوَ CSS Outline؟

الإِطَارُ الخَارِجِيُّ (Outline) هُوَ خَطٌّ يُرْسَمُ حَوْلَ العَنَاصِرِ (خَارِجَ نِطَاقِ الحَوَافِّ border) لِغَرَضٍ أَسَاسِيٍّ وَهُوَ جَذْبُ الِانْتِبَاهِ أَوْ تَحْدِيدُ العُنْصُرِ النَّشِطِ، وَهُوَ يَلْعَبُ دَوْرًا حَاسِمًا فِي تَحْسِينِ تَجْرِبَةِ المُسْتَخْدِمِ وَإِمْكَانِيَّةِ الوُصُولِ (Accessibility).

تُكْتَبُ الخَاصِّيَّةُ المُخْتَصَرَةُ لَهُ بِالشَّكْلِ التَّالِي:

outline: [width] [style] [color];

---

الفُرُوقُ الجَوْهَرِيَّةُ: Outline مُقَابِلَ Border

مِنَ السَّهْلِ الخَلْطُ بَيْنَ الحَوَافِّ وَالإِطَارِ الخَارِجِيِّ، لَكِنَّهُمَا يَخْتَلِفَانِ تَمَامًا فِي سُلُوكِيَّاتِ المُتَصَفِّحِ:

وَجْهُ المُقَارَنَةِ	الإِطَارُ الخَارِجِيُّ (Outline)	الحَوَافُّ (Border)
المِسَاحَةُ وَحَجْمُ العُنْصُرِ	لَا يَشْغَلُ أَيَّ مِسَاحَةٍ فِي مُخَطَّطِ الصَّفْحَةِ (Layout)، أَيْ أَنَّهُ لَا يُغَيِّرُ حَجْمَ العُنْصُرِ وَلَا يُحَرِّكُ العَنَاصِرَ المُجَاوِرَةَ عِنْدَ ظُهُورِهِ.	يَأْخُذُ مِسَاحَةً مِنْ أَبْعَادِ العُنْصُرِ الإِجْمَالِيَّةِ، وَقَدْ يَتَسَبَّبُ بِظُهُورِهِ فَجْأَةً فِي تَحْرِيكِ العَنَاصِرِ الأُخْرَى.
مَوْقِعُ الرَّسْمِ	يُرْسَمُ خَارِجَ حُدُودِ الحَوَافِّ (border).	يُرْسَمُ دَاخِلَ نِطَاقِ العُنْصُرِ (فَوْقَ الـ padding وَ margin).
شَكْلُ الإِطَارِ	يَكُونُ عَادَةً مُسْتَطِيلًا (رَغْمَ أَنَّ بَعْضَ المُتَصَفِّحَاتِ الحَدِيثَةِ تَدْعَمُ انْحِنَاءَهُ مَعَ border-radius).	يَتْبَعُ دَائِمًا انْحِنَاءَ زَوَايَا العُنْصُرِ (border-radius) بِشَكْلٍ مِثَالِيٍّ.
التَّحَكُّمُ بِالجِهَاتِ	يَجِبُ أَنْ يُحِيطَ بِالعُنْصُرِ مِنْ جَمِيعِ الجِهَاتِ الأَرْبَعِ، وَلَا يُمْكِنُ تَخْصِيصُ جِهَةٍ مُعَيَّنَةٍ (مِثْلَ outline-top).	يُمْكِنُ تَخْصِيصُهُ لِكُلِّ جِهَةٍ عَلَى حِدَةٍ (مِثْلَ border-left).

---

الخَصَائِصُ التَّفْصِيلِيَّةُ لِـ Outline

يُمْكِنُكَ التَّحَكُّمُ فِي الإِطَارِ الخَارِجِيِّ مِنْ خِلَالِ أَرْبَعِ خَصَائِصَ فَرْعِيَّةٍ:

1. outline-style (نَمَطُ الإِطَارِ)

وَهِيَ الخَاصِّيَّةُ الأَهَمُّ، فَلَنْ يَظْهَرَ الإِطَارُ بِدُونِ تَحْدِيدِ نَمَطِهِ. مِنَ أَبْرَزِ القِيَمِ:

• solid: خَطٌّ مُسْتَمِرٌّ وَنَقِيٌّ.
• dashed: خَطٌّ مُتَقَطِّعٌ (شَرَطَاتٌ).
• dotted: خَطٌّ مُنَقَّطٌ.
• double: خَطٌّ مُزْدَوِجٌ.

2. outline-width (سُمْكُ الإِطَارِ)

تُحَدِّدُ مَدَى ثَخَانَةِ الخَطِّ، وَتَأْخُذُ قِيَمًا مِثْلَ (thin, medium, thick) أَوْ قِيَمًا دَقِيقَةً بِالبِكْسِل مِثْلَ 3px.

3. outline-color (لَوْنُ الإِطَارِ)

تَأْخُذُ أَيَّ قِيمَةٍ لَوْنِيَّةٍ (Hex, RGB, مِسَمَّيَاتِ الأَلْوَانِ). وَتَدْعَمُ أَيْضًا قِيمَةً ذَكِيَّةً جِدًّا وَهِيَ invert، وَالَّتِي تَقُومُ بِعَكْسِ لَوْنِ الخَلْفِيَّةِ تِلْقَائِيًّا لِيَظَلَّ الإِطَارُ مَرْئِيًّا بِغَضِّ النَّظَرِ عَنْ تَغَيُّرِ أَلْوَانِ المَوْقِعِ.

4. outline-offset (الإِزَاحَةُ - السِّلَاحُ السِّرِّيُّ!)

هَذِهِ الخَاصِّيَّةُ مُذْهِلَةٌ؛ فَهِيَ تُتِيحُ لَكَ تَرْكَ مِسَاحَةٍ فَارِغَةٍ بَيْنَ الحَافَّةِ (border) وَإِلإِطَارِ الخَارِجِيِّ (outline).

• إِذَا أَعْطَيْتَهَا قِيمَةً مُوجَبَةً (مِثْلَ 5px)، سَيَتَوَسَّعُ الإِطَارُ وَيَبْتَعِدُ عَنِ العُنْصُرِ.
• إِذَا أَعْطَيْتَهَا قِيمَةً سَالِبَةً (مِثْلَ -5px)، سَيَنْكَمِشُ الإِطَارُ لِيَدْخُلَ دَاخِلَ العُنْصُرِ.

---

مِثَالٌ تَطْبِيقِيٌّ عَمَلِيٌّ

لِنَفْتَرِضْ أَنَّ لَدَيْنَا زِرًّا وَنُرِيدُ إِبْرَازَهُ بِشَكْلٍ أَنِيقٍ عِنْدَ تَمْرِيرِ الفَأْرَةِ (Hover) أَوْ عِنْدَ التَّنَقُّلِ عَبْرَ لَوْحَةِ المَفَاتِيحِ (Focus):

.button-profile {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: 2px solid #0056b3;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* التَّأْثِيرُ عِنْدَ التَّفَاعُلِ */
.button-profile:focus-visible {
  outline: 3px solid #ffc107; /* إِطَارٌ خَارِجِيٌّ ذَهَبِيٌّ */
  outline-offset: 4px;       /* إِزَاحَةٌ بِمِقْدَارِ 4 بِكْسِل لِإِعْطَاءِ مَظْهَرٍ عَائِمٍ */
}

---

⚠️ تَحْذِيرٌ هَامٌّ بِخُصُوصِ إِمْكَانِيَّةِ الوُصُولِ (Accessibility)

يَلْجَأُ بَعْضُ المُطَوِّرِينَ إِلَى إلْغَاءِ الإِطَارِ الخَارِجِيِّ تَمَامًا لِأَنَّهُ قَدْ يُفْسِدُ التَّصْمِيمَ فِي نَظَرِهِمْ، فَيَكْتُبُونَ:

*:focus {
    outline: none; /* أَوْ outline: 0; */
}

تَجَنَّبْ هَذَا تَمَامًا إِلَّا إِذَا كُنْتَ سَتُوَفِّرُ بَدِيلًا وَاضِحًا! إِلْغَاءُ هَذِهِ الخَاصِّيَّةِ دُونَ بَدِيلٍ يَجْعَلُ مَوْقِعَكَ غَيْرَ قَابِلٍ لِلاِسْتِخْدَامِ مِنْ قِبَلِ الأَشْخَاصِ الَّذِينَ يَتَصَفَّحُونَ المَوَاقِعَ بِاسْتِخْدَامِ لَوْحَةِ المَفَاتِيحِ (زِرِّ Tab) بَدَلًا مِنَ الفَأْرَةِ، حَيْثُ لَنْ يَعْرِفُوا أَيْنَ يَقِفُونَ عَلَى الصَّفْحَةِ. الاِسْتِخْدَامُ الاِحْتِرَافِيُّ هُوَ تَخْصِيصُ مَظْهَرِ outline لِيُنَاسِبَ هُوِيَّةَ مَوْقِعِكَ بَدَلًا مِنْ حَذْفِهِ.