Visually hiding content and the clip-path pattern

[renestalder]

The current pattern to visually hide content we have in the guide moves elements outside the viewport (by assuming the viewport isn't bigger than the statically defined pixel size).

The two issues often mentioned with that patterns are:

• It might create issues with right to left languages.
• Probably rare, but it doesn't react to technological changes, e.g. bigger screen sizes.

The alternative pattern I often see recommended is the clip-path pattern:

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

or with a focus handler:

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

Does it make sense to leave the positioning pattern in the guide when other resources recommend the clip-path pattern? Should we probably apply the same pattern?

[backflip]

Related: #234

[jmuheim]

I'm using this for over a year now, and it seems to work nicely:

https://css-tricks.com/inclusively-hidden/