random
أخبار ساخنة

شرح CSS Pseudo elements واستخدامها في تنسيق الصفحات

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

شَرْحُ CSS Pseudo-elements وَاسْتِخْدَامِهَا فِي تَنْسِيقِ الصَّفَحَاتِ

تُعَدُّ العَنَاصِرُ الزَّائِفَةُ (CSS Pseudo-elements)، أَوْ مَا يُعْرَفُ بِالعَنَاصِرِ الوَهْمِيَّةِ، إِحْدَى أَقْوَى الأَدَوَاتِ التَّصْمِيمِيَّةِ فِي لُغَةِ CSS. فَعَلَى عَكْسِ الـ Pseudo-classes الَّتِي تَسْتَهْدِفُ "حَالَةَ" العُنْصُرِ كَامِلًا، تَقُومُ الـ Pseudo-elements بِاسْتِهْدَافِ أَجْزَاءٍ مُحَدَّدَةٍ جِدًّا دَاخِلَ العُنْصُرِ الوَاحِدِ، أَوْ حَتَّى إِنْشَاءِ وَتَوْلِيدِ مَحْتَوًى بَصَرِيٍّ جَدِيدٍ تَمَامًا قَبْلَهُ أَوْ بَعْدَهُ، دُونَ الحَاجَةِ لِإِضَافَةِ أَيِّ أَوْسِمَةٍ أَوْ شِيفْرَاتٍ زَائِدَةٍ فِي مَلَفِّ الـ HTML.

---

كَيْفِيَّةُ كِتَابَةِ الـ Pseudo-elements (الصِّيغَةُ القِيَاسِيَّةُ)

فِي المَعَايِيرِ الحَدِيثَةِ لِـ W3C وَلُغَةِ CSS3، يَتِمُّ تَمْيِيزُ العَنَاصِرِ الزَّائِفَةِ عَنِ الفِئَاتِ الزَّائِفَةِ بِكِتَابَةِ "نُقْطَتَيْنِ رَأْسِيَّتَيْنِ مُضَاعَفَتَيْنِ" ( :: ) قَبْلَ اسْمِ العُنْصُرِ الوَهْمِيِّ:

مُلَاحَظَةٌ بِنْيَوِيَّةٌ: تَقْبَلُ المُتَصَفِّحَاتُ كِتَابَةَ نُقْطَةٍ رَأْسِيَّةٍ وَاحِدَةٍ (:) مَعَ العَنَاصِرِ القَدِيمَةِ مِثْلَ :before وَ :after لِدَعْمِ التَّوَافُقِيَّةِ مَعَ الأَكْوَادِ السَّابِقَةِ، لَكِنَّ المُمَارَسَةَ الاِحْتِرَافِيَّةَ تَقْتَضِي كِتَابَةَ :: لِجَمِيعِ العَنَاصِرِ الوَهْمِيَّةِ.
---

الشَّرْحُ التَّفْصِيلِيُّ لِلْعَنَاصِرِ الزَّائِفَةِ مَعَ الأَمْثِلَةِ

1. ::before وَ ::after (إِنْشَاءُ المَحْتَوَى البَصَرِيِّ)

تُعْتَبَرُ هَاتَانِ الخَاصِّيَّتَانِ الأَكْثَرَ شُيُوعًا وَاسْتِخْدَامًا؛ حَيْثُ تُتِيحَانِ لَكَ زَرْعَ عُنْصُرٍ وَهْمِيٍّ جَدِيدٍ قَبْلَ مَحْتَوَى العُنْصُرِ الأَصْلِيِّ أَوْ بَعْدَهُ. شَرْطُ عَمَلِهِمَا الأَسَاسِيُّ هُوَ كِتَابَةُ خَاصِّيَّةِ content حَتَّى لَوْ كَانَتْ فَارِغَةً: 

/* إِضَافَةُ رَمْزٍ جَمَالِيٍّ قَبْلَ العَنَاوِينِ الرَّئِيسِيَّةِ */
h1::before {
    content: "✨ ";
}

/* إِضَافَةُ رَمْزٍ بَعْدَ العَنَاوِينِ */
h1::after {
    content: " ✨";
}

2. ::first-line (تَنْسِيقُ السَّطْرِ الأَوَّلِ)

تَقُومُ هَذِهِ الخَاصِّيَّةُ بِاسْتِهْدَافِ السَّطْرِ الأَوَّلِ فَقَطْ مِنَ الفَقَرَةِ النَّصِّيَّةِ. المِيزَةُ الذَّكِيَّةُ هُنَا أَنَّ طُولَ السَّطْرِ يَتَغَيَّرُ تِلْقَائِيًّا دِينَامِيكِيًّا مَعَ تَغْيِيرِ حَجْمِ شَاشَةِ المُسْتَخْدِمِ، وَيَبْقَى التَّنْسِيقُ مُلْتَزِمًا بِالسَّطْرِ الأَوَّلِ فَقَطْ المَعْرُوضِ بَصَرِيًّا. 

