آموزش طراحی وب

visibility در css

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

visibility

فصل چهارم : Properties در CSS

جلسه بیست و ششم : visibility در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در جلسات گذشته در رابطه با خصوصیت display صحبت کردیم. در این جلسه مشخصه ی visibility رو خدمتتون آموزش میدم.

 

خصوصیت visibility

با استفاده از این خصوصیت شما می تونید عناصر صفحه ی وبتون رو پنهان کنید و یا نمایش بدید. دقیقا همین کار رو با display هم می تونید انجام بدید. تفاوتی که بین display و visibility هست اینه که زمانی که شما از display استفاده می کنید و عنصر رو مخفی می کنید، فضایی رو هم که عنصر اشغال کرده بود برداشته میشه ، انگار که کلا از صفحه حذف شده؛ اما وقتی از visibility استفاده می کنید و عنصر و پنهان می کنید، عنصر پنهان میشه اما فضایی که اشغال کرده بود از بین نمیره انگار که فقط از جلوی دید پنهان شده اما جای خودش رو حفظ کرده.

 

مقادیر خصوصیت visibility

visible : با انتخاب این مقدار ، عنصر مورد نظر نمایان میشه.

hidden : با انتخاب این مقدار ، عنصر مورد نظر پنهان میشه.

Collapse : این مقدار برای المنت های جدول استفاده میشه، زمانی که این مقدار رو برای عناصر جدول انتخاب کنید، tr و یا td مورد نظر رو حذف میکنه و فضای اشغال رو هم از بین میبره دقیقا مثل display:none

 

قاعده دستوری visibility

در مثال زیر ما h2 رو پنهان می کنیم و چون از visibility استفاده کردیم به اندازه ۶۰ پیکسل فضای خالی باقی میمونه و فضا حذف نمیشه فقط محتوای داخل h2 پنهان میشه :

 

پشتیبانی مرورگرها از خصوصیت visibility

تمامی مرورگرها از این خصوصیت پشتیبانی می کنند حتی IE4 ، پس نگران استفاده از این خصوصیت نباشید.

 

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

  • سلام
    جالب بود فقط اگر از این خاصیت استفاده کنیم مثلا برای مخفی کردن برخی نوشته ها یا برچسب ها تاثیری در سئو داره ؟ منظورم اینکه مثلا گوگل رتبه منفی میده ؟
    ممنون

    • سلام دوست عزیز
      فکر نمیکنم تاثیری داشته باشه چون کد html شما سر جای خودش هست فقط از دید کاربر پنهان میشه.
      موفق و پاینده باشید.

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

  • ممنون. همیشه واسم سوال بود دنبالش هم نمیرفتم بدونم فرقشون چیه تا اینکه این آموزش سر راهم قرار گرفت 😀

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین