الْفَرْقُ بَيْنَ fit-content وَ min-content وَ max-content فِي CSS
عِنْدَ تَعَلُّمِ تَصْمِيمِ وَتَطْوِيرِ المَوَاقِعِ بِاسْتِخْدَامِ لُغَةِ
CSS، يُعَدُّ التَّحَكُّمُ فِي عَرْضِ العَنَاصِرِ (Width)
بِطَرِيقَةٍ ذَكِيَّةٍ أَحَدَ أَهَمِّ أَسْرَارِ التَّصْمِيمِ المَرِنِ
وَالمُتَجَاوِبِ. بَعِيدًا عَنِ النِّسَبِ المِئَوِيَّةِ وَالقِيَمِ الثَّابِتَةِ
بِالبِكْسِلْ، تُقَدِّمُ لَنَا لُغَةُ CSS ثَلَاثَ قِيَمٍ مُتَقَدِّمَةٍ
وَاِحْتِرَافِيَّةٍ لِتَعْيِينِ العَرْضِ بِنَاءً عَلَى دِينَامِيكِيَّةِ
المَحْتَوَى الدَّاخِلِيِّ نَفْسِهِ، وَهِيَ: fit-content، وَ
min-content، وَ max-content. فِي هَذَا الدَّلِيلِ
الحَصْرِيِّ، سَنَشْرَحُ عَمَلِيًّا الجَدْوَى الهَنْدَسِيَّةَ لِكُلِّ قِيمَةٍ،
وَكَيْفَ تُؤثِّرُ عَلَى اِنْسِيَابِ النُّصُوصِ دَاخِلَ القَالِبِ.
1. خَاصِّيَّةُ max-content (أَقْصَى عَرْضٍ لِلْمَحْتَوَى)
تَقُومُ قِيمَةُ max-content بِإِجْبَارِ صُنْدُوقِ العُنْصُرِ
عَلَى التَّمَدُّدِ أُفُقِيًّا لِيَأْخُذَ
أَكْبَرَ عَرْضٍ مُمْكِنٍ يَسْمَحُ بِعَرْضِ المَحْتَوَى
كَامِلًا فِي سَطْرٍ وَاحِدٍ، دُونَ أَنْ يَقُومَ المُتَصَفِّحُ بِعَمَلِ أَيِّ
اِنْكِسَارٍ أَوْ لَفٍّ لِلْنَّصِّ (No Text Wrapping)، حَتَّى لَوْ أَدَّى
ذَلِكَ إِلَى خُرُوجِ العُنْصُرِ عَنْ حُدُودِ الشَّاشَةِ الرَّئِيسِيَّةِ.
/* جَعْلُ العُنْصُرِ يَمْتَدُّ أُفُقِيًّا بِالكِامِلِ دُونَ اِنْكِسَارِ الأَسْطُرِ */
.box {
width: max-content;
background-color: #f4f4f4;
}
النَّتِيجَةُ البَصَرِيَّةُ: إِذَا كَانَتْ لَدَيْكَ جُمْلَةٌ طَوِيلَةٌ دَاخِلَ الصُّنْدُوقِ، سَيَسْتَمِرُّ الصُّنْدُوقُ فِي التَّمَدُّدِ جَنْبًا إِلَى جَنْبٍ مَعَ الكَلِمَاتِ لِيَحْتَوِيَهَا كُلَّهَا فِي سَطْرٍ مُسْتَقِيمٍ وَاحِدٍ.
---2. خَاصِّيَّةُ min-content (أَدْنَى عَرْضٍ لِلْمَحْتَوَى)
تَعْمَلُ قِيمَةُ min-content بِآلِيَّةٍ مَعْكُوسَةٍ تَمَامًا؛
حَيْثُ تَجْبُرُ العُنْصُرَ عَلَى التَّقَلُّصِ أُفُقِيًّا لِيَأْخُذَ
أَصْغَرَ عَرْضٍ مُمْكِنٍ لِلْمُرَبَّعِ. وَهَذَا الحَدُّ
الأَدْنَى يَتَحَدَّدُ بِنَاءً عَلَى عَرْضِ "أَطْوَلِ كَلِمَةٍ وَاحِدَةٍ"
دَاخِلَ النَّصِّ (أَوْ عَرْضِ العُنْصُرِ الثَّابِتِ مِثْلَ الصُّورَةِ).
/* ضَغْطُ العُنْصُرِ لِأَقَلِّ مِسَاحَةٍ أُفُقِيَّةٍ مُمْكِنَةٍ */
.box {
width: min-content;
background-color: #e0e0e0;
}
النَّتِيجَةُ البَصَرِيَّةُ: سَيَقُومُ المُتَصَفِّحُ بِتَفْكِيكِ الجُمْلَةِ وَجَعْلِ كُلِّ كَلِمَةٍ تَقَعُ فِي سَطْرٍ مُنْفَصِلٍ تِلْقَائِيًّا، لِيُصْبِحَ عَرْضُ الصُّنْدُوقِ مُطَابِقًا لِأَعْرَضِ كَلِمَةٍ مُفْرَدَةٍ بِدَاخِلِهِ، دُونَ أَنْ تَبْرُزَ الحُرُوفُ خَارِجَ حُدُودِهِ.
---3. خَاصِّيَّةُ fit-content (العَرْضُ المُرِنُ الذَّكِيُّ)
تُعْدُّ قِيمَةُ fit-content الأَكْثَرَ اِسْتِخْدَامًا وَذَكَاءً؛
لِأَنَّهَا تَجْمَعُ بَيْنَ خَصَائِصِ الـ max-content وَالـ
min-content مَعًا بِمُرُونَةٍ تِلْقَائِيَّةٍ. عِنْدَمَا يَكُونُ
المَحْتَوَى قَصِيرًا، يَتَقَلَّصُ العُنْصُرُ لِيُنَاسِبَ حَجْمَهُ (مِثْلَ
max-content)، لَكِنْ إِذَا كَانَ المَحْتَوَى طَوِيلًا جِدًّا،
فَإِنَّهُ لَنْ يَتَجَاوَزَ الحَدَّ الأَقْصَى لِلْعَرْضِ المَسْمُوحِ بِهِ
(مِثْلَ عَرْضِ العُنْصُرِ الأُمِّ أَوْ الـ
max-width المُنَسَّقِ)، وَسَيَقُومُ تِلْقَائِيًّا بِلَفِّ
النُّصُوصِ (Text Wrapping).
/* عَرْضٌ ذَكِيٌّ يَتَكَيَّفُ حَسَبَ المَحْتَوَى وَيَحْتَرِمُ الحُدُودَ */
.box {
width: fit-content;
max-width: 400px; /* سَقْفُ التَّمَدُّدِ المَسْمُوحِ بِهِ */
}
النَّتِيجَةُ البَصَرِيَّةُ: سَيَتَمَدَّدُ الصُّنْدُوقُ أَفُقِيًّا مَعَ النَّصِّ بِانْسِيَابِيَّةٍ، لَكِنْ فَوْرَ وُصُولِهِ إِلَى عَرْضِ 400 بِكْسِلْ، سَيَتَوَقَّفُ عَنِ النُّمُوِّ وَيَجْبُرُ الكَلِمَاتِ التَّالِيَةِ عَلَى الِانْكِسَارِ وَالنُّزُولِ إِلَى سَطْرٍ جَدِيدٍ.
---جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِأَبْعَادِ المَحْتَوَى فِي CSS
لِتَلْخِيصِ الفُرُوقِ الهَنْدَسِيَّةِ بَيْنَ الثَّلَاثَةِ بِنَظْرَةٍ مَسْحِيَّةٍ سَرِيعَةٍ:
| القِيمَةُ | آلِيَّةُ التَّعَامُلِ مَعَ العَرْضِ (Width) | سُلُوكُ اِنْكِسَارِ النُّصُوصِ (Wrapping) |
|---|---|---|
max-content |
يَأْخُذُ أَقْصَى عَرْضٍ مُمْكِنٍ لِيَسَعَ كُلَّ المَحْتَوَى. | يَمْنَعُ اِنْكِسَارَ الأَسْطُرِ نِهَائِيًّا (يَبْقَى النَّصُّ سَطْرًا وَاحِدًا). |
min-content |
يَتَقَلَّصُ لِيُطَابِقَ عَرْضَ أَطْوَلِ كَلِمَةٍ مُفْرَدَةٍ دَاخِلَهُ. | يَجْبُرُ جَمِيعَ الكَلِمَاتِ عَلَى الِانْكِسَارِ عَمُودِيًّا. |
fit-content |
يَتَمَدَّدُ مَعَ المَحْتَوَى، لَكِنَّهُ يَلْتَزِمُ بِالحُدُودِ القُصْوَى لِلْقَالِبِ. | مُرِنٌ؛ يَسْمَحُ بِالِانْكِسَارِ فَقَطْ عِنْدَ الِارْتِطَامِ بِالحَدِّ الأَقْصَى. |
مَتَى تَسْتَخْدِمُ كُلَّ قِيمَةٍ بِاحْتِرَافِيَّةٍ؟
- اِسْتَخْدِمْ max-content عِنْدَمَا تَقُومُ بِتَنْسِيقِ جَدْوَلٍ بَيَانِيٍّ أَوْ شَرِيطِ قَائِمَةٍ عُلْوِيَّةٍ (Navbar)، حَيْثُ تُرِيدُ ضَمَانَ ظُلُورِ العَنَاوِينِ أَوْ الكَلِمَاتِ كَامِلَةً فِي سَطْرٍ وَاحِدٍ أَنِيقٍ دُونَ اِنْقِسَامٍ.
- اِسْتَخْدِمْ min-content عِنْدَمَا تُرِيدُ عَمَلَ تَنْسِيقَاتٍ جَانِبِيَّةٍ مُبْتَكَرَةٍ، مِثْلَ وَضْعِ صُورَةٍ وَتَحْتَهَا نَصٌّ وَصْفِيٌّ رَفِيعٌ، حَيْثُ تُرِيدُ أَنْ يَتَقَلَّصَ عَرْضُ الصُّنْدُوقِ لِيُطَابِقَ عَرْضَ الصُّورَةِ تَمَامًا دُونَ زِيَادَةٍ.
- اِسْتَخْدِمْ fit-content كَخِيَارٍ قِيَاسِيٍّ لِعَنَاوِينِ المَقَالَاتِ أَوْ صَنَادِيقِ التَّنْبِيهِ (Alerts) وَالبِطَاقَاتِ (Cards)، لِكَيْ يَأْخُذَ الصُّنْدُوقُ حَجْمًا نَظِيفًا مُطَابِقًا لِلْكَلِمَاتِ القَصِيرَةِ، مَعَ حِمَايَتِهِ مِنَ التَّشَوُّهِ وَالخُرُوجِ عَنِ الحَوَافِّ عِنْدَ كِتَابَةِ جُمَلٍ طَوِيلَةٍ.
الخُلَاصَةُ
إِنَّ اِسْتِيعَابَ خَصَائِصِ fit-content وَ
min-content وَ max-content يَنْقُلُ مَهَارَاتِكَ فِي
لُغَةِ CSS إِلَى مُسْتَوَى المُحْتَرِفِينَ؛ حَيْثُ تُغْنِيكَ
هَذِهِ القِيَمُ الذَّكِيَّةُ عَنْ حِسَابِ الأَبْعَادِ يَدْوِيًّا أَوْ
الِاعْتِمَادِ المُفْرِطِ عَلَى الـ Media Queries. فوِّضْ اسْتِخْدَامَهَا
بِنَاءً عَلَى طَبِيعَةِ الوَاجِهَةِ التَّفَاعُلِيَّةِ لِتُقَدِّمَ مَوَاقِعَ
عَصْرِيَّةً تَتَنَاغَمُ مَعَ كَافَّةِ السِّيَاقَاتِ بِمُرُونَةٍ مُطْلَقَةٍ.