Why do visually hidden CSS classes define a size of 1x1?
Written by Stefan Judis
- Published at
- Updated at
- Reading time
- 1min
Did you ever wonder why visually-hidden or sr-only classes have the dimensions of 1 by 1 pixel?
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
/* Why this 👇? */
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
Well, Manuel Matuzović investigated this topic and it's because of Safari. Safari isn't able to focus zero-size elements.
That's a nice little fun fact! 😅 Thanks Manuel!
If you enjoyed this article...
Join 5.5k readers and learn something new every week with Web Weekly.
Reply to this post and share your thoughts via good old email.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.