Thông thường, khi muốn ẩn một phần tử trên giao diện, cách đơn giản nhất mọi người hay dùng là thêm thuộc tính display: none; hoặc opacity: 0;. Tuy nhiên, có một thuộc tính khác ít phổ biến hơn nhưng lại có tác dụng đặc thù trong một vài trường hợp là visibility.

visibility là thuộc tính CSS kiểm soát việc hiển thị của phần tử mà không làm thay đổi bố cục trang web. Đây là điểm khác biệt quan trọng so với display: none.

Các giá trị của visibility và cách hoạt động

• visible: Hiển thị phần tử (mặc định).
• hidden: Ẩn phần tử nhưng vẫn giữ nguyên không gian trên trang.
• collapse: Dùng trong bảng (<table>), ẩn hàng (<tr>) hoặc cột (<col>) mà không để lại khoảng trống.
• initial: Trả về giá trị mặc định của trình duyệt (thường là visible).
• inherit: Kế thừa giá trị visibility từ phần tử cha.

So sánh với các thuộc tính ẩn hiện khác

visibility: hidden:

• Phần tử bị ẩn đi nhưng vẫn chiếm không gian hiển thị
• Không thể click vào được (không tương tác được - không sử dụng được onclick)
• Không làm thay đổi layout của trang

display: none:

• Phần tử biến mất hoàn toàn khỏi trang, không chiếm diện tích
• Không thể tương tác với phần tử
• Làm thay đổi layout của trang

opacity: 0:

• Phần tử trở nên trong suốt nhưng vẫn chiếm diện tích

• Vẫn có thể tương tác với phần tử (có thể nhấn vào được- sử dụng được onclick))

  

Ứng dụng visibility trong thực tế

• Kết hợp với transition để tạo hiệu ứng mượt mà (khác với display không hỗ trợ transition)
• Dùng cho tooltip, popup mà không làm thay đổi vị trí phần tử.
• Tránh làm thay đổi bố cục trang web

Kết luận

🚀Thuộc tính visibility rất hữu ích khi bạn muốn kiểm soát việc hiển thị phần tử mà không phá vỡ bố cục. Hiểu rõ tất cả các giá trị sẽ giúp bạn áp dụng CSS hiệu quả hơn trong thiết kế web!