فرق ویژگی "visibility" و ویژگی "display"

در CSS، ویژگی‌های visibility و display هر دو برای کنترل نمایش عناصر به کار می‌روند، اما رفتار متفاوتی دارند:

۱. display

• وقتی display: none برای یک عنصر تنظیم شود، عنصر به‌طور کامل از صفحه حذف می‌شود، به‌طوری که فضای آن هم گرفته نمی‌شود و باقی عناصر جابه‌جا می‌شوند.
• در واقع، انگار که عنصر اصلاً وجود ندارد. این ویژگی برای مخفی کردن کامل عنصر و صرفاً نمایش در مواقع لازم کاربرد دارد.

۲. visibility

• وقتی visibility: hidden برای یک عنصر تنظیم شود، عنصر از نظر دیداری مخفی می‌شود، اما همچنان فضای آن روی صفحه باقی می‌ماند.
• سایر عناصر تحت تأثیر مکان عنصر مخفی‌شده هستند و فضا همچنان محفوظ می‌ماند.
• این ویژگی مناسب است زمانی که می‌خواهیم عنصری دیده نشود، اما فضای آن همچنان حفظ شود.

مقایسه

ویژگی

display: none

visibility: hidden

در CSS، ویژگی‌های display و visibility هر دو برای کنترل نمایش عناصر در صفحه استفاده می‌شوند، اما تفاوت‌های اساسی دارند. بیایید تفاوت‌ها را دقیق‌تر بررسی کنیم:

1. ویژگی display

ویژگی display نوع نمایش عنصر را در صفحه تنظیم می‌کند و حتی می‌تواند عنصر را کاملاً از صفحه حذف کند.

2. ویژگی visibility

ویژگی visibility مشخص می‌کند که عنصر قابل مشاهده باشد یا خیر، اما برخلاف display فضای عنصر را در صفحه حفظ می‌کند.

تفاوت‌های اصلی

• visibility: hidden عنصر را مخفی می‌کند اما فضای آن را حفظ می‌کند.
• display: none عنصر را مخفی می‌کند و فضایی که اشغال کرده بود را نیز حذف می‌کند.

این دو ویژگی می‌توانند به طور مستقل یا همزمان در طراحی صفحات وب استفاده شوند تا به طراحی دلخواه برسید.

تعریف: visibility تعیین می‌کند که آیا یک عنصر قابل دیدن باشد یا خیر، بدون تغییر در نحوه اشغال فضای آن عنصر در صفحه.

مقدارهای ممکن:

• visible: عنصر قابل دیدن است.
• hidden: عنصر قابل دیدن نیست، اما فضای آن همچنان در صفحه محفوظ است.

👇مثال:

عکس اول

در این مثال، عنصر با کلاس .hidden-element قابل دیدن نیست، اما فضایی که اشغال کرده همچنان در صفحه باقی می‌ماند.

تعریف: display نحوه نمایش یک عنصر در صفحه را تعیین می‌کند. این ویژگی می‌تواند به کلی نحوه نمایش و اشغال فضای عنصر را تغییر دهد.

مقدارهای ممکن:

• block: عنصر به صورت بلوکی نمایش داده می‌شود و فضای کل خط را اشغال می‌کند.
• inline: عنصر به صورت خطی نمایش داده می‌شود و تنها فضای محتوای خود را اشغال می‌کند.
• none: عنصر به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

👇مثال:

عکس دوم

در این مثال، عنصر با کلاس .hidden-element به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

مقایسه

• visibility: hidden: عنصر قابل دیدن نیست، اما فضای آن همچنان اشغال شده باقی می‌ماند.
• display: none: عنصر به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

کاربردها

visibility: hidden:

display: none:

مثال کاربردی

فرض کنید دو عنصر داریم که یکی باید موقتاً پنهان شود و دیگری به کلی از صفحه حذف شود:

عکس سوم

در این مثال، عنصر اول فضای خود را حفظ می‌کند اما قابل دیدن نیست. عنصر دوم به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

تفاوت بین ویژگی‌های visibility و display در CSS

