Variables en CSS3, ¿para cuándo?

Hace ya tiempo que se viene hablando de implementar variables en CSS3 aunque de momento no parece que el asunto despierte mucho interés. Quizás no hay una necesidad real o quizás ésta puede cubrirse con la especificación HTML5. Sea como sea sería interesante disponer de una herramienta más. Con las variables CSS3 podríamos implementar código como el que sigue:

:root {
    -webkit-var-beautifulColor: rgba(255,40,100, 0.8);
    -moz-var-beautifulColor: rgba(255,40,100, 0.8);
    -ms-var-beautifulColor: rgba(255,40,100, 0.8);
    -o-var-beautifulColor: rgba(255,40,100, 0.8);
    var-beautifulColor: rgba(255,40,100, 0.8);
  }
  .example1 h1 {
    color: -webkit-var(beautifulColor);
    color: -moz-var(beautifulColor);
    color: -ms-var(beautifulColor);
    color: -o-var(beautifulColor);
    color: var(beautifulColor);
  }

<div class="example1">
<h1>El color de esta linea se ha definido usando variables CSS3.</h1>
</div>

El anuncio oficial es del 2008 y a día de hoy parece que sólo se puede disponer de esta característica en Safari (WebKit) y versiones de desarrollo de Chrome (Chrome Canary). Firefox comenta el tema en su Developer Network pero ni siquiera proporcionan un enlace válido a una teórica tabla de compatibilidad. En WebKit podemos hacer:

:root {
  -webkit-var-my-color: #fad;
}
 
.thing {
  color: -webkit-var(my-color);
}

o incluso anidar variables:

:root {
    var-my-color: #06c;
    var-background: linear-gradient(left, var(my-color), white);
}

Parece buena idea y sería un buen complemento para crear un código HTML5 más claro.

Enlaces: CSS Custom Properties for Cascading Variables Module Level 1, CSS Hierarchies Module Level 3