random
أخبار ساخنة

شرح خاصية display في CSS — أنواعها واستخداماتها العملية

Samouel Ghaly
الصفحة الرئيسية

فَهْمُ خَاصِّيَّةِ الـ Display فِي CSS وَأَنْوَاعِهَا وَاسْتِخْدَامَاتِهَا العَمَلِيَّةِ

فِي عَالَمِ تَصْمِيمِ وَتَطْوِيرِ مَوَاقِعِ الوِيبِ بِاسْتِخْدَامِ لُغَةِ CSS، تُعْتَبَرُ خَاصِّيَّةُ display إِحْدَى أَهَمِّ وَأَقْوَى الخَصَائِصِ عَلَى الإِطْلَاقِ. هَذِهِ الخَاصِّيَّةُ هِيَ المَسْؤُولَةُ تَمَامًا عَنِ التَّحَكُّمِ فِي آلِيَّةِ رَسْمِ وَتَوْزِيعِ العَنَاصِرِ بَصَرِيًّا (Rendering Behavior): هَلْ يَتِمُّ عَرْضُ العُنْصُرِ كَكُتْلَةٍ مُسْتَقِلَّةٍ؟ أَمْ يَنْسَابُ بِجِوَارِ غَيْرِهِ فِي نَفْسِ السَّطْرِ؟ أَوْ يَتِمُّ تَنْظِيمُ مَحْتَوَاهُ الدَّاخِلِيِّ بِالِاعْتِمَادِ عَلَى أَنْظِمَةِ التَّخْطِيطِ الحَدِيثَةِ مِثْلَ Flex أَوْ Grid؟ فِي هَذَا المَقَالِ السِّيَاقِيِّ، سَنَشْرَحُ بِالتَّفْصِيلِ خِيَارَاتِ هَذِهِ الخَاصِّيَّةِ وَكَيْفِيَّةِ اِسْتِخْدَامِهَا فِي بِنَاءِ تَقْسِيمَاتٍ اِحْتِرَافِيَّةٍ.

---

لِمَاذَا خَاصِّيَّةُ Display مِحْوَرِيَّةٌ جِدًّا؟

كُلُّ عُنْصُرٍ مَكْتُوبٍ بِلُغَةِ HTML يَمْتَلِكُ قِيمَةَ عَرْضٍ اِفْتِرَاضِيَّةً يُقِرُّهَا المُتَصَفِّحُ (User Agent Stylesheet) بِنَاءً عَلَى نَوْعِ الوَسْمِ. فَعَلَى سَبِيلِ المِثَالِ: العَنَاصِرُ البِنْيَوِيَّةُ مِثْلَ <div> وَ <p> تَكُونُ كُتْلِيَّةً (Block)، بَيْنَمَا العَنَاصِرُ النَّصِّيَّةُ مِثْلَ <span> وَ <a> تَكُونُ سَطْرِيَّةً (Inline). قُدْرَتُكَ عَلَى تَغْيِيرِ هَذَا السَّلُوكِ الطَّبِيعِيِّ بِاسْتِخْدَامِ display تَمْنَحُكَ المُرُونَةَ القُصْوَى لِإِعَادَةِ تَشْكِيلِ الوَاجِهَةِ كَمَا تُرِيدُ.

---

أَنْوَاعُ Display الأَسَاسِيَّةُ وَتَأْثِيرُهَا الهَنْدَسِيُّ

1. display: block (العَرْضُ الكُتْلِيُّ)

يَقُومُ بِتَحْوِيلِ العُنْصُرِ إِلَى كُتْلَةٍ هَيْكَلِيَّةٍ مُسْتَقِلَّةٍ تَمَامًا:

  • يَبْدَأُ حَتْمًا فِي سَطْرٍ جَدِيدٍ وَيَكْسِرُ تَدَفُّقَ الكَلِمَاتِ.
  • يَمْتَصُّ العَرْضَ الأُفُقِي الكَامِلَ المُتَاحَ لَهُ بِنِسْبَةِ 100%.
  • يَسْتَجِيبُ لِتَعْيِينِ أَبْعَادِ العَرْضِ width وَالِارْتِفَاعِ height دِقَّةً.
  • يَقْبَلُ الهَوَامِشَ الخَارِجِيَّةَ وَالدَّاخِلِيَّةَ (Margin & Padding) فِي الِاتِّجَاهَاتِ الأَرْبَعَةِ. 
div {
    display: block;
    width: 300px;
    height: 150px;
    margin: 20px;
    padding: 10px;
}

2. display: inline (العَرْضُ السَّطْرِيُّ)