/* جَعْلُ السَّطْرِ الأَوَّلِ مِنَ المَقَالِ بِالَّلَوْنِ الأَحْمَرِ وَبِحُرُوفٍ كَبِيرَةٍ مُصَغَّرَةٍ */
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

3. ::first-letter (تَنْسِيقُ الحَرْفِ الأَوَّلِ)

تَسْتَهْدِفُ الحَرْفَ الأَوَّلَ تَمَامًا مِنَ الفَقَرَةِ النَّصِّيَّةِ، وَهِيَ مِيزَةٌ مِعْمَارِيَّةٌ شَاهِقَةُ الأَنَاقَةِ تُسْتَخْدَمُ فِي المَجَلَّاتِ العَالَمِيَّةِ وَالمَقَالَاتِ الإِخْبَارِيَّةِ (Drop Cap) لِجَذْبِ اِنْتِبَاهِ القَارِئِ عِنْدَ بِدَايَةِ المَقْطَعِ. 

/* تَكْبِيرُ الحَرْفِ الأَوَّلِ مِنَ الفَقَرَةِ بِشَكْلٍ ضَخْمٍ */
p::first-letter {
    color: #ff0000;
    font-size: 3em;
    float: right; /* لِلْتَّنَاسُبِ مَعَ اتِّجَاهِ الكِتَابَةِ العَرَبِيَّةِ */
    margin-left: 8px;
}

4. ::marker (عَلَامَةُ النِّقَاطِ وَالقَوَائِمِ)

تَسْتَهْدِفُ هَذِهِ الخَاصِّيَّةُ العَلَامَةَ النُّقْطِيَّةَ (Bullet) أَوْ الرَّقْمِيَّةَ الَّتِي تَظْهَرُ تِلْقَائِيًّا بِجِوَارِ عَنَاصِرِ القَوَائِمِ <li>، مِمَّا يَمْنَحُكَ القُدْرَةَ عَلَى تَلْوِينِهَا أَوْ تَكْبِيرِهَا مُنْفَصِلَةً عَنْ نَصِّ القَائِمَةِ نَفْسِهِ. 

/* تَلْوِينُ نُقَاطِ القَائِمَةِ بِالَّلَوْنِ الأَحْمَرِ */
li::marker {
    color: red;
    font-size: 1.5em;
}

5. ::selection (تَنْسِيقُ النَّصِّ المُظَلَّلِ)

تَتَحَكَّمُ هَذِهِ الخَاصِّيَّةُ فِي مَظْهَرِ الكَلِمَاتِ عِنْدَمَا يَقُومُ الزَّائِرُ بِتَحْدِيدِهَا وَتَظْلِيلِهَا بِاسْتِخْدَامِ المَاوْسِ أَوْ الإِصْبَعِ عَلَى الشَّاشَةِ، وَهُوَ تَنْسِيقٌ يَمْنَحُ المَوْقِعَ طَابَعًا اِحْتِرَافِيًّا مُتَوَافِقًا مَعَ أَلْوَانِ الهُوِيَّةِ البَصَرِيَّةِ. 

/* تَغْيِيرُ خَلْفِيَّةِ التَّظْلِيلِ إِلَى الأَصْفَرِ وَالنَّصِّ إِلَى الأَحْمَرِ */
::selection {
    background: #ffeb3b;
    color: #cc0000;
}

6. ::placeholder (نَصُّ العُنْصُرِ النَّائِبِ دَاخِلَ الحُقُولِ)

تَسْتَهْدِفُ النَّصَّ التَّوْضِيحِيَّ الِافْتِرَاضِيَّ المَكْتُوبَ دَاخِلَ حُقُولِ الإِدْخَالِ (Inputs) وَالَّذِي يَخْتَفِي فَوْرَ بَدْءِ المُسْتَخْدِمِ فِي الكِتَابَةِ. 

/* تَعْيِينُ مَظْهَرٍ بَاهِتٍ وَمَائِلٍ لِلْنَّصِّ التَّوْضِيحِيِّ */
input::placeholder {
    color: #9e9e9e;
    font-style: italic;
}

7. ::backdrop (خَلْفِيَّةُ العَزْلِ لِلْنَّوَافِذِ المُنْبَثِقَةِ)

