Re: Haptics CSS extension proposal

Chris Nager:

> Read it here: http://chrisnager.com/touchable-textures-with-css-can-you-feel-me/

Like the rest, I think this is premature, but haptic design should be added to CSS in the mid-term.

>     texture: smooth;

That’s what tactile properties should look like (at first), i.e. use keywords.

> Possible texture properties (most ranging from 0 to 1, similar to opacity)

Dimension-less <alpha> was a mistake, such values should always be expressed as <percentage>.

>     texture-temperature: cool | warm | 77°F | 25°C;
>     texture-adhesion: 0.15;
>     texture-hardness: 1;
>     texture-roughness: 0.3;
>     texture-malleability: 0.6;
>     texture-viscosity: 0.75;
>     texture-density: 0.3;

This kind of detail (except ‘cool’ and ‘warm’) should wait until level 2.
I’ve seen easier keywords being shot down for ease-of-spelling reasons, so “malleability” won’t fly. Also, the degrees sign won’t work, sadly, because it’s missing from some popular keyboard layouts and, being at U+00B0, is not part of US-ASCII.

>     texture: temperature(25°C) adhesion(0.75) roughness(0.4);

With keywords you wouldn’t need to introduce a billion and one new pseudo-functions.

  texture: warm sticky smooth;

> @texture grippy {
>     texture: adhesion(1) roughness(0.5);
> }

This should also wait for level 2 and it should use mutltiple descriptors, not shorthands.

> texture: smooth | course | grainy | sharp | raised | bumpy | sticky | fabric | glass | metallic | rubbery | depressed | detect* | inherit;
> 
> *detect would choose the best texture based on the look of the element.

Some of these relate to sub-properties, e.g. ‘smooth’ to ‘texture-roughness’, while others seem like more generic shorthands, e.g. ‘glass’. That should be sorted out appropriately.

> The ability to build out the 3D surfaces of your textures

Also level 2 material. It could be as simple as adding <url> to ‘texture’. Actually, I don’t see why this would require a 3D image format, because (lighting) bumpmaps have been used with 2D bitmap and vector formats for ages.

> These styles would work perfectly when designing with progressive enhancement

You would want a new type of Media Query, unless ‘embossed’ and ‘braille’, which already exist, could do the trick. Since this works in a different medium, there’s not much about backwards compatibility to consider, because it just works.

> We could bring Braille to mobile devices:
> 
> .assistive-touch-device-text {

That should be

  @media braille {

>     font-family: Braille;
> }

Devices able to support details fine enough for braille will probably be a – tiny at first – subset of generic haptic displays or pads. The UA would have to know about that.

> See more examples and details here: http://chrisnager.com/touchable-textures-with-css-can-you-feel-me/

It’s been ‘::after’, not ‘:after’, for a while now and you wouldn’t want to have only that part of the keys being ‘raised’.

Received on Saturday, 20 October 2012 20:22:20 UTC