يَجْعَلُ العُنْصُرَ يَنْسَابُ مَعَ النُّصُوصِ تَمَامًا:

  • يَظَلُّ فِي نَفْسِ السَّطْرِ وَلَا يَنْشِئُ فَرَاغًا عَمُودِيًّا قَبْلَهُ أَوْ بَعْدَهُ.
  • تَتَقَلَّصُ مِسَاحَتُهُ لِتَكُونَ مُطَابِقَةً لِحَجْمِ المَحْتَوَى الدَّاخِلِيِّ فَقَطْ.
  • لَا يَقْبَلُ قِيَمَ الـ width أَوْ الـ height (يَتِمُّ تَجَاهُلُهَا).
  • تَعْمَلُ الهَوَامِشُ وَالفَرَاغَاتُ (Margin/Padding) فِي الِاتِّجَاهِ الأُفُقِيِّ (يَمِين/يَسَار) فَقَطْ بِشَكْلٍ صَحِيحٍ. 
span {
    display: inline;
    width: 200px;   /* لَنْ يُؤَثِّرَ عَلَى العُنْصُرِ نِهَائِيًّا */
    padding: 5px;   /* يَعْمَلُ فَقَطْ عَلَى اليَمِينِ وَاليَسَارِ */
}

3. display: inline-block (الكُتْلَةُ السَّطْرِيَّةُ الهَجِينَةُ)

هُوَ الخِيَارُ الوَسِيطُ العَبْقَرِيُّ الَّذِي يَجْمَعُ بَيْنَ مِيزَاتِ الكُتْلَةِ وَالسَّطْرِ:

  • يَبْقَى العُنْصُرُ مُصْطَفًّا فِي نَفْسِ السَّطْرِ بِجِوَارِ العَنَاصِرِ الأُخْرَى دُونَ اِنْكِسَارٍ.
  • يَمْنَحُكَ القُدْرَةَ الكَامِلَةَ عَلَى تَحْدِيدِ الأَبْعَادِ (العَرْض وَالِارْتِفَاع).
  • يَدْعَمُ وَيَسْتَجِيبُ لِجَمِيعِ خَصَائِصِ الهَوَامِشِ (Margin/Padding) فِي الجِهَاتِ الأَرْبَعَةِ. 
span {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 5px;
}

4. display: none (الإِخْفَاءُ التَّامُّ)

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

.hidden-element {
    display: none; /* اِخْتِفَاءٌ كَامِلٌ بِدُونِ تَرْكِ فَرَاغٍ */
}
---

قِيَمٌ مُتَقَدِّمَةٌ لِخَاصِّيَّةِ Display (أَنْظِمَةُ التَّخْطِيطِ الحَدِيثَةِ)

بِجَانِبِ الأَنْمَاطِ التَّقْلِيدِيَّةِ، تُدِيرُ خَاصِّيَّةُ display أَقْوَى أَنْظِمَةِ التَّقْسِيمِ الهَنْدَسِيِّ لِلْوِيبِ:

  • display: flex;: يُفَعِّلُ نِظَامَ Flexbox (المُرَبَّع المُرِن) الَّذِي يَقُومُ بِتَنْظِيمِ وَمُحَاذَاةِ العَنَاصِرِ الدَّاخِلِيَّةِ فِي اتِّجَاهٍ وَاحِدٍ (أُفُقِيٍّ أَوْ عَمُودِيٍّ) بِمُرُونَةٍ خَارِقَةٍ.
  • display: grid;: يُفَعِّلُ نِظَامَ Grid Layout (الشَّبَكَة المُرِنَة) الَّذِي يَسْمَحُ بِتَوْزِيعِ المَحْتَوَى فِي شَكْلِ أَعْمِدَةٍ وَصُوفٍ ثُنَائِيَّةِ الأَبْعَادِ لِبِنَاءِ وَاجِهَاتٍ مُعَقَّدَةٍ.
  • display: contents;: قِيمَةٌ حَدِيثَةٌ تَقُومُ بِإِلْغَاءِ وُجُودِ الصُّنْدُوقِ الحَاوِي نَفْسِهِ بَصَرِيًّا، مَعَ جِعْلِ الأَبْنَاءِ يَتَصَرَّفُونَ مُبَاشِرَةً كَأَنَّهُمْ جُزْءٌ مِنَ العُنْصُرِ الأُمِّ الأَعْلَى.
---

جَدْوَلُ المُقَارَنَةِ الشَّامِلِ لِخَاصِّيَّةِ Display

لِمَسْحِ الفُرُوقِ بَيْنَ جَمِيعِ القِيَمِ بِنَظْرَةٍ سَرِيعَةٍ، نَسْتَعْرِضُ الجَدْوَلَ التَّالِيَ:

