Hiding content accessibly now that clip is deprecated?

Question

At the moment I'm using the following code to hide content accessibly. However, according to MDN the clip property is deprecated and will be removed.

  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

What is best practice to hide content accessibly now?

Answer 1

In your CSS block, add clip-path: inset(50%); (after clip).

Answer 2

You can use clip-path with proper vendor prefixes, along with clip as the fallback, because clip-path is not supported in all browsers at this time as shown in Can I Use.

The CSS would look something like this:

.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;
}

I've also added a codepen for you to see it in action.