CSS SNIPPET

  返回

隐藏元素的离屏渲染法  页面布局视觉效果

完全隐藏元素但依然允许屏幕阅读器和JavaScript读取的安全的方法。 这个方法非常有助于存在视觉障碍用户需要更多上下文时的可访问性(ADA) 开发。可以替代display: none ,因为它不能被屏幕阅读器读取。 也可以替代visibility: hidden 因为它占用DOM的物理空间。

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;
}
效果演示
代码说明
  1. 删除所有的边框。
  2. 使用clip 声明元素没有需要显示的部分。
  3. 设置元素的高度和宽度为1px。
  4. 使用margin: -1px负向调整元素的宽度和高度。
  5. 隐藏元素的溢出。
  6. 删除所有内边距。
  7. 绝对定位元素使其不占用DOM的物理空间。
浏览器支持

100.0%

(虽然技术上而言 clip已经被弃用,但新的 clip-path 目前还只有非常有限的浏览器支持。)