a11y.css icon indicating copy to clipboard operation
a11y.css copied to clipboard

SVG `<text>` as Data URi to display messages

Open ffoodd opened this issue 5 years ago • 0 comments

While thinking out loud for #404, I imagined something. I'm unsure we can do something like this, but:

  • we can override select background (however it loses its appearance),
  • we can use SVG inlined as data URI as background-image,
  • we can use SVG tag.

So here's the idea implemented in CodePen. This has major drawbacks, though:

  • it'll break select look & feel,
  • it might break layout as well: we need to check what happens in several types of form layouts (inlined, vertically stacked, etc.) and try to contain the overflow in some way (maybe properties like contain or isolation might help),
  • it requires to use string lentgh.

If we give this a shot, it'll need a brand new, dedicated mixin for such cases. And might be extended to other replaced and void elements (needs to deep dive onto testing).

ffoodd avatar Jan 11 '21 10:01 ffoodd