display: none vs opacity: 0 vs visibility: hidden

• `display: none`
• `opacity: 0`
• `visibility: hidden`

#Differences

1. `display: none` doesn't take space when the element is rendered. The other ways still take the space normally.
2. The browser will not response to any events of element which uses either `display: none` or `visibility: hidden`. The `visibility: hidden` style behaves like a combination of `opacity: 0` and `pointer-events: none`.
3. Regarding the accessibility, `opacity: 0` is the only property which makes the element accessible in the tab order, and the element's content can be read by screen readers.
4. Applying `display: none` or `opacity: 0` will effect on child elements. `visibility: hidden`, on the other hand, doesn't change the visibility of any children.
5. It's worth noting that if you want to measure the size of element, then you can't use `display: none` at all.

#Tip

.__web-inspector-hide-shortcut__ {
    visibility: hidden !important;
}

.__web-inspector-hide-shortcut__ * {
    visibility: hidden !important;
}

#Good to know

.overlay {
    opacity: 0.75;
}

.overlay {
    /* For IE 5, 6, 7 */
    filter: alpha(opacity=75);

    /* For IE 8 */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';

    /* For Netscape */
    -moz-opacity: 0.75;

    /* For Safari 1.x */
    -khtml-opacity: 0.75;

    /* Our good friends */
    opacity: 0.75;
}