What is CSS Offscreen, and how can I implement it?
An element can be totally hidden (visually and positionally) in the DOM with CSS Offscreen while maintaining accessibility. Remove all padding and borders, then cover the overflow of the element. To specify that no portion of the element is shown, use clip. We can also explain it to be a bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility when more context is needed for visually-impaired users. As an alternative to display: none
which is not readable by screen readers or visibility: hidden
which takes up physical space in the DOM.
Code Sample
HTML
<a class="button" href="http://pantswebsite.com">
Learn More <span class="offscreen"> about pants</span>
</a>
CSS
.offscreen {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Detailed explanation to the code sample above
Remove all borders.
Use
clip
to indicate that no part of the element should be shown.Make the
height
andwidth
of the element1px
.Negate the element's height and width using
margin: -1px
.Hide the element's overflow.
Remove all padding.
Position the element absolutely so that it does not take up space in the DOM.
Output
Note: Although clip
technically has been depreciated, the newer clip-path
currently has very limited browser support.
Thanks for reading...
Happy Coding!