Description
This idea was added to the OpenUI explainer recently, as the result of a great discussion with developers at CSS Day. This is primarily a way to provide developers more options for touchscreen users, but it also seems to be a useful idea on its own, even for non-touchscreen interfaces.
The idea is that any element with interestfor
can spawn a pseudo element (nominally called ::interest-hint
) which is a button that comes after the interest invoker in layout order. Tapping (note: tapping, not hovering) that pseudo element button will trigger interest in the originating element. The typical appearance is something like the (i) icon in this screenshot:
This pseudo element could be used on its own to always generate such an icon. In that case, hovering, focusing, or long-pressing the originating element will trigger interest, but so, too, will clicking/tapping the (i) icon.
If "option 3" emerges as the final touchscreen solution (which seems the most likely outcome to me at this point, given all of the discussion), then this new ::interest-hint
pseudo could be used to make some/all interest invokers easier to invoke for touchscreens only, via:
@media (any-pointer: coarse) {
/* On touch devices, show the extra pseudo element button */
.my-link::interest-hint {
content: '' / 'profile preview';
background-image: url('icon.png');
}
}
In that scenario (option 3 plus ::interest-hint
), the user can still long-press the originating element itself and choose "view more info" from the context menu, or they can just tap the (i) icon to go directly to showing interest. However, for developers who would prefer less "clutter" in their UI, they do not have to use ::interest-hint
and their users will still have access to the content via the context menu.
Open questions that I can think of:
- Is this a good idea?
- What should the pseudo element be called?
- It should be a tree-abiding pseudo element, correct?
- Where does it live in the layout tree, relative to e.g.
::after
and others? - Should there be a way to put it before the originating element also?
- Should hovering, focusing, or long-pressing the pseudo element also show interest in the originating element? (Seems a bit confusing to me, but maybe?)