CSS visibility Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The visibility property in CSS is used to control the visibility of an element. Unlike the display property, which removes the element from the document flow, the visibility property hides an element but still maintains its allocated space on the page. This can be useful in situations where you want to hide an element without causing layout changes.

💡 Syntax

The syntax for the visibility property is straightforward. It can be applied to any HTML element.

Syntax

Copied

element {
  visibility: value;
}

Here, value can be one of several predefined keywords.

🎛️ Default Value

The default value of the visibility property is visible, meaning the element is visible by default.

🏠 Property Values

Value	Description
visible	The element is visible (default).
hidden	The element is hidden, but still takes up space in the layout.
collapse	For table rows, columns, and groups, the element is hidden and the space it would have occupied is removed (not supported in all browsers).
inherit	The element inherits the `visibility` property from its parent.

📄 Example

In this example, we'll use the visibility property to hide a paragraph.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS visibility Example</title>
  <style>
    .hidden-paragraph {
      visibility: hidden;
    }
  </style>
</head>
<body>
  <h1>Visibility Property Example</h1>
  <p>This paragraph is visible.</p>
  <p class="hidden-paragraph">This paragraph is hidden but still takes up space.</p>
</body>
</html>

🖥️ Browser Compatibility

The visibility property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. There should be no issues with using this property in your web projects, but as always, testing across different browsers is recommended to ensure compatibility.

🎉 Conclusion

The visibility property is a useful tool for controlling the visibility of elements on a web page without removing them from the document flow.

By understanding and using this property, you can create more dynamic and responsive layouts that maintain their structure even when certain elements are hidden. Experiment with the different values of the visibility property to see how they can be applied to your web designs.