جلسه ی بیست و نهم: خصوصیت Visibility در CSS

خصوصیت visibility

در این جلسه از آموزش طراحی وب سایت می خواهیم به آموزش خصوصیت های Visibility که به نمایش عناصر مورد نظر ما در وب سایت می پردازد بپردازیم.

 

خصوصیت Visibility چیست؟

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

 

خصوصیت Visibility چه مقادیری می توانند داشته باشند؟

به طور کلی در خصوصیت Visibility سه مقدار وجود دارد که عبارتند از:

  1. visible
  2. hidden
  3. collapse

 

خصوصیت Visible

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

حال فکر کنید به یکی از این دکمه ها نیاز مندیم در این صورت نمونه کد زیر را به عنوان یک استایل در مکان مورد نظر خود قرار می دهیم و دکمه ی مورد نظر ما قابل مشاهده خواهد بود:

visibility: visible;

به مثال زیر در این زمینه توجه کنید:

کد HTML:

<table border="1px">

<td><h1 class="A" >کلاس A</h1></td>

</table>

<table border >

<td><h1 class="B">کلاس B</h1></td>

</table>

<table border >

<td><h1 class="C">کلاس C</h1></td>

</table>

کد CSS:

table {

margin: 10px

}

.A , .B , .C {

visibility:visible;

}

خروجی کد بالا:

حالت visible در خصوصیت visibility

 

خصوصیت Hidden

زمانی که از خصوصیت hidden استفاده می کنیم می خواهیم عنصر یا عناصری را که در صفحه در حال نمایش هستند را مخفی کنیم. برای این کار نمونه کد زیر را در ادرس مورد نظر خود در زبان CSS قرار می دهیم:

visibility: hidden;

به مثال زیر در این زمینه توجه کنید:

کد HTML:

<table border="1px">

<td><h1 class="A" >کلاس A</h1></td>

</table>

<table border >

<td><h1 class="B">کلاس B</h1></td>

</table>

<table border >

<td><h1 class="C">کلاس C</h1></td>

</table>

کد CSS:

table {

margin: 10px;

}

.B {

visibility: hidden;

}

خروجی کد بالا:

حالت Hidden در خصوصیت visibility

 

خصوصیت Collapse

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

عموما این خصوصیت برای حذف ستون ها یا سطر های جدول استفاده می شود و مانند خصوصیت Display:none عمل می کند. اما در صورتی که از آن برای خصوصیت های دیگر استفاده شود رفتاری مشابه با خصوصیت Hidden خواهد داشت.

به مثال زیر در این زمینه توجه کنید:

کد HTML:

<table border="1px">

<td><h1 class="A" >کلاس A</h1></td>

</table>

<table border class="B">

<td><h1 >کلاس B</h1></td>

</table>

<table border >

<td><h1 class="C">کلاس C</h1></td>

</table>

کد CSS:

table {

margin: 10px;

}

.B {

visibility: collapse;

}

خروجی کد بالا:

حالت collapse در خصوصیت visibility

 

مبحث تکمیلی

عموما تمامی خصوصیت ها در زبان CSS یک حالت به نام inherit دارند که از طریق این ویژگی از تگ مادر قبل از خود ارث بری می کنند یعنی اگر ما در جایی از خصوصیت Hidden استفاده کنیم و سپس چند خط بعد از آن از خصوصیت inherit استفاده کنیم عنصر مورد نضر ما نیز از خصوصیت Hidden پیروی کرده و مانند آن رفتار می کند.

نکته ی مهم: توجه داشته باشید که هیچ کدام از نسخه های Internet Explorer از مقدار “inherit” را برای خصوصیت visibility پشتیبانی نمی کنند.

 

تفاوت خصوصیت های Visibility و Display

عموما عناصر مورد نظر ما مانند یک Flow عمل می کنند. شاید از خود بپرسید Flow چیست؟ باید بگویم که Flow نوعی حالت رفتاری عناصر می باشد. این حالت به این گونه است که عناصر به صورت زنجیره ای به یکدیگر متصل هستند و زمانی که شما یک عنصر را حذف می کنید عنصری دیگر جای آن را پر می کند.

