clip: rect(0,0,0,0)和visibility: hidden哪一种是更好的视觉隐藏方式?

Question

最近，我看到了一些隐藏东西的技巧。我好奇的是clip: rect(0, 0, 0, 0);和visibility: hidden;有什么区别，两者都可以隐藏东西，同时保持空间。

另外，使用clip: rect(0, 0, 0, 0);和clip: rect(1px, 1px, 1px, 1px);有什么区别吗?

Answer 1

从视觉上看，clip的元素是折叠的，就像display: none的元素一样。另一方面，visibility: hidden保留元素通常使用的空间。

换句话说，比较clip和visibility就像比较苹果和橘子，你应该比较clip和display。

我想使用其中一个或另一个的原因是可访问性:

• visibility: hidden从屏幕阅读器中隐藏内容

• display: none从屏幕阅读器中隐藏内容

• clip: rect(0,0,0,0); position: absolute使内容对屏幕阅读器可见。

Compatibility: MDN将clip标记为已弃用，clip-path是较新的替代品。