Which is the better way to visually hide things, clip: rect(0, 0, 0, 0) or visibility: hidden?

Question

Recently, I saw some tricks on hiding things. What I'm curious about is what's the difference between clip: rect(0, 0, 0, 0); and visibility: hidden;, while both can hide things and remain the space in the same time.

Also, is there any difference between using clip: rect(0, 0, 0, 0); and clip: rect(1px, 1px, 1px, 1px);?

Answer 1

Visually, a clipped element is collapsed, just like an element with display: none is. visibility: hidden on the other hand reserves the space the element would normally use.

In other words, comparing clip and visibility is very much apples to oranges, you should be comparing clip and display.

I guess one reason to use one or the other is accessibility:

• visibility: hidden hides content from screenreaders.

• display: none hides content from screenreaders.

• clip: rect(0,0,0,0); position: absolute keeps content visible to screenreaders.

Compatibility: MDN marks clip as deprecated, with clip-path being the newer replacement.