0

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);?

chenghuayang
  • 1,424
  • 1
  • 17
  • 35
  • hiding stuff with visibility hidden will still take up space in the dom never seen anything hidden using clip before – Pete Aug 12 '15 at 13:01
  • [These are the ways I have hidden stuff](http://jsfiddle.net/xtoqLjpu/2/) - I usually go for the fixed position as it just pushes the content off the screen whilst not taking up and space in the dom – Pete Aug 12 '15 at 13:10

1 Answers1

4

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.

nulldozer
  • 300
  • 2
  • 7
  • There's no mention (now in 2022) that CSS `clip` is *"deprecated"*: https://developer.mozilla.org/en-US/docs/Web/CSS/clip - although developers *are encouraged* to use `clip-path`. – Roko C. Buljan Aug 01 '22 at 20:43