cssblog.ir logo
P

visibility

مخفی سازی عناصر با استفاده از مشخصه visibility

مشخصه visibility همانند مشخصه opacity می‌تواند وضعیت دیده شدن یا نشدن عناصر را تعیین کند اما این عمل را به طریق دیگری انجام داده و دو تفاوت عمده با آن مشخصه دارد

با این مشخصه می‌توان وضعیت نمایش (دیده شدن) یک عنصر یا ستون‌ها و ردیف‌های جدول را تعیین کرد.

مقادیر مجاز

hidden

با استفاده از این مقدار می توان عناصر را مخفی ساخت. که این مخفی ساختن دو تفاوت اصلی با مخفی ساختن از طریق display دارد.
۱- عنصر فقط و فقط بصورت دیداری (visually) مخفی می شود وگرنه تمام فضایی که قبل از مخفی شدن اشغال کرده و ساختاری که آن قسمت داشته، همچنان باقی می ماند و اصلا تغییری جز دیده نشدن عنصر ایجاد نمی شود.

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

مثال:

visible

به معنی «قابل مشاهده» است و همانطور که از نامش پیداست تغییری خاصی در چیزی ایجاد نمی کند. بصورت پیشفرض هیچ عنصری مخفی نیست و تمام عناصر قابل مشاهده هستند مگر اینکه با استفاده از مقدار hidden آنها را مخفی کرده باشیم و با استفاده از این مقدار آن را نقض کنیم.

collapse

این مقدار تنها روی عناصر مربوط به جدول‌ها یا عناصری که از طریق display چنین وضعیتی را پیدا کرده‌اند، اثر می‌کند. برخی از این عناصر عبارتند از:

<tr> , <tbody> , <col> , <colgroup> 

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

برای مثال به یک این مقدار داده شد و مشاهده شد که در مرورگر کروم و سافاری (webkit) مانند hidden مقدار فضای اشغال شده باقی ماند اما در مروگر فایرفاکس فضای اشغال شده نیز از بین رفت.

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

inherit

برای تعیین به ارث بردن این مشخصه از والد استفاده می‌شود. یعنی در مواقعی که می‌خواهیم عنصر ما درباره این مشخصه مانند والد خود عمل کند.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند