Variables en CSS

w3cEl W3C cuenta con el documento CSS Custom Properties for Cascading Variables Module Level 1, que introduce a las hojas de estilo en cascada la posibilidad e incorporar variables.

Actualmente en Last Call de Working Draft, esta implementación promete elevar el potencial de las características que incluye CSS en la actualidad.

Entre las opciones que se están incorporando encontramos la nueva propiedad personalizada (Custom Propertie): --* y la función var().

Para comprender mejor su utilización, el W3C nos provee el siguiente ejemplo en su documento http://www.w3.org/TR/css-variables-1/:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

Por el momento es una especificación en desarrollo y solo algunas versiones de los navegadores han comenzado a implementar esta característica de manera experimental, como es el caso de Google Chrome y Mozilla Firefox en sus versiones más modernas.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

2 Comentarios en “Variables en CSS
  1. Facundo dice:

    Hola, ¿qué navegadores soportan ya el uso de variables en CSS?

1 Pings/Trackbacks para "Variables en CSS"
  1. […] Variables en CSS – El W3C cuenta con el documento CSS Custom Properties for Cascading Variables Module Level 1, que introduce a las hojas de estilo en cascada la posibilidad e incorporar variables. Actualmente en Last Call de Working Draft, esta implementación promete elevar el potencial de las características que incluye CSS en la actualidad. […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.