در طراحی وب، برای کنترل نمایش و پنهان‌سازی عناصر HTML، از دو ویژگی مهم CSS به نام‌های visibility و display استفاده می‌شود. هر یک از این ویژگی‌ها عملکرد متفاوتی دارند و در شرایط خاصی به کار می‌روند.

ویژگی visibility

• تعریف: این ویژگی مشخص می‌کند که یک عنصر قابل مشاهده باشد یا خیر. به عبارت دیگر، تعیین می‌کند که آیا عنصر در صفحه رندر می‌شود یا نه.
• مقادیر اصلی:
  • visible: عنصر به طور کامل نمایش داده می‌شود (مقدار پیش‌فرض).
  • hidden: عنصر پنهان می‌شود، اما فضایی که در صفحه اشغال می‌کرد، همچنان حفظ می‌شود. یعنی عناصر دیگر نمی‌توانند جایگزین آن شوند.
• کاربردها:
  • پنهان کردن موقت یک عنصر بدون تغییر در ساختار صفحه.
  • ایجاد افکت‌های انیمیشنی که در آن یک عنصر به تدریج ظاهر یا ناپدید می‌شود.
  • ایجاد منوهای کشویی یا تب‌های پنهان.

ویژگی display

• تعریف: این ویژگی نحوه نمایش یک عنصر را تعیین می‌کند. به عبارت دیگر، مشخص می‌کند که یک عنصر چگونه در جریان عادی صفحه قرار می‌گیرد.
• مقادیر اصلی:
  • none: عنصر به طور کامل از صفحه حذف می‌شود. گویی هرگز وجود نداشته است. فضای اشغال شده توسط عنصر آزاد می‌شود و عناصر دیگر می‌توانند جایگزین آن شوند.
  • block: عنصر به صورت یک بلوک نمایش داده می‌شود و به طور کامل عرض والد خود را اشغال می‌کند.
  • inline: عنصر به صورت درون خطی نمایش داده می‌شود و فقط به اندازه محتویات خود فضا اشغال می‌کند.
  • inline-block: ترکیبی از inline و block است. عنصر به صورت درون خطی نمایش داده می‌شود، اما می‌توان عرض و ارتفاع آن را به صورت دلخواه تنظیم کرد.
• کاربردها:
  • تغییر ساختار صفحه به صورت دینامیک.
  • ایجاد انواع مختلف طرح‌بندی (مثلاً ایجاد یک ستون جدید).
  • پنهان کردن کامل یک عنصر به طوری که تأثیری بر چیدمان صفحه نداشته باشد.
    
     visibility مقدار:     hidden     / اثر: عنصر پنهان می‌شود، اما فضای آن حفظ می‌شود.
    display مقدار:     none     / اثر: عنصر به طور کامل حذف می‌شود و فضای آن آزاد می‌شود.

ویژگی  "Visibility"  صرفاً تعیین میکند که عنصر مورد نظر قابل مشاهده باشد یا خیر  و حتی اگر آنرا "hidden" مقداردهی کنید باز هم عنصر در صفحه جا اشغال میکند اما ویژگی "display" نوع قرار گرفتن عنصر در صفحه را تعیین میکند مقدار "inline" باعث میشود عنصر بتواند باعناصر دیگر در یک خط قرار بگیرد اما عرض و ارتفاع آن قابل کنترل نخواهد بود. مقدار"block" باعث میشود عنصر تمام عرض خطی را که در آن قرار دارد اشغال کند تا عناصر دیگر نتوانند با آن در یک خط قرار بگیرند و عرض و ارتفاع عنصر در این حالت قابل کنترل است مقدار "inline-block" در حقیقت همان "inline" است با این تفاوت که عرض و ارتفاع عنصر قابل کنترل خواهد بود مقدار "none" باعث میشود عنصر مورد نظر به طور کلی قابل دیدن نباشد و  از جریان صفحه خارج شود (این با حالت Visibility: hidden; فرق دارد زیر روی چینش عناصر دیگر تاثیرگذار خواهد بود).

ویژگی "display" مقادیر دیگری مانند "flex", "grid"  نیز دارد که بحث آنها خیلی مفصل تر است.

displaySpecifies how an element should be displayedvisibilitySpecifies whether or not an element should be visible