ویژگی visibility در css

ویژگی visibility در css کنترل نمایانی تگ های html

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت visibility در زبان CSS می پردازیم.

ویژگی کاربردی visibility در دومین نسخه این زبان طراحی یعنی css2 معرفی شده است.

معرفی و کاربرد ویژگی visibility در زبان طراحی سی اس اس

به کمک خاصیت visibility در CSS2 می توانیم قابلیت نمایانی یا عدم نمایانی یک تگ html را تعیین تعیین نماییم.

تفاوت خاصیت visibility با خاصیت display

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

در این صورت تگ html از صفحه حذف شده و فضای خود را نیز از دست می دهد. بطوریکه عناصر html دیگر می توانند جای تگ html مربوطه را پر کنند.

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

مقادیر صفت کاربردی visibility در زبان طراحی css

صفت visibility که در زبان طراحی CSS2 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

مقدار visible
مقدار hidden
مقدار collapse
مقدار initial
مقدار inherit

مقدار visible درون خاصیت visibility در زبان سی اس اس

اگر خاصیت visibility را برای یک عنصر html برابر با مقدار visible قرار دهیم، در حقیقت می خواهیم تگ html مربوطه آشکار شود و قابلیت نمایانی داشته باشد.

مقدار visible به عنوان مقدار پیش فرض خصوصیت visibility محسوب می شود.

[html] h3 {visibility: visible;} [/html]

مقدار hidden درون خاصیت visibility در زبان css

اگر خاصیت visibility را برای یک عنصر html برابر با مقدار hidden قرار دهیم، در حقیقت می خواهیم تگ html مربوطه مخفی شود و قابلیت نمایانی نداشته باشد.

نکته مهم

در این حالت عنصر در صفحه وجود دارد و فضای مخصوص به خود را نیز اشغال کرده فقط قابلیت نمایش ندارد.

[html] h3 {visibility: hidden;} [/html]

مقدار collapse درون خاصیت visibility در زبان سی اس اس

اگر خاصیت visibility را برای یک عنصر html برابر با مقدار collapse قرار دهیم، در حقیقت می خواهیم ردیف ها و ستون های یک جدول html را مخفی نماییم.

نکته مهم

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

البته به جز ستون ها و ردیف هایی که با مقدار collapse قابلیت نمایش و فضای خود را از دست داده اند، بقیه ردیف ها و ستون ها قابل مشاهده خواهند بود.

در صورتی که از این مقدار در عناصری به جز عناصر جدولی html استفاده کنید، رفتار این مقدار کاملا مشابه مقدار hidden در خصوصیت visibility خواهد بود.

[html] h3 {visibility: collapse;} [/html]

مقدار initial درون خاصیت visibility در زبان css

اگر خاصیت visibility را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت visibility در زبان سی اس اس

اگر خاصیت visibility را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.