آموزش قابلیت مشاهده در CSS به زبان ساده

ویژگی visibility مشخص می کند که یک عنصر قابل مشاهده باشد یا پنهان.

کنترل قابلیت مشاهده عناصر

می توانید از ویژگی visibility برای کنترل اینکه یک عنصر قابلیت مشاهده داشته یا خیر، استفاده کنید. این ویژگی می تواند یکی از مقادیر جدول زیر را داشته باشد:

قانون ;visibility: collapse، اگرچه عناصر جدول داخلی را حذف می کند، اما به هیچ وجه روی طرح جدول تأثیر نمی گذارد. به صورت نرمال، فضایی توسط عناصر پر خواهد شد.

توجه: اگر قانون سبک ;visibility: collapse، به جای عناصر جدول برای سایر عناصر مشخص شود همان نتیجه مقدار hidden را نشان می دهد.

مقایسه Visibility و Displayدر CSS

به نظر می رسد، ویژگی های display و visibility در CSS مشابه هستند، اما در واقع آنها کاملاً متفاوت هستند و اغلب توسعه دهندگان وب تازه کار را به اشتباه می اندازند.

• ;visibility: hidden عنصر را پنهان می کند، اما هنوز هم فضای خود را در طرح صفحه اشغال می کند. عنصر فرزند یک عنصر پنهان، قابل مشاهده خواهد بود، اگر ویژگی visibility آن برابر با visibile تنظیم شده باشد.
• ;display: none عنصر را نمایش نمی دهد و آن را کاملاً از سند حذف می کند. هیچ فضایی را اشغال نمی کند، حتی اگر کد منبع آن در سند HTML همچنان موجود باشد. تمام عناصر فرزند نیز قابلت نمایش خود را از دست می دهند، حتی اگر ویژگی display آنها مقدار دیگری تنظیم شده باشد.

نکات پیشرفقته: 

۱. تاثیر بر دسترس‌پذیری (Accessibility) و صفحه‌خوان‌ها

وقتی از مقدار visibility: hidden برای یک عنصر استفاده می‌کنید، آن عنصر نه تنها از دید کاربران عادی مخفی می‌شود، بلکه از دسترس صفحه‌خوان‌ها (Screen Readers) که توسط کاربران نابینا یا کم‌بینا استفاده می‌شوند نیز کاملاً خارج می‌گردد. این رفتار دقیقاً مشابه display: none است. اگر می‌خواهید عنصری از نظر بصری پنهان باشد اما همچنان برای صفحه‌خوان‌ها قابل خواندن باقی بماند، نباید از این دو ویژگی استفاده کنید و تکنیک‌های دیگری (مانند خارج کردن عنصر از کادر صفحه) نیاز است.

۲. تعامل با کاربر (رویدادهای کلیک و هاور)

یکی از نکات بسیار مهمی که برنامه‌نویسان تازه‌کار فراموش می‌کنند، نحوه تعامل با عناصر پنهان است. وقتی عنصری visibility: hidden دارد:

• نمی‌توان با آن تعامل داشت: کاربر نمی‌تواند روی آن کلیک کند، متن آن را انتخاب کند یا ماوس را روی آن ببرد (Hover).

• رویدادهای جاوا اسکریپت: رویدادهایی مثل onclick روی این عناصر عمل نخواهند کرد، زیرا مرورگر فرض می‌کند عنصری برای تعامل وجود ندارد (هرچند فضای آن در صفحه خالی مانده است).

۳. مقایسه با ویژگی Opacity (شفافیت)

علاوه بر display، ویژگی دیگری به نام opacity (شفافیت) نیز وجود دارد که اغلب با visibility اشتباه گرفته می‌شود. تفاوت این دو بسیار کلیدی است:

• visibility: hidden: عنصر نامرئی می‌شود، فضا را اشغال می‌کند، اما قابل کلیک نیست و توسط صفحه‌خوان‌ها نادیده گرفته می‌شود.

• opacity: 0: عنصر کاملاً شفاف (شیشه‌ای و نامرئی) می‌شود، فضا را اشغال می‌کند، اما همچنان قابل کلیک و تعامل است و صفحه‌خوان‌ها نیز آن را می‌خوانند.

۴. انیمیشن‌ها و ترانزیشن‌ها (Transitions)

ویژگی display: none را نمی‌توان انیمیشن‌سازی کرد (عنصر به صورت صفر و یک، یا هست یا نیست). اما ویژگی visibility از ترانزیشن‌های CSS پشتیبانی می‌کند. طراحان وب حرفه‌ای برای ایجاد افکت محو شدن نرم (Fade in/out) یک منو یا پنجره پاپ‌آپ، معمولاً ویژگی visibility را با opacity ترکیب می‌کنند: بدین شکل که عنصر به نرمی شفافیتش صفر می‌شود (opacity: 0) و سپس در پایان انیمیشن، وضعیت آن به visibility: hidden تغییر می‌کند تا دیگر قابل کلیک نباشد.

نتیجه‌گیری

ویژگی visibility در CSS ابزاری کارآمد و در عین حال ظریف برای مدیریت نمایش یا پنهان‌سازی عناصر وب است. برخلاف display: none که عنصر را به کلی از جریان صفحه محو می‌کند و فضا را از بین می‌برد، visibility: hidden به شما اجازه می‌دهد طرح‌بندی (Layout) صفحه خود را حفظ کنید و در عین حال المان‌ها را مخفی نگه دارید.

با در نظر گرفتن تفاوت‌های کلیدی این ویژگی با ابزارهایی مانند display، opacity و تأثیر آن‌ها بر تعاملات کاربر و دسترس‌پذیری (Accessibility)، می‌توانید تصمیم بگیرید که در هر سناریو از کدام روش استفاده کنید تا کدی بهینه‌تر، استانداردتر و حرفه‌ای‌تر داشته باشید.