فهم خاصية العرض (CSS Display) في CSS

المقدمة

في عالم التصميم الويب، تعد الـ CSS من الأدوات الأساسية التي يعتمد عليها المصممون لتحقيق الشكل والتصميم الذي يرغبون فيه. وتأتي خاصية العرض (display) كأحد الأدوات الأساسية في الـ CSS. تُعد خاصية العرض من الخواص الأساسية في CSS والتي تحدد كيف يتم عرض العناصر في الصفحة. تأتي هذه الخاصية بقيم متعددة، كل منها له طريقة عرض خاصة به. في هذا المقال، سنناقش القيم المختلفة لخاصية العرض في CSS وكيف يمكن استخدامها.

خاصية العرض CSS مع القيمة block

قيمة “block” هي القيمة الافتراضية للعديد من العناصر في CSS مثل الـ <div>، <h1>، <p>، وغيرها. عند تطبيق القيمة “block” على أي عنصر، يتم عرض هذا العنصر على سطر جديد، ويأخذ كل العرض المتاح في الصفحة، أي أنه يمتد من الهامش الأيسر إلى الهامش الأيمن للعنصر الذي يحتويه.

مثال:

<div style="display: block;"> هذا عنصر ذو خاصية العرض الكتلية </div>

في هذا المثال، ستشغل الـ <div> كل العرض المتاح على سطر واحد، ولن يتم عرض أي عناصر أخرى بجوارها على نفس السطر.

خاصية العرض CSS مع القيمة inline

تعتبر القيمة “inline” أحد أنواع العرض في CSS، حيث تتيح لك هذه القيمة إدراج العناصر بجوار بعضها البعض دون الانتقال إلى سطر جديد، وهذا بخلاف القيمة “block”. تستخدم القيمة “inline” في العناصر التي تحتوي على نص، مثل الروابط والنصوص المختلفة. يجب الإشارة إلى أن العناصر التي تتبع القيمة “inline” لا تستجيب للخصائص المتعلقة بالهوامش والتباعد (margin و padding) في الاتجاه الرأسي.

مثال:

<span style="display: inline;"> هذا عنصر ذو خاصية العرض الخطية </span>

في هذا المثال، سيتم عرض النص داخل العنصر <span> بجوار أي نص أو عنصر آخر يأتي قبله أو بعده في نفس السطر.

خاصية العرض CSS مع القيمة none

تتيح لك القيمة “none” إخفاء العنصر بالكامل من الصفحة. عندما تضبط خاصية العرض على “none”، فإن العنصر وجميع محتوياته تختفي تمامًا كما لو أنه لم يكن موجودًا في الصفحة. هذا الخيار يفيد عندما ترغب في إخفاء بعض العناصر في الواجهات الخاصة بالأجهزة المحمولة أو بناء على شروط معينة.

مثال:

<div style="display: none;"> هذا العنصر مخفي </div>

في هذا المثال، العنصر <div> والنص الذي يحتويه لن يظهران في الصفحة.

CSS visibility vs. display

قد يبدو أن خاصية visibility في CSS مشابهة لخاصية display بالقيمة “none”. إلا أن هناك فرقاً أساسياً بينهما. عندما تُحدد خاصية display بالقيمة “none”، يتم إزالة العنصر بالكامل من النسق العام للصفحة، وبالتالي لا يأخذ أي مكان أو مساحة. ولكن عند استخدام visibility: hidden، يبقى العنصر ضمن النسق العام ولكنه يصبح غير مرئي.

مثال:

<div style="visibility: hidden;"> هذا العنصر غير مرئي ولكنه موجود </div>
<div style="display: none;"> هذا العنصر مخفي </div>

في هذا المثال، ستلاحظ أن العنصر الأول غير مرئي ولكنه لا يزال يأخذ مكانه في الصفحة، بينما العنصر الثاني مخفي تمامًا ولا يأخذ أي مساحة.

خاصية العرض CSS مع القيمة flex

القيمة “flex” هي طريقة عرض حديثة تم إضافتها في CSS3 لتوفير طرق أكثر مرونة لترتيب العناصر داخل العنصر الأم. يمكن تطبيق القيمة “flex” على العناصر الأم للسماح بالتحكم في توزيع الأطفال ومحاذاتهم داخل هذا العنصر.

مثال:

<div style="display: flex;">
  <div> العنصر الأول </div>
  <div> العنصر الثاني </div>
  <div> العنصر الثالث </div>
</div>

في هذا المثال، سيتم ترتيب العناصر الثلاثة بجوار بعضها البعض في سطر واحد، بدلاً من توزيعهم على أسطر مختلفة. يمكن السيطرة على توزيع هذه العناصر ومحاذاتها بالاستفادة من خصائص flex أخرى مثل justify-content و align-items.

خاصية العرض CSS مع القيمة grid

توفر القيمة “grid” للخاصية “display” طريقة قوية لإنشاء التصميمات الشبكية في CSS. بالإضافة إلى القدرة على تحديد المواقع والحجم بالنسبة للصفوف والأعمدة، يمكن للشبكة أن توفر قدرًا أكبر من التحكم في ترتيب العناصر وتوزيعها في الصفحة.

مثال:

<div style="display: grid; grid-template-columns: auto auto auto; grid-gap: 10px;">
  <div> العنصر الأول </div>
  <div> العنصر الثاني </div>
  <div> العنصر الثالث </div>
</div>

في هذا المثال، نستخدم القيمة “grid” لخاصية العرض ونستخدم الخاصية grid-template-columns لتحديد ثلاثة أعمدة بنفس الحجم. كما نستخدم الخاصية grid-gap لتحديد المسافة بين الأعمدة. النتيجة هي توزيع متساوٍ للعناصر على ثلاثة أعمدة.

خاصية العرض CSS مع القيمة inline-block

القيمة “inline-block” لخاصية العرض تجمع بين خصائص العناصر “inline” و”block”. هذا يعني أن العنصر سيظل في نفس الخط مع العناصر الأخرى، مثل العناصر “inline”، ولكنه في الوقت نفسه يمكنه أن يحتوي على عرض وارتفاع، مثل العناصر “block”.

مثال:

<div style="display: inline-block; width: 200px; height: 100px;">
 هذا العنصر لديه العرض والارتفاع المحدد ولكنه لا يزال في نفس الخط مع العناصر الأخرى 
</div>

في هذا المثال، سيتم تنسيق العنصر كعنصر “block” بحيث يمكن تحديد العرض والارتفاع. ولكنه، مثل العناصر “inline”، سيظل في نفس الخط مع العناصر الأخرى على الصفحة بدلاً من بداية سطر جديد.

خاصية العرض CSS مع القيمة inline

القيمة “inline” لخاصية العرض تجعل العناصر تظهر في نفس الخط مع العناصر المجاورة لها. العناصر التي تمتلك القيمة “inline” لا تبدأ في سطر جديد ولا تكسر الخط. بعض العناصر الأصلية التي تأتي بالقيمة “inline” تشمل العناصر <span>، <a>، و <img>.

مثال:

<span style="display: inline;"> هذا العنصر في نفس الخط مع العناصر الأخرى </span>

في هذا المثال، العنصر <span> الذي يحتوي على القيمة “inline” لخاصية العرض سيظهر في نفس الخط مع العناصر المجاورة له. لاحظ أنه لا يمكن تحديد العرض والارتفاع للعناصر “inline”.

خاصية الرؤية CSS مع القيمة hidden

خاصية الرؤية في CSS، أو visibility، تتحكم في ما إذا كان العنصر مرئيًا في الصفحة أم لا. القيمة hidden تجعل العنصر غير مرئي، ولكن ما زال يشغل المساحة في الصفحة، وهذا يختلف عن القيمة none لخاصية display التي تجعل العنصر غير مرئي ولا تشغل أي مساحة.

مثال:

<div style="visibility: hidden;">
 هذا العنصر غير مرئي ولكنه يشغل مساحة على الصفحة
</div>

في هذا المثال، العنصر <div> غير مرئي بسبب القيمة hidden لخاصية visibility. ولكنه، على عكس القيمة none لخاصية display، سيظل يشغل المساحة التي كان سيشغلها لو كان مرئيًا.

خاصية العرض CSS مع القيمة none

القيمة “none” لخاصية العرض في CSS تجعل العنصر غير مرئي ولا تأخذ أي مساحة على الصفحة. هذا يعني أن العنصر وأي محتوى داخله سيتم إزالته تمامًا من التخطيط ولا يمكن رؤيته.

مثال:

<div style="display: none;">
 هذا العنصر غير مرئي ولا يأخذ أي مساحة على الصفحة
</div>

في هذا المثال، العنصر <div> غير مرئي بسبب القيمة “none” لخاصية العرض. لا يمكن رؤية العنصر أو أي محتوى داخله، ولا يشغل أي مساحة على الصفحة.

الخاتمة

في هذه المقالة، تعلمنا كيف تعمل خاصية العرض في CSS وكيف يمكن استخدام القيم المختلفة لتغيير سلوك العناصر. من القيم الأساسية مثل “block” و “inline”، إلى القيم المتقدمة مثل “flex” و “grid”، وصولاً إلى القيمة “none” التي تجعل العنصر غير مرئي تمامًا.

الأسئلة المتكررة