Re: Haptics CSS extension proposal

On this issue of Haptics, I proposed a CSS syntax for touchable textures
yesterday.

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


I am proposing a new `texture` property in CSS
==============================================

.surface {
    texture: smooth;
}


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

.surface {
    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;
}


In shorthand, you’d only include the properties that are necessary (similar
to transform values)
================================================================================================

.surface {
    texture: temperature(25°C) adhesion(0.75) roughness(0.4);
}


And store your custom texture for reuse (similar to @keyframes)
===============================================================

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

::-webkit-resizer {
    texture: grippy;
}


Pre-defined values
==================

The texture values would have standard, pre-defined value names as strings
the same way we already have color values like `cadetblue` and transition
values like `ease-in-out`.


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.


The ability to build out the 3D surfaces of your textures would be possible
through the use of technologies like WebGL, svg3d, and possibly
matrix3d(similar to how the CSS transform property works).


Enhance
=======

These styles would work perfectly when designing with progressive
enhancement in mind because browsers that couldn’t read the texture
property, would simply ignore it (just like rgba colors or opacity). The
texture property could be feature-detected in JavaScript with something
like Modernizr to check if the device is able to apply textures. Apps that
depend on touchable textures may need to offer other ways of handling
functionality on non-texture-enabled devices.

if (!Modernizr.textures) {
    // Non-texture-based solution here
}

.no-textures {
    /* Non-texture-based CSS solution here */
}


Accessibility example
=====================

Touchable textures would open up a whole new level of accessibility.
Everyday smartphones and tablets could become much more powerful assistive
devices.

We could bring Braille to mobile devices:

.assistive-touch-device {
    texture: smooth;
}
.assistive-touch-device-text {
    font-family: Braille;
    texture: raised*;
}

*raised would represent a two dimensional texture that is raised slightly
off the page like an embossed business card.


Usability example
=================

You could engage on a deeper emotional level with your users through the
textures of your buttons:

.btn-success {
    texture: temperature(warm) roughness(0);
}
.btn-danger {
    texture: temperature(cold) roughness(1);
}

The advancement of the web lies in our hands, but more importantly in our
imagination.


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


--
Chris Nager