display و visibility في CSS: إظهار العناصر وإخفاؤها

عرفت أن عناصر HTML نوعان: عناصر تبدأ في سطر جديد، وعناصر تبقى داخل السطر. لكن هذا السلوك ليس قدراً ثابتاً. بخاصية واحدة اسمها display تستطيع أن تجعل الرابط يتصرف كصندوق كامل، وأن تجعل عناصر القائمة تقف بجانب بعضها، وأن تخفي عنصراً من الصفحة تماماً. في هذا الدرس ستتقن هذه الخاصية، وتتعلم ثلاث طرق مختلفة لإخفاء العناصر.

الخاصية display

display تحدد كيف يتصرف صندوق العنصر مع جيرانه. ولكل وسم قيمة افتراضية: <div> قيمته block، و <span> قيمته inline. وأنت تستطيع تغييرها متى شئت.

تخيّل طاولات في قاعة: قيمة display هي تعليمات الجلوس. إما أن تأخذ كل مجموعة صفاً كاملاً لها، أو تجلس المجموعات متجاورة في الصف نفسه.

القيم الثلاث الأساسية

القيمة	سطر جديد؟	يقبل width و height؟
block	نعم، ويأخذ العرض كله	نعم
inline	لا، يبقى داخل السطر	لا
inline-block	لا، يبقى داخل السطر	نعم

/* رابط يتصرف كصندوق كامل قابل للضغط */
nav a {
  display: block;
  padding: 12px;
}

/* عناصر القائمة تقف بجانب بعضها */
nav li {
  display: inline-block;
  width: 120px;
}

inline-block تجمع أفضل ما في النوعين: العنصر يبقى في السطر مع جيرانه، ويحترم العرض والارتفاع والهوامش من كل الجهات.

وهناك القيمتان flex و grid اللتان تعلمتهما في درسين كاملين. وهما من قيم display أيضاً، لكنهما تتحكمان في ترتيب الأبناء داخل العنصر.

الإخفاء التام: display: none

.menu {
  display: none;
}

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

وهذه أشهر طريقة لبناء القوائم التي تفتح وتغلق: القائمة مخفية بـ none، وعند الضغط يغيّر JavaScript القيمة إلى block.

الإخفاء مع حجز المكان: visibility

.badge {
  visibility: hidden;
}

العنصر يصير غير مرئي، لكن مكانه يبقى محجوزاً فارغاً. والقيمة الافتراضية هي visible.

تخيّل مقعداً في السينما: مع display: none أُزيل المقعد من الصف واقتربت المقاعد من بعضها. ومع visibility: hidden المقعد موجود وفارغ، ولا يجلس فيه أحد.

متى تحتاج هذا؟ عندما لا تريد أن تقفز الصفحة. مثلاً رسالة خطأ تحت حقل: إذا حجزت مكانها مسبقاً فلن يتحرك النموذج كله عند ظهورها.

الشفافية: opacity

.ghost {
  opacity: 0;
}

opacity تأخذ قيمة من 0 (شفاف تماماً) إلى 1 (ظاهر تماماً). والقيمة 0.5 نصف شفاف.

مع opacity: 0 العنصر غير مرئي ومكانه محجوز، لكنه ما زال يستقبل الضغط. إذا كان زراً فالضغط على مكانه الفارغ ينفّذه. وميزته الكبرى أنه يقبل الحركة التدريجية، فتستطيع أن تجعل العنصر يظهر بنعومة، كما سترى في درس الانتقالات.

مقارنة طرق الإخفاء

	display: none	visibility: hidden	opacity: 0
يحجز مكانه؟	لا	نعم	نعم
يستقبل الضغط؟	لا	لا	نعم
يقرؤه قارئ الشاشة؟	لا	لا	نعم
يقبل الظهور التدريجي؟	لا	لا	نعم

الإخفاء حسب حجم الشاشة

من أكثر استخدامات display مع التصميم المتجاوب: عنصر يظهر على الكمبيوتر ويختفي على الموبايل، أو العكس.

.desktop-menu {
  display: none;
}

@media (min-width: 768px) {
  .desktop-menu {
    display: flex;
  }

  .menu-button {
    display: none;
  }
}

على الموبايل يظهر زر القائمة فقط. ومن عرض 768px فأكبر تظهر القائمة الكاملة ويختفي الزر.

جرّب بنفسك

في الصف الأول ثلاثة صناديق، والأوسط منها مخفي بـ display: none. غيّر القيمة في الكلاس hide إلى visibility: hidden ثم إلى opacity: 0.3، وراقب مكان الصندوق في كل مرة. بعدها غيّر inline-block في الكلاس tag إلى inline ثم إلى block:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: sans-serif; } .box { background: #dbeafe; border: 2px solid #3b82f6; padding: 12px; margin: 6px 0; } .hide { display: none; } .tag { display: inline-block; width: 110px; padding: 8px; margin: 4px; background: #fde68a; text-align: center; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• إعطاء عرض لعنصر inline: width و height لا تعملان مع <span> و <a>. غيّر display إلى inline-block أو block أولاً.
• إخفاء محتوى مهم بـ display: none: قارئ الشاشة لن يقرأه. إذا كان النص مهماً للمكفوفين فلا تخفه بهذه الطريقة.
• زر شفاف يُضغط بالخطأ: العنصر بـ opacity: 0 ما زال يعمل. إذا أردت تعطيله فأضف visibility: hidden.
• الإظهار بقيمة خاطئة: إذا كانت الحاوية flex وأخفيتها بـ none، فأعدها إلى flex وليس block، وإلا انكسر ترتيبها.

اختبر نفسك

سؤال

أي طريقة تخفي العنصر وتجعل العناصر التالية تأخذ مكانه؟

visibility: hiddenopacity: 0display: none

سؤال

تريد أن يقف رابطان بجانب بعضهما، ولكل واحد عرض 150px. أي قيمة تناسب؟

display: blockdisplay: inlinedisplay: inline-block

الخلاصة

• display تحدد سلوك صندوق العنصر: block أو inline أو inline-block.
• inline-block يبقى في السطر ويقبل العرض والارتفاع.
• display: none تزيل العنصر ومكانه معاً.
• visibility: hidden تخفيه وتحجز مكانه.
• opacity: 0 تجعله شفافاً، لكنه يبقى قابلاً للضغط ويقبل الحركة التدريجية.