طُرُقُ إِخْفَاءِ العَنَاصِرِ فِي CSS وَالفَرْقُ بَيْنَهَا مَعَ تَوْضِيحِ عَلَاقَتِهَا بِالـ DOM
فِي عَالَمِ تَطْوِيرِ وَتَصْمِيمِ الوِيبِ، نَحْتَاجُ أَحْيَانًا إِلَى
إِخْفَاءِ عَنَاصِرَ مُعَيَّنَةٍ مِنَ الصَّفْحَةِ بِنَاءً عَلَى تَفَاعُلَاتِ
المُسْتَخْدِمِ أَوْ شُرُوطٍ بَرْمَجِيَّةٍ مُحَدَّدَةٍ. يُمْكِنُ تَحْقِيقُ
ذَلِكَ بَعِدَّةِ طُرُقٍ جَوْهَرِيَّةٍ فِي لُغَةِ CSS، مِثْلَ
اسْتِخْدَامِ خَاصِّيَّةِ display، أَوْ visibility،
أَوْ opacity. وَمَعَ أَنَّ النَّتِيجَةَ النِّهَائِيَّةَ
لِلْمُسْتَخْدِمِ العَادِيِّ قَدْ تَبْدُو مُتَشَابِهَةً (وَهِيَ عَدَمُ رُؤْيَةِ
العُنْصُرِ)، إِلَّا أَنَّ كُلَّ طَرِيقَةٍ لَهَا تَأْثِيرٌ هَنْدَسِيٌّ
مُخْتَلِفٌ تَمَامًا عَلَى هَيْكَلِ الصَّفْحَةِ (Layout)، وَعَلَى آلِيَّةِ
التَّفَاعُلِ، وَكَذَلِكَ عَلَى ارْتِبَاطِهَا بِبِنْيَةِ الصَّفْحَةِ
البَرْمَجِيَّةِ DOM. فِي هَذَا المَقَالِ المُمَهَّدِ،
سَنَشْرَحُ هَذِهِ الفُرُوقَ بِالتَّفْصِيلِ التَّقْنِيِّ.
أَوَّلًا: خَاصِّيَّةُ display (العَرْضُ الكُتْلِيُّ)
تُسْتَخْدَمُ خَاصِّيَّةُ display لِتَحْدِيدِ آلِيَّةِ عَرْضِ
العُنْصُرِ بَصَرِيًّا. وَعِنْدَمَا نَقُومُ بِكِتَابَةِ القِيمَةِ
display: none;، فَإِنَّ العُنْصُرَ يَخْتَفِي تَمَامًا مِنَ
الصَّفْحَةِ.
- تَأْثِيرُ المِسَاحَةِ (Layout): لَا يَحْجِزُ العُنْصُرُ أَيَّ مِسَاحَةٍ فِعْلِيَّةٍ، وَتَقُومُ العَنَاصِرُ المُجَاوِرَةُ بِتَقْلِيصِ الفَرَاغِ وَاحْتِلَالِ مَكَانِهِ تَمَامًا كَأَنَّهُ لَمْ يَكُنْ مَكْتُوبًا.
- التَّفَاعُلُ (Interaction): لَا يُمْكِنُ لِلْمُسْتَخْدِمِ التَّفَاعُلُ مَعَ العُنْصُرِ نِهَائِيًّا (لَا يَقْبَلُ النَّقْرَ أَوْ التَّمْرِيرَ).
/* إِخْفَاءٌ كَامِلٌ مَعَ إِزَالَةِ المِسَاحَةِ الهَنْدَسِيَّةِ */
div {
display: none;
}
وَيُمْكِنُنَا إِعَادَةُ إِظْهَارِهِ بَصَرِيًّا فِي أَيِّ وَقْتٍ بِتَغْيِيرِ
القِيمَةِ إِلَى block أَوْ inline-block أَوْ
inline حَسَبَ الطَّبِيعَةِ التَّصْمِيمِيَّةِ لِلْعُنْصُرِ.
ثَانِيًا: خَاصِّيَّةُ visibility (الرُّؤْيَةُ البَصَرِيَّةُ)
عِنْدَ اِسْتِخْدَامِ خَاصِّيَّةِ الرُّؤْيَةِ مَعَ قِيمَةِ الإِخْفَاءِ
visibility: hidden;، يَتِمُّ حَجْبُ العُنْصُرِ عَنِ الرُّؤْيَةِ
تَمَامًا، لَكِنْ مَعَ سُلُوكٍ هَنْدَسِيٍّ مُخْتَلِفٍ:
- تَأْثِيرُ المِسَاحَةِ (Layout): يَحْتَفِظُ العُنْصُرُ بِمِسَاحَتِهِ الجُغْرَافِيَّةِ الكَامِلَةِ فِي الصَّفْحَةِ، حَيْثُ يَبْقَى مَكَانُهُ فَرَاغًا أَبْيَضَ دُونَ أَنْ تَتَحَرَّكَ العَنَاصِرُ المُجَاوِرَةُ لِتَغْطِيَتِهِ.
- التَّفَاعُلُ (Interaction): رَغْمَ أَنَّهُ يَحْجِزُ مِسَاحَةً، إِلَّا أَنَّ المُسْتَخْدِمَ لَا يُمْكِنُهُ النَّقْرُ عَلَيْهِ أَوْ التَّفَاعُلُ مَعَهُ كَوْنَهُ مَخْفِيًّا بَصَرِيًّا.
/* حَجْبُ الرُّؤْيَةِ مَعَ الِاحْتِفَاظِ بِالمَكَانِ فِعْلِيًّا */
div {
visibility: hidden;
}
---
ثَالِثًا: خَاصِّيَّةُ opacity (الشَّفَافِيَّةُ الكَامِلَةُ)
تَتَحَكَّمُ خَاصِّيَّةُ opacity فِي دَرَجَةِ شَفَافِيَّةِ
العَنَاصِرِ بَصَرِيًّا. وَعِنْدَمَا نَمْنَحُهَا القِيمَةَ الصِّفْرِيَّةَ
opacity: 0;، فَإِنَّ العُنْصُرَ يُصْبَحُ شَفَّافًا بِنِسْبَةِ
100%:
- تَأْثِيرُ المِسَاحَةِ (Layout): يَظَلُّ العُنْصُرُ فِي مَوْقِعِهِ الطَّبِيعِيِّ وَيَشْغَلُ مِسَاحَتَهُ الهَنْدَسِيَّةَ بِالكَامِلِ دُونَ أَيِّ تَغْيِيرٍ فِي تَقْسِيمِ المَوْقِعِ.
-
التَّفَاعُلُ (Interaction): عَلَى عَكْسِ
displayوَvisibility، فَإِنَّ العُنْصُرَ هُنَا يَبْقَى قَابِلًا لِلتَّفَاعُلِ تَمَامًا؛ أَيْ أَنَّ المُسْتَخْدِمَ يُمْكِنُهُ النَّقْرُ عَلَيْهِ، أَوْ تَحْدِيدُ النَّصِّ بِدَاخِلِهِ، وَسَتَعْمَلُ الرَّوَابِطُ المَخْفِيَّةُ بِهِ كَأَنَّهَا مَرْئِيَّةٌ.
/* جَعْلُ العُنْصُرِ شَفَّافًا مَعَ بَقَاءِ التَّفَاعُلِ نَشِطًا */
div {
opacity: 0;
}
يُمْكِنُ تَعْيِينُ أَيِّ قِيمَةٍ تَقَعُ بَيْنَ 0 وَ
1 لِتَحْدِيدِ مُسْتَوَى الشَّفَافِيَّةِ المَطْلُوبِ؛ فَعَلَى
سَبِيلِ المِثَالِ، القِيمَةُ opacity: 0.5; تَجْعَلُ العُنْصُرَ
نِصْفَ شَفَّافٍ وَمَرْئِيًّا بَاهِتًا.
رَابِعًا: عَلَاقَةُ آِلِيَّاتِ الإِخْفَاءِ بِالـ DOM
الـ DOM (Document Object Model) هُوَ التَّمْثِيلُ
البَرْمَجِيُّ الشَّجَرِيُّ لِهَيْكَلِ صَفْحَةِ الـ HTML. وَمِنَ المُهِمِّ
جِدًّا لِمُطَوِّرِي الوِيبِ اسْتِيعَابُ أَنَّ جَمِيعَ هَذِهِ الخَصَائِصِ
الثَّلَاثِ (display: none، وَ visibility: hidden، وَ
opacity: 0)
لَا تَقُومُ بِحَذْفِ العُنْصُرِ مِنَ الـ DOM.
العُنْصُرُ يَبْقَى مَوْجُودًا وَمَحْفُوظًا فِي شَجَرَةِ المُتَصَفِّحِ البَرْمَجِيَّةِ، مِمَّا يَعْنِي أَنَّ أَدَوَاتِ التَّطْوِيرِ (Developer Tools) يُمْكِنُهَا رُؤْيَتُهُ، كَمَا أَنَّ شِيفْرَاتِ الجَافَا سْكْرِيبْت تَسْتَطِيعُ اسْتِهْدَافَهُ وَتَعْدِيلَهُ بِبَسَاطَةٍ. الِاخْتِلَافُ يَكُونُ فَقَطْ فِي كَيْفِيَّةِ عَمَلِيَّةِ التَّصْيِيرِ البَصَرِيِّ (Visual Rendering) وَآلِيَّةِ اسْتِجَابَتِهِ لِلْمُسْتَخْدِمِ.
---جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِطُرُقِ الإِخْفَاءِ فِي CSS
لِتَسْهِيلِ فَهْمِ الفُرُوقِ الجَوْهَرِيَّةِ بَيْنَ الثَّلَاثَةِ، نَسْتَعْرِضُ الجَدْوَلَ التَّالِيَ:
| الخَاصِّيَّةُ وَالقِيمَةُ | حَجْزُ المِسَاحَةِ (Layout) | قَابِلِيَّةُ التَّفَاعُلِ (Click/Hover) | الوُجُودُ فِي شَجَرَةِ الـ DOM |
|---|---|---|---|
display: none; |
لَا (يَخْتَفِي تَمَامًا وَيَزُولُ فَرَاغُهُ). | لَا (غَيْرُ قَابِلٍ لِلتَّفَاعُلِ). | نَعَمْ (يَبْقَى مَوْجُودًا بَرْمَجِيًّا). |
visibility: hidden; |
نَعَمْ (يَتْرُكُ مَكَانَهُ فَرَاغًا أَبْيَضَ). | لَا (غَيْرُ قَابِلٍ لِلتَّفَاعُلِ). | نَعَمْ (يَبْقَى مَوْجُودًا بَرْمَجِيًّا). |
opacity: 0; |
نَعَمْ (يَشْغَلُ مِسَاحَتَهُ الكَامِلَةَ). | نَعَمْ (يَبْقَى قَابِلًا لِلْنَّقْرِ وَالتَّفَاعُلِ). | نَعَمْ (يَبْقَى مَوْجُودًا بَرْمَجِيًّا). |
خُلَاصَةٌ عَمَلِيَّةٌ
- اِسْتَخْدِمْ display: none; عِنْدَمَا تُرِيدُ إِخْفَاءَ
عُنْصُرٍ بِالكِامِلِ مَعَ إِعَادَةِ تَرْتِيبِ الصَّفْحَةِ تِلْقَائِيًّا
(مِثْلَ تَبْوِيبَاتِ المُحْتَوَى أَوْ قَوَائِمِ التَّنَقُّلِ).
- اِسْتَخْدِمْ visibility: hidden; عِنْدَمَا تُرِيدُ حَجْبَ
العُنْصُرِ مَعَ الحِفَاظِ عَلَى هَيْكَلِ التَّصْمِيمِ ثَابِتًا دُونَ
اِهْتِزَازٍ أَوْ تَحَرُّكٍ لِلْعَنَاصِرِ الأُخْرَى.
- اِسْتَخْدِمْ opacity: 0; عِنْدَمَا تُرِيدُ عَمَلَ حَرَكَاتٍ
اِنْتِقَالِيَّةٍ نَاعِمَةٍ (CSS Animations/Transitions) مِثْلَ تَمْوِيهِ
الظُّهُورِ (Fade-in) وَالتَّلَاشِي (Fade-out) مَعَ الحِفَاظِ عَلَى أَدَاوَاتِ
التَّفَاعُلِ نَشِطَةً.