• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

نکاتی کاربردی در مورد CSS (جلسه 2) : مقدار collapse برای ویژگی visibility

0 338 ۱۶ آذر ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم.
css-style

ویژگی visibility میتونه مقدار collapse رو بگیره

شما به احتمال زیاد تا بحال هزاران بار از ویژگی visibility استفاده کردید. متداولترین مقادیری که برای این ویژگی قرار داده میشه، یکی visible هست که مقدار پیش فرض برای همه المنتها هست و دیگری هم hidden هست. فرقی که visibility: hidden با display: none داره اینه که در حالت display: none، علاوه بر اینکه المنت مورد نظر مخفی میشه، جایی که اون المنت میگیره هم از بین میره و خالی نمیمونه. اما زمانی که از visibility: hidden استفاده میشه، اون المنت مخفی میشه ولی جایی که قبلا گرفته بود رو همچنان در اختیار داره.

مقدار سومی که به ندرت برای این ویژگی قرار داده میشه، collapse هست. این مقدار عکس العملی شبیه به hidden برای همه المنتها داره و هیچ فرقی با هم نمیکنن. اما این ویژگی زمانی که برای ردیفهای جدول، ردیفهای گروهی جدول، ستونهای جدول و ستونهای گروهی جدول مورد استفاده قرار بگیره، رفتار دیگه ای از خودش نشون میده که دونستن اون میتونه بدردتون بخوره. در زمانی که از این مقدار برای موارد جدولی یا Table استفاده میکنید، رفتارش شبیه به display: none میشه و باعث میشه که جایی رو که قبلا این المنت اشغال میکرده، توسط دیگر المنتها اشغال بشه.

متاسفانه همه مرورگرها با این ویژگی سازگاری ندارن. نمونه یا دموی زیر رو ببینید:

See the Pen visibility: collapse by SitePoint (@SitePoint) on CodePen.

برای اطلاعات بیشتر در مورد ویژگی visibility میتونین به این لینک از سایت css-tricks هم مراجعه کنید. تا جایی که من مشاهده کردم:

  • درون مرورگر کروم فرقی نمیکنه که شما از مقدار collapse یا hidden استفاده کنید و هر دو یک رفتار رو دارن. برای مشاهده این مشکل و Bug میتونین اینجا رو ببینید.
  • درون مرورگرهای Firefox و Opera و IE11، مقدار collapse تقریبا بصورت کامل پشتیبانی میشه و رفتاری که ازش انتظار میره رو نشون میده. زمانی که این ویژگی رو اعمال میکنید، یکی از ردیفها مخفی میشه و ردیفهای بعدی جای اون رو میگیرن و بالا میان.

با این تفاسیر مثلا اگر شما الان درون مرورگر Firefox باشید و در دموی قرار داده شده در بالا Hide Row رو بزنید، اون ردیف فقط مخفی میشه و ردیفهای بعدی جای اون رو نمیگیرن. اگر دکمه Collapse Row رو بزنید اون ردیف مخفی میشه و بقیه المنتها جای اون رو میگیرن. با زدن دکمه Reset هم همه چیز به حالت اولیه برمیگرده.

شاید خیلی از این ویژگی استفاده نشه ولی خواستیم کاربردشو به شما نشون بدیم. شاید روزی به دردتون بخوره.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram