So I guess properties like:
left: -9999px used to move back from the screen (or from the box-model of an element) one or more elementstext-indent: -9999px used to backward the screen text (or the box-model of an element)
They are used for only in some specific cases, where people wish the so-called screen readers (accessibility) work for the visually impaired, of course there is not always a good service done by the developer in this or simply the intention is to hide something for another reason, for example a logo that uses background-image instead of <img alt="">, this in the case of text-indent
However the most likely use case of left: -9999px is that it is still accessible via TAB, however the "technique" requires the position: absolute;, what makes the space where the element is "seem" to be free, example:
.container {
width: 400px;
height: 200px;
border: 1px #c0c0c0 solid;
}
.hide-left {
position: absolute;
left: -9999px;
top: -9999px;
}
<div class="container">
<p>Hello, Wallace!</p>
<div class="hide-left">
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
</div>
<p>Bye, Wallace!</p>
</div>
Now look how different you turned out with visibility: hidden;
.container {
width: 400px;
height: 200px;
border: 1px #c0c0c0 solid;
}
.hide-visibility {
visibility: hidden;
}
<div class="container">
<p>Hello, Wallace!</p>
<div class="hide-visibility">
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
foo bar foo bar foo bar foo bar<br>
</div>
<p>Bye, Wallace!</p>
</div>
Already the display: none; will not be accessible and will not occupy the space.
Concluding on the use
It is not possible to affirm a specific use for left: -9999px;, but the reason will really be this, although the element does not appear on the screen, because it will be outside the limit yet it will be accessible, also note that if an element parent be with position: relative;, the left and top of the element you are trying to hide will actually be related to this parent
An example of "need" we could have would be tooltip without Javascript, or be a tooltype with CSS pure, thus:
Note: Personally I think only use left or just top be good size, both is not something needed
.tooltip {
text-decoration: underline;
position: relative;
display: inline-block;
}
.tooltip > .tooltip-inner {
position: absolute;
top: -9999px;
width: 100px;
background: rgba(0,0,0,0.7);
color: #fff;
padding: 5px;
border-radius: 2px;
}
.tooltip:hover > .tooltip-inner {
top: 100%;
}
<div>
Mussum Ipsum, cacilds vidis <span class="tooltip">litro <div class="tooltip-inner">Litro é a melhor coisa pra matar a saudade desse grande humorista</div></span> abertis. Pra lá, depois divoltis porris, paradis. Delegadis gente finis, bibendum egestas augue arcu ut est. Suco de cevadiss deixa as pessoas mais interessantis. Viva <span class="tooltip">Forevis <div class="tooltip-inner">É o tempo que esse humorista será lembrado</div></span> aptent taciti sociosqu ad litora torquent.
</div>
SEO vs hidden elements
There are different techniques to hide elements, some believe that Google punishes because of this, which may be very likely, I’ve seen the use of these techniques, I’ve seen websites that have been punished, can’t say if Google and Bing will punish a site that uses this, i personally believe that the use will only be punished depending on the form it has been applied, I believe that if the page in general has the main content, visible and organized, then an element that needs to be hidden will not be reason for this.
There will be people who will state with all the letters that any use will have punishment, but the google algorithm and rules always change, the indexer is very smart, it can even detect dynamic pages that are partially generated via some process by Javascript.
Those articles are kind of old. But, from what I understand, this technique would only be to keep the content accessible to screen readers (Readers screens), since they can not access hidden elements on the page.
– Sam