Gotta Select’em All

Celý článek

I suspect it is not highly known that CSS can control how text is selected. You can do user-select: none; to prevent some text from being selected. That's probably not terribly good UX in general, but perhaps you use some period (.) characters as decoration or something, I could see preventing those from being selected.

The exact opposite is user-select: all; which forces all the text to be selected in an element. Again, probably somewhat iffy UX. Forcing someone to select all the text is fairly rare on the web and to actively prevent someone from selecting a part of it feels like it's trying too hard to be helpful to the point that it's actually hurting.

Anyway, here's Dag Frode Solberg with more detail.

I forked his demo here to show off a simple scenario where click-to-select might make some level of sense:

See the Pen
css/user-select/4 by Chris Coyier (@chriscoyier)
on CodePen.

If you wanted to implement a situation where you click once to highlight all then stop interfering, you could do that in JavaScript with an click handler than removes itself after the first click.

const cells = document.querySelectorAll("td");

function highlight(event) {
  window.getSelection()
    .selectAllChildren(
      event.target
    );
  event.target.removeEventListener("click", highlight);
}

cells.forEach(cell => {
  cell.addEventListener("click", highlight);
});

Direct Link to Article — Permalink

The post Gotta Select’em All appeared first on CSS-Tricks.