Yogesh Chauhan's Blog

What’s the difference between visibility: hidden and display: none?

in CSS on July 25, 2021

display-none

The display property tells browser if the element should be displayed or not.

When the display property is set as none, it tells browser not to display the element.

When you do that, the element won’t exist in the display area at all.

The space won’t be allocated and other elements will be shifted in the place for that element.

display:none behaves like the element is not there and displays the rest of the page. That is called destroying the rendering state of the element.

visibility: hidden

The visibility property tells browser if the element should be visible or not.

When the visibility property is set as hidden, the element takes its place in the view but it’s just not visible on the screen.

Basically, visibility: hidden hides the elements but keep the element’s rendering state.

You can also click on the element if it’s a link even if the visibility is hidden.

You can update the rendering state of the element while it’s hidden.

Example

A mixed solution for better rendering

content-visibility: hidden is a better solution if you’re looking for a solution to improve a page speed by hiding elements temporarily.

content-visibility: hidden hides the element but keeps the rendering state. So, even if you make changes, the changes will be applied when the element is shown again.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Introduction to components and templates Part 3: Data bindingAngularHow to create a sticky menu pin using CSS?CSSGlobal JavaScript methods to convert variables to numbersJavaScriptWhat is the difference between let and var in Swift?SwiftHow to create and store JSON objects in localStorage using JavaScript?JavaScriptDynamically generate names in SCSS (animation example)SCSS