We have many CSS properties, and mastering all can be a challenge. CSS visibility is one of the important properties that you should master if you want to become a skilled web developer.
In this article, I will define CSS Visibility, explain its importance, and list and explain the different CSS visibility values.
What is CSS Visibility?
CSS visibility property hides or shows an element in a web page. For instance, you can have four boxes on your web page and use the visibility property to determine how they will be displayed. All the elements will appear on the page if you set the visibility as visible.
However, if the element is hidden, it will still occupy space but will be hidden from the end browser/ screen.
CSS Visibility is important in the following cases;
Visibility control: You can control what should be displayed based on the current user. You can set the visibility of an element to be only visible when a user triggers it using a certain action. For instance, a hover or clicking a button.
Layout preservation: A good application should preserve its layout and contents irrespective of the screen size. When you set the visibility of an element as hidden, it will still occupy space but will not be visible to the end users. Such an approach makes it possible to maintain a consistent layout.
Optimize performance: The browser does not need to keep on recalculating the layout when the visibility property is set as visibility:hidden. However, when you use the display:none property, the browser needs to recalculate the layout whenever you decide to show the element again.
Create dynamic and interactive UI: You can combine CSS visibility property with other properties, such as opacity, to create fade effects, animations, and smooth transitions.
Different CSS visibility values
CSS visibility has five possible values. I will go into detail through code blocks and screenshots. If you intend to follow along,
Create a folder on your local machine.
Add two files; index.html and styles.css.
Open the project in your favourite code editor (I am using VS Code)
You can use this command;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
The next is to connect index.html and styles.css files. On the <head> section of the index.html file, add this;
<link rel="stylesheet" href="styles.css">
You should now have something similar to this on your code editor;
When you set the value of an element as visibility: visible, it will appear on the web page. This visibility is there by default. We can have three boxes in our HTML document to understand this concept better. In the <body> section of your index.html, add the following;
When you re-render the page, you will note we only have two boxes, one and two.
If you are keen, you will note that our .container element has reduced size. When you use the display: none property, Box 3 is not rendered, and its space on our browser becomes vacant for other boxes to occupy.
When we apply the visibility: hidden CSS property on an element, it will be hidden from the end user. However, it will still occupy space. For instance, we can hide Box2 using this property.
To achieve this, modify the Box2 CSS code as follows;
If we render our page, we will have two boxes side by side;
The display: none demo
Add this to .box1 class;
When you render the page, you will note that .box1 will no longer be displayed. The second box (black) also moves to the left to occupy the space previously occupied by the lightblue box.
The visibility: hidden demo
Instead of display: none, add this .box1 class;
This property leaves some space for box1 but does not display it. On the other hand, box2 remains in its place.
Removes an element from the web page entirely
Hides an HTML element but still takes up space on the web page
You can style an element whose display is set to none
You can position and style an element whose visibility is hidden
Not accessible by screen readers
You can access an element whose visibility is set as hidden using screen readers
Improve Accessibility with CSS Visibility
You can use CSS visibility to hide elements that are not important to all users. For instance, you can use this feature to hide a login user that will only be available to users who are not logged in. You can also have a sidebar or a footer containing terms of service or copyright information.
We can have this code to illustrate how you can improve visibility;
The login form only becomes visible when you hover over the first item.
We believe you can now comfortably use the CSS visibility property in your code to make smooth transitions and improve the accessibility of your web pages. However, you must know where to use every visibility value to avoid ending up with clanky pages. You may also hide crucial data from the end users when you misuse the CSS visibility property.
Python is a very versatile language, and Python developers often have to work with a variety of files and get information stored in them for processing. One popular file format you’re bound to encounter as a Python developer is the Portable Document Format popularly known as PDF