عُنْصُرٌ وَهْمِيٌّ مُتَقَدِّمٌ يَسْتَهْدِفُ طَبَقَةَ العَزْلِ (خَلْفِيَّةُ التَّعْتِيمِ) الَّتِي تَقَعُ خَلْفَ وَسْمِ الـ <dialog> الحَدِيثِ عِنْدَمَا يَتِمُّ فَتْحُهُ، مِمَّا يَعْزِلُ بَقِيَّةَ مَحْتَوَى المَوْقِعِ فِي الخَلْفِيَّةِ. 

/* تَعْتِيمُ خَلْفِيَّةِ النَّافِذَةِ المُنْبَثِقَةِ بِنِسْبَةِ 50% */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px); /* إِضَافَةُ تَأْثِيرِ ضَبَابِيٍّ نَاعِمٍ */
}
---

جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِأَبْرَزِ الـ Pseudo-elements

لِمَسْحِ الوَظَائِفِ البَصَرِيَّةِ لِهَذِهِ المَجْمُوعَةِ بِنَظْرَةٍ سَرِيعَةٍ:

العُنْصُرُ الزَّائِفُ النِّطَاقُ المُسْتَهْدَفُ دَاخِلَ الهَيْكَلِ الِاسْتِخْدَامُ العَمَلِيُّ النَّمُوذَجِيُّ
::before مِسَاحَةٌ وَهْمِيَّةٌ جَدِيدَةٌ تَقَعُ قَبْلَ مَحْتَوَى العُنْصُرِ مُبَاشِرَةً. إِضَافَةُ أَيْقُونَاتٍ زَخْرُفِيَّةٍ أَوْ خَلْفِيَّاتٍ جَمَالِيَّةٍ مُتَقَدِّمَةٍ.
::after مِسَاحَةٌ وَهْمِيَّةٌ جَدِيدَةٌ تَقَعُ بَعْدَ مَحْتَوَى العُنْصُرِ مُبَاشِرَةً. تَصْفِيَةُ العَوْمِ (Clearfix) أَوْ إِضَافَةُ شَارَاتِ التَّنْبِيهِ.
::first-line السَّطْرُ النَّصِّيُّ الأَوَّلُ المَعْرُوضُ حَالِيًّا فِي شَاشَةِ الزَّائِرِ. تَمْيِيزُ اِسْتِهْلَالِ المَقَالَاتِ الطَّوِيلَةِ فِي المَدَوَّنَاتِ.
::first-letter الحَرْفُ المَبْدَئِيُّ الأَوَّلُ تَمَامًا دَاخِلَ كُتْلَةِ الفَقَرَةِ. صِنَاعَةُ تَنْسِيقِ الـ Drop Cap التَّارِيخِيِّ الفَخْمِ لِلْنُّصُوصِ.
::marker عَلَامَةُ التَّرْقِيمِ أَوْ النُّقْطَةِ الخَاصَّةِ بِحَاوِيَاتِ القَوَائِمِ. تَلْوِينُ أَشْكَالِ النِّقَاطِ التِلْقَائِيَّةِ دُونَ حَذْفِهَا.
::selection المِسَاحَةُ النَّصِّيَّةُ الَّتِي يَقُومُ الزَّائِرُ بِتَظْلِيلِهَا فِعْلِيًّا. تَخْصِيصُ لَوْنِ التَّظْلِيلِ لِيَتَنَاغَمَ مَعَ أَلْوَانِ المَوْقِعِ الرَّئِيسِيَّةِ.
---

خَاتِمَةٌ

تُمَثِّلُ العَنَاصِرُ الزَّائِفَةُ CSS Pseudo-elements أَدَاةً عَبْقَرِيَّةً لِإِضَافَةِ مَسَاحَاتٍ جَمَالِيَّةٍ وَتَفَاصِيلَ دَقِيقَةٍ دَاخِلَ واجِهَاتِ صَفَحَاتِكَ بِأَقَلِّ مَجْهُودٍ كُودِيٍّ مُمْكِنٍ. فَهِيَ تُحَافِظُ عَلَى بِنْيَةِ الـ HTML نَظِيفَةً وَمُجَرَّدَةً، مَعَ مَنْحِ مِلَفِّ الـ CSS سُلْطَةً مُطْلَقَةً فِي رَسْمِ الزَّخَارِفِ وَالتَّأْثِيرَاتِ البَصَرِيَّةِ. قُمْ بِتَطْبِيقِ هَذِهِ الأَمْثِلَةِ فِي مَشَارِيعِكَ لِتَرْفَعَ مِنْ جَوْدَةِ القَوَالِبِ وَتَمْنَحَ زُوَّارَكَ تَجْرِبَةَ تَصَفُّحٍ عَمِيقَةً وَاِحْتِرَافِيَّةً.

google-playkhamsatmostaqltradent