القِيمَةُ الوَّصْفُ البَصَرِيُّ سُلُوكُ الأَبْعَادِ وَالهَوَامِشِ
block كُتْلَةٌ مُسْتَقِلَّةٌ تَبْدَأُ فِي سَطْرٍ جَدِيدٍ وَتَأْخُذُ العَرْضَ كَامِلًا. يَقْبَلُ الـ width/height وَالهَوَامِشَ فِي جَمِيعِ الجِهَاتِ.
inline يَنْسَابُ فِي نَفْسِ السَّطْرِ وَمِسَاحَتُهُ عَلَى قَدْ مَحْتَوَاهُ. يَتَجَاهَلُ الأَبْعَادَ، وَالهَوَامِشُ تَعْمَلُ أُفُقِيًّا فَقَطْ.
inline-block يَصْطَفُّ فِي نَفْسِ السَّطْرِ مَعَ الِاحْتِفَاظِ بِخَصَائِصِ الكُتْلَةِ. يَقْبَلُ الأَبْعَادَ وَجَمِيعَ الهَوَامِشِ فِي الِاتِّجَاهَاتِ الأَرْبَعَةِ.
none يَخْتَفِي العُنْصُرُ تَمَامًا بَصَرِيًّا وَمِسَاحِيًّا مِنَ الصَّفْحَةِ. لَا يَحْتَلُّ أَيَّ مِسَاحَةٍ وَلَا يَسْتَجِيبُ لِأَيِّ خَاصِّيَّةٍ.
flex / grid أَنْظِمَةُ تَخْطِيطٍ ذَكِيَّةٍ وَمُتَقَدِّمَةٍ (Flexbox / Grid). تُحَوِّلُ العُنْصُرَ إِلَى حَاوِيَةٍ تَتَحَكَّمُ بِمُرُونَةٍ فِي تَوْزِيعِ الأَبْنَاءِ.
contents يَجْعَلُ الصُّنْدُوقَ الحَاوِي مَخْفِيًّا مَعَ تَمْكِينِ الأَبْنَاءِ فَقَطْ. يُبَسِّطُ بِنْيَةَ الـ DOM لَكِنَّهُ يَحْذِفُ التَّنْسِيقَ الخَارِجِيَّ لِلْحَاوِيَةِ.
---

مَتَى تَسْتَخْدِمُ كُلَّ قِيمَةٍ بِاحْتِرَافِيَّةٍ؟

  • اِسْتَخْدِمْ inline عِنْدَمَا تُرِيدُ تَلْوِينَ كَلِمَةٍ مُعَيَّنَةٍ أَوْ تَنْسِيقِ رَابِطٍ دَاخِلَ فَقَرَةٍ نَصِّيَّةٍ دُونَ تَخْرِيبِ اِنْسِيَابِ السَّطْرِ.
  • اِسْتَخْدِمْ inline-block عِنْدَ بِنَاءِ أَزْرَارِ التَّنَقُّلِ (Buttons) أَوْ الشَّارَاتِ الدَّاخِلِيَّةِ الَّتِي تَتَطَلَّبُ مَسَاحَاتِ فَرَاغٍ (Padding) كَبِيرَةً مَعَ بَقَائِهَا مُتَجَاوِرَةً.
  • اِسْتَخْدِمْ block لِلْعَنَاوِينِ، أَوْ الفَقَرَاتِ، أَوْ الصَّنَادِيقِ الهَيْكَلِيَّةِ الَّتِي يَجِبُ أَنْ تَعْزِلَ نَفْسَهَا عَمُودِيًّا.
  • اِسْتَخْدِمْ none لِإِخْفَاءِ العَنَاصِرِ الَّتِي لَا تُرِيدُ ظُهُورَهَا إِلَّا بَعْدَ شَرْطٍ مُعَيَّنٍ (مِثْلَ رَسَائِلِ الخَطَأِ أَوْ قَوَائِمِ الجَوَّالِ المَخْفِيَّةِ).
  • اِسْتَخْدِمْ flex وَ grid كَخِيَارٍ أَوَّلَ وَأَسَاسِيٍّ عِنْدَ تَصْمِيمِ شَبَكَةِ المَوْقِعِ أَوْ صِنَاعَةِ قَوَالِبَ مَرِنَةٍ وَمُتَجَاوِبَةٍ مَعَ الشَّاشَاتِ.
---

الخُلَاصَةُ

إِنَّ خَاصِّيَّةُ display هِيَ المُوَجِّهُ الرَّئِيسِيُّ لِمُهَنْدِسِي الوِيبِ لِإِدَارَةِ وَتَرْجَمَةِ هَيْكَلِ الصَّفْحَةِ بَصَرِيًّا. فَهْمُكَ العَمِيقُ لِلْفُرُوقِ البَيْنِيَّةِ لِهَذِهِ القِيَمِ، وَكَيْفِيَّةِ تَأْثِيرِهَا عَلَى المُرَبَّعِ الهَنْدَسِيِّ (Box Model)، يَحْمِيكَ مِنْ عُيُوبِ التَّصْمِيمِ الشَّائِعَةِ وَيُتِيحُ لَكَ بِنَاءَ مَوَاقِعَ مَرِنَةٍ، اِحْتِرَافِيَّةٍ، وَمُتَوَافِقَةٍ مَعَ كَافَّةِ مَعَايِيرِ التَّصْمِيمِ العَالَمِيَّةِ.

google-playkhamsatmostaqltradent