تَحَكُّمٌ ذَكِيٌّ بِالأَبْعَادِ فِي CSS: مَفْهُومُ min-width، وَ max-width، وَ min-height، وَ max-height
فِي عَالَمِ تَصْمِيمِ الوِيبِ المُتَجَاوِبِ (Responsive Web Design)،
تَمْتَلِكُ المُرُونَةُ البَصَرِيَّةُ مَكَانَةً خَاصَّةً؛ حَيْثُ تَعْتَمِدُ
جَوْدَةُ المَوْقِعِ عَلَى كَيْفِيَّةِ تَكَيُّفِ عَنَاصِرِهِ عَبْرَ أَحْجَامِ
الشَّاشَاتِ المُخْتَلِفَةِ. وَهُنَا يَأْتِي الدَّوْرُ المِحْوَرِيُّ
لِخَصَائِصِ التَّحَكُّمِ بِالأَبْعَادِ فِي لُغَةِ CSS مِثْلَ:
min-width، وَ max-width، وَ min-height،
وَ max-height. تَمْنَحُكَ هَذِهِ الأَدَوَاتُ سُلْطَةً دَقِيقَةً
لِتَعْيِينِ نِطَاقٍ حَجْمِيٍّ آمِنٍ لِلْعَنَاصِرِ، مِمَّا يَقِيكَ شَرَّ
اِنْكِسَارِ القَالِبِ دُونَ الحَاجَةِ لِاسْتِدْعَاءِ اسْتِعْلَامَاتِ
الوَسَائِطِ (Media Queries) فِي كُلِّ سَطْرٍ بَرْمَجِيٍّ.
مَا هِيَ خَاصِّيَّةُ max-width؟ (الحَدُّ الأَقْصَى لِلْعَرْضِ)
تَقُومُ خَاصِّيَّةُ max-width بِتَحْدِيدِ أَقْصَى عَرْضٍ
أُفُقِيٍّ مَسْمُوحٍ بِهِ لِلْعُنْصُرِ. هَذَا يَعْنِي أَنَّ العُنْصُرَ مَهْمَا
تَمَدَّدَ بِنَاءً عَلَى المِسَاحَةِ المُتَاحَةِ، فَإِنَّهُ سَيَتَوَقَّفُ
تِلْقَائِيًّا عَنِ النُّمُوِّ بِمُجَرَّدِ وُصُولِهِ لِلْقِيمَةِ المُحَدَّدَةِ،
مِمَّا يَمْنَعُ تَشَوُّهَ التَّصْمِيمِ عَلَى الشَّاشَاتِ العَرِيْضَةِ جِدًّا.
/* تَعْيِينُ عَرْضٍ مَرِنٍ مَعَ حَدٍّ أَقْصَى */
.card {
width: 80%;
max-width: 350px;
}
الشَّرْحُ العَمَلِيُّ: سَيَأْخُذُ العُنْصُرُ عَرْضًا نِسْبِيًّا يُعَادِلُ 80% مِنْ حَجْمِ الشَّاشَةِ، لَكِنَّهُ لَنْ يَزِيدَ طُولُهُ عَنْ 350 بِكْسِلْ مَهْمَا كَبُرَتْ الشَّاشَةُ، مِمَّا يَحْفَظُ لِلْبِطَاقَةِ أَنَاقَتَهَا.
---مَا هِيَ خَاصِّيَّةُ min-width؟ (الحَدُّ الأَدْنَى لِلْعَرْضِ)
تُعَدُّ خَاصِّيَّةُ min-width النَّقِيضَ التَّامَّ
لِلْخَاصِّيَّةِ السَّابِقَةِ؛ حَيْثُ تُعَيِّنُ أَصْغَرَ عَرْضٍ أُفُقِيٍّ
مُمْكِنٍ لِلْعُنْصُرِ. يَضْمَنُ هَذَا الأُسْلُوبُ عَمَدَ تَقَلُّصِ العُنْصُرِ
أَوْ اِنْضِغَاطِ المَحْتَوَى بِدَاخِلِهِ بِشَكْلٍ يُعِيقُ القِرَاءَةَ عِنْدَ
تَصَفُّحِ المَوْقِعِ مِنْ شَاشَاتٍ ضَيِّقَةٍ.
/* تَعْيِينُ عَرْضٍ مَرِنٍ مَعَ حَدٍّ أَدْنَى */
.card {
width: 80%;
min-width: 250px;
}
الشَّرْحُ العَمَلِيُّ: يَتَقَلَّصُ العُنْصُرُ اِنْسِيَابِيًّا مَعَ صِغَرِ الشَّاشَةِ، لَكِنْ عِنْدَمَا تَصِلُ المِسَاحَةُ إِلَى 250 بِكْسِلْ، يَثْبُتُ العُنْصُرُ عِنْدَ هَذَا الحَجْمِ وَيَظْهَرُ شَرِيطُ التَّمْرِيرِ حِمَايَةً لِبِنْيَةِ المَحْتَوَى.
---مَا هِيَ خَاصِّيَّةُ max-height؟ (الحَدُّ الأَقْصَى لِلِارْتِفَاعِ)
تُطَبِّقُ خَاصِّيَّةُ max-height نَفْسَ المَنْطِقِ الهَنْدَسِيِّ
لَكِنْ فِي الِاتِّجَاهِ العَمُودِيِّ؛ حَيْثُ تَمْنَعُ ارْتِفَاعَ صُنْدُوقِ
العُنْصُرِ مِنَ التَّضَخُّمِ رَأْسِيًّا عَنْ حَدٍّ مُعَيَّنٍ مَهْمَا زَادَتْ
كَمِّيَّةُ النُّصُوصِ أَوْ العَنَاصِرِ بِدَاخِلِهِ، وَيُفَضَّلُ دَمْجُهَا مَعَ
خَاصِّيَّةِ overflow-y: auto; لِإِظْهَارِ شَرِيطِ تَمْرِيرٍ
دَاخِلِيٍّ.
.text-box {
max-height: 400px;
overflow-y: auto; /* إِظْهَارُ سَكْرُول دَاخِلِيٍّ عِنْدَ تَجَاوُزِ المَحْتَوَى */
}
---
مَا هِيَ خَاصِّيَّةُ min-height؟ (الحَدُّ الأَدْنَى لِلِارْتِفَاعِ)
تَضْمَنُ لَكَ خَاصِّيَّةُ min-height أَلَّا يَقِلَّ الِارْتِفَاعُ
العَمُودِيُّ لِلْعُنْصُرِ عَنِ المِقْدَارِ المُحَدَّدِ نِهَائِيًّا. هَذِهِ
المِيزَةُ عَمَلِيَّةٌ جِدًّا عِنْدَ تَنْسِيقِ أَقْسَامِ الوَاجِهَةِ
الرَّئِيسِيَّةِ (Hero Sections) أَوْ التَّذْيِيلِ (Footers)، لِضَمَانِ
مِسَاحَةٍ بَصَرِيَّةٍ ثَابِتَةٍ وَجَذَّابَةٍ حَتَّى لَوْ كَانَ المَحْتَوَى
النَّصِّيُّ المَكْتُوبُ قَلِيلًا.
.hero-section {
min-height: 200px; /* الِارْتِفَاعُ لَنْ يَقِلَّ عَنْ 200 بِكْسِلْ مَهْمَا حَدَثَ */
}
---
الخَلْطُ الذَّكِيُّ: تَعْيِينُ نِطَاقٍ حَجْمِيٍّ آمِنٍ لِلْعَنَاصِرِ
عِنْدَمَا تَقُومُ بِكِتَابَةِ قِيَمٍ جَامِدَةٍ فِي خَاصِّيَّتَيْ
width وَ height، فَإِنَّكَ تَحْرِمُ المَوْقِعَ مِنْ
مُرُونَتِهِ. بَيْنَمَا تَمْنَحُكَ خَصَائِصُ الحَدِّ الأَدْنَى وَالأَقْصَى
قُدْرَةً هَائِلَةً عَلَى رَسْمِ "سِينِارْيُو مَرِنٍ" يَتَحَرَّكُ العُنْصُرُ
بِدَاخِلِهِ بِحُرِّيَّةٍ كَمَا فِي المِثَالِ التَّالِي:
.flexible-box {
width: 80%;
min-width: 250px;
max-width: 350px;
min-height: 100px;
max-height: 200px;
}
تَحْلِيلُ الكُودِ الهَنْدَسِيِّ: يَتَحَرَّكُ هَذَا الصُّنْدُوقُ بِنِسْبَةِ 80% أُفُقِيًّا مَعَ أَبْقَادِ الشَّاشَةِ، لَكِنَّ قَوَانِينَ التَّصْمِيمِ تَحْظُرُ عَلَيْهِ أَنْ يَصْغُرَ عَنْ عَرْضِ 250 بِكْسِلْ أَوْ يَكْبُرَ عَنْ 350 بِكْسِلْ. كَمَا أَنَّ ارْتِفَاعَهُ يَمْتَلِكُ نِطَاقًا حُرًّا يَقَعُ بَيْنَ 100 وَ 200 بِكْسِلْ فَقَطْ.
---جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِخَصَائِصِ الأَبْعَادِ الآمِنَةِ
لِمَسْحِ الفُرُوقِ الوَظِيفِيَّةِ لِهَذِهِ الأَدَوَاتِ بِنَظْرَةٍ سَرِيعَةٍ:
| الخَاصِّيَّةُ | السُّلُوكُ البِنْيَوِيُّ وَالتَّأْثِيرُ | الغَرَضُ التَّصْمِيمِيُّ الرَّئِيسِيُّ |
|---|---|---|
min-width |
يَمْنَعُ العُنْصُرَ مِنَ التَّقَلُّصِ أَقَلَّ مِنْ قِيمَةٍ مُعَيَّنَةٍ. | حِمَايَةُ النُّصُوصِ مِنَ الِانْضِغَاطِ فِي الشَّاشَاتِ الصَّغِيرَةِ. |
max-width |
يَمْنَعُ العُنْصُرَ مِنَ التَّمَدُّدِ أَكْبَرَ مِنْ قِيمَةٍ مُعَيَّنَةٍ. | حِمَايَةُ الصُّوَرِ وَالبِطَاقَاتِ مِنَ التَّشَوُّهِ عَلَى الشَّاشَاتِ العَرِيْضَةِ. |
min-height |
يَضْمَنُ ارْتِفَاعًا أَدْنَى لَا يُمْكِنُ النُّزُولُ عَنْهُ. | الحِفَاظُ عَلَى جَاذِبِيَّةِ المِسَاحَاتِ العَمُودِيَّةِ كَأَقْسَامِ الـ Hero. |
max-height |
يَضْعُ سَقْفًا لِلِارْتِفَاعِ العَمُودِيِّ لِلْعُنْصُرِ. | حِمَايَةُ القَوَالِبِ مِنَ التَّضَخُّمِ الرَّأْسِيِّ لِلْمَحْتَوَى الطَّوِيلِ. |
كَيْفِيَّةُ الدَّمْجِ مَعَ اسْتِعْلَامَاتِ الوَسَائِطِ (Media Queries)
يُمْكِنُكَ إِعَادَةُ ضَبْطِ هَذِهِ القِيَمِ المَرِنَةِ دَاخِلَ الـ
@media لِتَتَغَيَّرَ حُدُودُ النِّطَاقِ بِنَاءً عَلَى تَصْنِيفِ
الجِهَازِ (جَوَّال، تِابْلت، حَاسُوبٌ لَامِحٌ):
/* عِنْدَمَا يَكُونُ عَرْضُ الشَّاشَةِ 600 بِكْسِلْ أَوْ أَقَلَّ */
@media screen and (max-width: 600px) {
.box {
min-width: auto; /* إِلْغَاءُ الحَدِّ الأَدْنَى لِيَتَنَاسَبَ مَعَ شَاشَةِ الجَوَّالِ */
max-width: 100%; /* جَعْلُ العُنْصُرِ يَمْتَصُّ عَرْضَ الجَوَّالِ كَامِلًا */
}
}
---
خَاتِمَةٌ
إِنَّ اِسْتِخْدَامَ خَصَائِصِ min-width، وَ
max-width، وَ min-height، وَ
max-height يُعَدُّ نَقْلَةً نَوْعِيَّةً فِي كَيْفِيَّةِ صِنَاعَةِ
قَوَالِبَ مَرِنَةٍ (Fluid Layouts). تُوفِّرُ لَكَ هَذِهِ الأَدَوَاتُ
اِخْتِصَارًا ذَكِيًّا لِتَفَادِي تَكْرَارِ شُرُوطِ الـ Media Queries، مِمَّا
يَمْنَحُ زُوَّارَ مَوْقِعِكَ تَجْرِبَةَ تَصَفُّحٍ عَالِيَةَ السَّلَاسَةِ
وَاِحْتِرَافِيَّةً عَبْرَ كَافَّةِ الأَجْهِزَةِ المُمْكِنَةِ.