visibility

از طریق ویژگی visibility می توان ترسیم شدن عنصر را کنترل کرد، مثلا می توان عنصر را مخفی کرد.

مقادیر ویژگی visibility

visibility: visible | hidden | collapse | inherit

visible

visible مقدار اولیه این عنصر است که باعث می شود تا عنصر آشکار باشد.

hidden

این مقدار باعث ناپدید شدن عنصر می شود. توجه داشته باشیم که عنصر در صفحه وجود دارد و موقعیتش حفظ می شود فقط قابل دیدن نیست.

collapse

از این مقدار برای مخفی کردن ردیف ها و ستون های یک جدول استفاده می شود. نکته ای که وجود دارد این است که وقتی از این مقدار برای مخفی کردن ردیف ها و یا ستون های یک جدول استفاده می کنیم فضای گرفته شده توسط آنها نیز از بین می رود انگار که از display با مقدار none استفاده شده است ولی خانه های دیگر جدول که باقی مانده اند طوری عرض و ارتفاع خواهند داشت که آن ردیف یا ستون مخفی شده هنوز آنجا است.

توجه داشته باشیم که این مقدار علاوه بر انتظار در مرورگرهای مختلف بصورت های گوناگونی پیاده سازی شده است.

اگر این مقدار برای عناصر دیگر استفاده شود کاملا شبیه به hidden تاثیر می گذارد.

inherit

با استفاده کلمه کلیدی inherit مقدار این ویژگی از عنصر پدر به ارث می رسد:

.parent {
  visibility: visible;
}

.children {
  visibility: inherit; /* visible*/
}

تفاوت visibility با display

زمانی که از ویژگی display با مقدار none برای مخفی کردن یک عنصر استفاده می کنیم عنصر از flow صفحه خارج می شود این یعنی عنصر در صفحه وجود ندارد و مکان عنصر می تواند با عناصر دیگر پر شود.

اما زمانی که از ویژگی visibility برای مخفی کردن یک عنصر استفاده می کنیم عنصر فقط ناپدید می شود و همچنان در flow صفحه وجود دارد و مکان آن حفظ می شود. می توان گفت که عنصر کاملا شیشه ای شده می شود یعنی عنصر وجود دارد اما دیده نمی شود.

اگر عنصری را توسط ویژگی visibility مخفی کنیم عناصر فرزند آن نیز مخفی می شوند اما این امکان وجود دارد که با تعیین مقدار visible برای فرزندان عنصر آنها را آشکار کرد.

.parent {
  visibility: hidden;
}

.children {
  visibility: visible;
}

اما وقتی از طریق ویژگی display اقدام به مخفی کردن عنصری می کنیم فرزندان آن عنصر نیز مخفی شده و امکان برگرداندن آنها نیست مگر اینکه خود عنصر را برگردانیم تا فرزندان آن نیز برگردند.

مثال

در دموی زیر مقدار این ویژگی را برای عنصر تصویر تغییر دهید و همینطور می توانید از ویژگی display با مقدار none استفاده کرده و تفاوت را مشاهده کنید:

See the Pen visibility by Mojtaba Seyedi (@seyedi) on CodePen.