Why is left: -999999px better than display:none ?

Question

css

When laying out all sorts of tabs and other things, why do they use hide-and-seek behind the screen, and not a non-display?

Answer 1

display: none - you can't smoothly show with one css, unlike left.

Answer 2

This trick was originally intended for screen readers. They do not see the text hidden through display: none, but read it without any problems if it is shifted off the screen.
It is still not customary in our country to pay attention to the accessibility of the site to the blind and other disabled people, but in the West it is almost mandatory.

Answer 3

If display:none, background-image and other images will not be loaded until the element is visible.

Answer 4

Why do you think it's better, and if it's really better, why do most developers use display:none?
I was wrong, today I encountered an interesting feature of the firefox browser (it does not appear on others): In the hidden display: none block, the MatchMedia function returns null, for a block with left: -999999 everything is fine. In particular, I implemented a project where a YouTube video was supposed to be launched after pressing a button and a previously invisible block appeared on the screen. In firefox, in the invisible block, the initialization of the object with the video does not occur and instead of it there is only a black screen (everything is ok in other browsers). Rewriting the styles from display:none to left:-99999 solved the problem. Also similar is described here stackoverflow.com/questions/12056313/matchmedia-re..., therefore, in rare cases, a hack with left has the right to be, but only in rare cases.

Answer 5

left is useful when an element needs to have multiple positions depending on something (original idea, window size, etc.)

Answer 6

When using display:none in fluid layout, it will be more difficult to get the size of hidden images through js.

Answer 7

For various reasons, so offhand and do not remember. But I can throw another way with visibility. Also sometimes useful (and sometimes necessary for some browsers).