So I think of properties like:
-
left: -9999px used to retreat from the screen (or the box-model of an element) one or more elements
-
text-indent: -9999px used to indent the screen text (or box-model of an element)
They are used for only a few specific cases, where people want so-called screen readers (accessibility) to work for the visually impaired, of course not always good service from 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 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 position: absolute; , which 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 note how different it was 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>
display: none; will not be accessible and will not take up space either.
Concluding on usage
You can not assert a specific use for left: -9999px; , but the reason is really this, even though the element does not appear on the screen, because it will be out of bounds even if it is accessible, also note that if a% is parent , position: relative; and left of the element you are trying to hide will actually be relative to this top
An example of a "need" we might have would be a tooltip without JavaScript , ie a tooltip with pure CSS , like this:
Note: I personally think that using only parent or just top is good size, both are not necessary
.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 have already seen the use of these techniques, I have seen sites that have been punished, can not say whether Google and Bing will punish a site that uses this, I personally believe that the use will only be punished depending on the form that was applied, I believe that if the page in general has the main content, visible and organized, then an element that needs to be hidden is not motive for this.
There will be people who will affirm with all the letters that any use will have punishment, but the algorithm of google and rules always change, the indexer is very intelligent, it even can detect dynamic pages that are partially generated via some process by JavaScript .