برای مثال زمانی که ما به یک عنصر Margin می دهیم مکان عناصر اطراف آن نیز تغییر می کند. زمانی که ما از خصوصیت Display:none برای مخفی کردن یک عنصر استفاده می کنیم عنصر مورد نظر ما پس از مخفی شدن از زنجیره ی مورد نظر ما یا همان Flow خارج شده و مکان خود را به عنصری دیگر واگذار می نماید. (برای مشاهده ی آموزش خصوصیت Display کلیک کنید)

اما در خصوصیت Visibility:hidden این گونه نیست. زمانی که ما از این خصوصیت برای یک عنصر استفاده کنیم عنصر مورد نظر ما از Flow خارج نشده و عنصر دیگری جای آن را نمیگیرد فقط برای ما قابل دیدن نمی باشد.

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

اما زمانی که از خصوصیت Display:none استفاده کنیم فرزندان آن نیز از Flow خارج شده و اگر ما به یکی از فرزندان آن احتیاج داشته باشیم برای ما قابل مشاهده نمی باشد مگر اینکه عنصر اصلی را برگردانیم.

 

مبحث تکمیلی

شاید به این موضوع فکر کنید که تنها راه برای پنهان کردن عناصر از دیدگان عموم همین دو راه باشد اما باید بگوییم که ممکن است راه های دیگری نیز وجود داشته باشد برای مثال شما می توانید برای پنهان کردن عناصر از خصوصیت Opacity استفاده کنید. (برای مشاهده ی آموزش مورد نظرکلیک کنید)

زمانی که خصوصیت Opacity یک عنصر را بر روی صفر قرار دهیم عنصر مورد نظر ما از دید عموم خارج می شود. به نمونه کد زیر توجه کنید:

کد HTML:

<table border="1px">

<td><h1 class="A" >کلاس A</h1></td>

</table>

<table border class="B">

<td><h1 >کلاس B</h1></td>

</table>

<table border >

<td><h1 class="C">کلاس C</h1></td>

</table>

کد CSS:

table {

margin: 10px;

}

.B {

filter: opacity(0);

}

خروجی کد بالا:

حالت opacity در خصوصیت Filter

 

خلاصه مطلب

  1. از خصوصیت Visibility برای نمایش دادن یا مخفی کردن یک عنصر در وب سایت خود استفاده می کنیم.
  2. خصوصیت Visible به طور پیش فرض بر روی عناصر قرار دارد اما زمانی از این ویژگی استفاده می کنیم که قبل از آن در مکانی از خصوصیت hidden استفاده کرده باشیم.
  3. زمانی که از خصوصیت hidden استفاده می کنیم می خواهیم عنصر یا عناصری را که در صفحه در حال نمایش هستند را مخفی کنیم.
  4. زمانی از خصوصیت Collapse استفاده می کنیم که بخواهیم ستون ها یا سطر یک جدول را مخفی کنیم اما یادتان باشد زمانی که از این خصوصیت استفاده می کنید.
  5. عموما خصوصیت Collapse برای حذف ستون ها یا سطر های جدول استفاده می شود اما در صورتی که از آن برای خصوصیت های دیگر استفاده شود رفتاری مشابه با خصوصیت Hidden خواهد داشت.
  6. توجه داشته باشید که هیچ کدام از نسخه های Internet Explorer از مقدار “inherit” را برای خصوصیت visibility پشتیبانی نمی کنند.
  7. باید بگویم که Flow نوعی حالت رفتاری عناصر می باشد. این حالت به این گونه است که عناصر به صورت زنجیره ای به یکدیگر متصل هستند.
  8. باید بگویم که Flow نوعی حالت رفتاری عناصر می باشد. این حالت به این گونه است که عناصر به صورت زنجیره ای به یکدیگر متصل هستند.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها