Visibility در CSS

سلام!

از اونجایی که آموزش های css پایه خیلی زیاد هستن ، تصمیم گرفتم اول از پیشرفته شرو کنم و بعد از اینکه تموم شد یه فکری به حال CSS پایه کنم 🙂

یک ویژگی به نام visibility به شما این اجازه رو میده که یک المنت رو پنهان کنین . شما میتونین این ویژگی رو با جاوااسکریپت ترکیب کنین تا منو های پیچیده یا طرح های پیچیده دیگه ای بسازین .

ممکنه شما از visibility برای پنهان کردن ارور ها استفاده کنین و فقط زمانی اون ها رو نمایش بدین که کاربر باید اون ها رو ببینه ، یا پاسخ های یک کوییز رو پنهان کنین تا وقتی کاربر یک گزینه رو انتخاب کنه .

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

visibility یکی از مقدار هایی که توی جدول زیر هست رو میگیره :

مقدار توضیحات
visible المنت و محتویات آن به کاربر نمایش داده می شود.
hidden المنت و محتویاتش پنهان میشوند ، اگرچه هنوز بر روی طرح کلی صفحه تاثیر میگذارند.
collapse معمولا برای جدول ها استفاده میشود ولی بر خلاف hidden فضای خالی نمایش نمیدهد. در بقیه جا ها مانند hidden عمل میکند.

مثال :

<html> <head> </head> <body> <p> این پاراگراف به صورت عادی نمایش داده می شود. </p> <p style="visibility:hidden;"> این پاراگراف نباید نمایش داده شود. </p> </body> </html>

که فقط اولین پاراگراف در صفحه مشاهده خواهد شد.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *