I’ve recently been working on the draft of a new CSS specification:
One of the features specified there is the user-select property.
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 user-select: none,
and occasionally about user-select: element.
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 user-select support
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 invoice number,
a coupon code,
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?
While working on the CSS directional navigation properties,
the question of how to activate spacial navigation has come up a few times,
so I thought I’d just put it out there to have something to point to.
While this is a common feature in TV browsers or feature phone browsers,
it is less well known that several desktop browsers
(and desktop emulators of non-desktop browsers) support spatial navigation.
This allows the user to move the focus between elements of the web page
in 2D, which is often more convenient that the linear keyboard navigation
enabled by the Tab key.
The aforementioned directional navigation properties
give the author extra control over how this works.
You can read more about it
in this article by Daniel Davis.
But even if the author does nothing, spatial navigation is still a big usability boost for keyboard users.
Here is a list of browsers that support spatial navigation,
and how to turn it on in each of them:
The Blink based browsers come with spatial navigation built-in, but turned off by default.
Launch from the command-line with the --enable-spatial-navigation argument to activate it
(on OS X, use open path/to/browser.app --args --enable-spatial-navigation),
then use the arrow keys.
This does not include support for the directional navigation properties.
Vivaldi is a new feature rich browser,
that aims to become the spiritual heir to what Opera used to be
before the switch to Blink and the UI rewrite.
It is the only actively developed desktop browser I know of
to offer spatial navigation out of the box.
As in Opera, hold down the Shift key and press the arrow keys.
At the time of writing, this is still very fragile,
and does not include support for the directional navigation properties.
Being based on Presto,
this works well and includes support for the directional navigation properties.
Use the arrow keys.
Alternatively, you can connect to a simulated remote control on http://localhost:5555
(See the Opera TV Emulator User Guide for details).
If you know of other browsers running on desktop and supporting spatnav,
and I’ll update this post.