I’ve recently been working on the draft of a new CSS specification:
One of the features specified there is the
This isn’t really a new feature:
it first appeared in User Interface for CSS3 back in 1999,
before being rejected and therefore not included it the specification that replaced it, CSS-UI-3.
However, despite the initial rejection, browser vendors have experimented with it, and over the years, it has found a public. There are still many interoperability problems, but hopefully the specification will help resolve them.
Quite a few people have written about this property,
usually to speak about
and occasionally about
Here is a
good and recent article
(Update: the domain has expired redirects to some spam, so I’ve removed the link)
by Alex Muir
written in celebration of
reaching 90% of browsers according to caniuse.com.
I’d like to introduce a lesser-known ability of this property
that is a small but easy win for usability:
After applying it to a piece of content,
if a user tries to select any part of that content,
all of it will be selected.
What is that good for? Assume you have a piece of content in your document which is mainly used by being copy and pasted around, and needs to be kept in one piece. Typical examples could be an ID, an invoice number, a coupon code, a checksum…
If you do nothing,
occasionally users trying to select it for copy and pasting will aim poorly,
and for example start their selection on the second character of the string,
rather than the first.
You can make their life easier by using
Here’s an example:
Unfortunately, this currently only works in Firefox and Safari, but since it causes no harm to users of other browsers, why not include it anyway?