ماذا تعني display: none في CSS؟

display: none يخفي العنصر تمامًا: لا يظهر، ولا يأخذ أي مساحة، وكأنه غير موجود في الصفحة.

.mobile-menu { display: none; }

@media (max-width: 600px) {
  .mobile-menu { display: block; }
}

المقارنة

• display: none: مخفي، ولا مكان له.
• visibility: hidden: مخفي، لكن مكانه محجوز.
• opacity: 0: شفاف، ومكانه محجوز، ويمكن النقر عليه.

قارئات الشاشة تتجاهل العناصر بـ display: none أيضًا. لإخفاء نص عن العين فقط وإبقائه لقارئات الشاشة، يُستخدم كلاس خاص مثل .sr-only.