现在该剪辑已被弃用，可以隐藏内容？

Question

目前我正在使用以下代码来隐藏内容。但是，根据MDN，剪辑属性已弃用，将被删除。

double

现在可以隐藏内容的最佳做法是什么？

Answer 1

您可以将clip-path与正确的供应商前缀一起使用，并使用clip作为后备，因为目前所有浏览器都不支持clip-path，如Can I Use所示

CSS看起来像这样：

.offscreen {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px,1px,1px,1px);
  clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
  overflow: hidden!important;
}

我还为see it in action添加了一个codepen。

Answer 2

opacity: 0
height: 0
height: 0;

如果您不希望元素从屏幕阅读器中消失，

将会起作用。

您可能还必须使用

margin: 0;
padding: 0;

防止间距错误。

在Matt's answer中看到caniuse，不透明度将always work :P

Answer 3

在您的CSS块中，添加clip-path: inset(50%);（在clip之后）。