Difference Between Visibility:Hidden and Display:None

What is the difference between visibility:hidden and display:none?

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

css - What's difference between display:none; and visibility:hidden;?

Display:none hides the element from the page, and the space it would take up on the page can be used by other elements. visibility:hidden hides the elements, but it continues to consume the space it normally would.

What is the difference between visibility: hidden and transform: scale(0,0)?

If you set the visibility of an element to hidden it is hidden but still takes up space.

If you set the visiblity to collapse it will not take up space and will behave the same as display:none. But collapse can only be used on table elements.

transform: scale(0,0) will just set the size to 0,0 meaning css properties like float or clear will still take affect on other elements.

CSS `display:none` effect on DOM

display: none; will just hide the element, but all the listener events will still be there. It won't be removed from the DOM.
But the difference between visibility: hidden and display: none is that, in first case, the tag and content inside will be rendered, whereas in second case the tag won't be rendered.

visibility: hidden;

div tag is rendered and affecting document flow

display: none;

div not rendered

Which one is best optimized code display:none or visibility:hidden as per the performance?

visibility:hidden would be the more efficient as it does not change the flow of the DOM, reducing the amount of redraws.

Switching an element's display property would cause greater redrawing as space isn't allocated for the element. This would occur most with stacked elements.

visibility:hidden vs display:none vs opacity:0

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

Why use style.visibility='hidden' in place of style.display='none'

Some times the layout may be disturbed by adding and removing the element, maybe this is the situation when you can use visibility option. If you don't want your layout to be changed after hiding the element you should use visibility: hidden; otherwise use display: none;.

What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?

The key difference seems to be that hidden elements are always hidden regardless of the presentation:

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Since CSS can target different media/presentation types, display: none will be dependent on a given presentation. E.g. some elements might have display: none when viewed in a desktop browser, but not a mobile browser. Or, be hidden visually but still available to a screen-reader.

---

Related Topics