How to hide

When is display: none, and when is visibility: hidden?

It depends on what you are trying to do. There are other options like hiding a block and even a special attribute.

If you have to hide something, the best thing is to remove it altogether: the site is easier, the code is cleaner ... there are fewer errors! But if you need it to hide there for some time, and then someone come in handy - that is another matter. It is important not to make a mistake with the choice of the method.

The simplest and most popular is display: none, it works like an ax: the element seems to be cut down from HTML. It is not visible on the page and the neighboring blocks do not know anything about it. Just not all. It even screen readers igorirut and do not read the contents - be careful with this.

/*  */ .cut-down { display: none; } 

What is interesting, despite the complete cutting down of the element, browsers still load the image from img with display: none. If the image is indicated by the background, then Chrome and Edge also load it, but Firefox and Safari do not. Well, they have different views on the optimization of loading, what to do.

Another way is visibility: hidden, it works like a one-man ring: an element like this and neighboring blocks feel it, but it is not visible. And how does this differ from opacity: 0? Opacity simply makes the element transparent (or translucent), and visibility: hidden still does not allow to interact with it: direct, click, focus.

 /*  */ .one-ring { visibility: hidden; } /*   */ .one-ring:hover { visibility: visible; } 

Visibility: hidden has another nice feature: the property is inherited, which means the child of an invisible parent can change its visibility to visible. Such a trick will not work with either display: none or opacity: 0. It is convenient to make pop-up menus and tricks with it.

Sometimes it is necessary that the element does not interfere with the design, but at the same time it does not hide from screen readers, remaining a part of the contents. Well, the designer did not draw the title here, but according to the logic of the document, he is needed here. Here something to us like display: hidden or visibility: none! This I just came up with, they do not exist in nature.

Recently, a box-suppress property with show, discard and hide values ​​appeared in the third-level CSS Display draft. It decouples the visibility of the block from the display - after all, on the reverse side of the none is not only the block, but also inline, flex, grid. The discard value habitually cuts an element, and hide does the magic combo itself. Read more with Rachel Andrew.

 /* ,   */ .combo { box-suppress: hide; } 

Unfortunately, before the box-suppress we have a long time to wait. It is not only not yet in browsers, but already in that draft - it was recently transferred to the next level in order to finish the current one in time. So you have to do the magic yourself - watch your hands.

There is a “visually hidden” or “visually hidden” pattern to hide elements from the design, but keep their contents available. Read about other nuances with screen readers with Tim Wright. How it works: you make a universal utility class and add it to the elements that you need to hide. Usually it is called: visually-hidden, with a hyphen.

 <h2 class=" visually-hidden">   ,   </h2> 

If you look inside, then this is the usual position: absolute plus clip, which cuts the element down to zero. That is, it does not affect the neighbors and becomes invisible. All other properties add versatility and cross-browser compatibility so that a class can slap on any element without looking. Read more in the help to ally.js Rodney Reim.

 .visually-hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; … } 

Did you know that you can add a hidden attribute to any element and it will disappear? Now you know! In modern browsers, the same display: none is dropped on this attribute, which cuts an element. It is binary as required or checked, so it is convenient to expose it via JavaScript. Just do not forget to add to the styles [hidden] {display: none} for IE 10, Safari 5 and other old browsers.

 <div hidden>  </div> // JS div.hidden = true; 

This is almost all you need to know about hide-and-seek in CSS. Try these methods, they are all good in different situations. The main thing is not to chop off the shoulder and think about the available content.

Video version

Questions can be asked here.