info@codewebbarcelona.com 937922762

Propiedades Personalizadas CSS o Custom Properties


Publicado el 20/04/17


testviews 29

Ya se ha convertido en una realidad. ¡Ya podemos hacer uso de Propiedades PersonalizadasCSS Custom Properties!

Pero primero de todo, empecemos con un buen <h2>, seguido de un buen <p> a modo de resumen.

Las CSS Custom Properties o Propiedades Personalizadas

O cómo hacer magia dentro de una hoja de estilos css.

Las Propiedades Personalizadas de CSS, es un “nuevo” concepto en el uso de las hojas de estilo CSS. Resumiendo y simplificando, se trata del uso de variables accesibles dentro del documento CSS e incluso desde Javascript, de forma NATIVA.

¿Por qué “nuevo” entre comillas? Pues seguramente conoceréis los CSS Preprocessors. Han estado muy de moda, pero con el nacimiento de las Custom Properties y conforme los diferentes navegadores vayan ofreciendo el soporte a éstas nuevas propiedades, están condenados a desaparecer tarde o temprano. Al final del escrito, tenéis una tabla del soporte entre navegadores, pero avanzo, que un 70% de los usuarios ya tiene un navegador con soporte a las Propiedades Personalizadas.

 

CSS y las Propiedades Personalizadas

Para ver la ventaja que supone entre una hoja de estilos CSS convencional, vamos a poner un ejemplo de una hoja de estilo CSS sin hacer uso de las Custom Properties y ésta misma, la “traduciremos” haciendo uso de las mismas.

Suponemos que queremos un body con un determinado color de fondo, el cual más tarde usaremos para pintar el color del texto en una capa y también haremos uso del color de texto del body para el color de fondo de la capa.

La capa1, tendrá un padding de 20px. La misma medida que tendrá el margin-top de la capa 2.


body{
     background-color:#1b1b1b;
     color:#fff;
}
.capa1{
     padding:20px;
     color:#1b1b1b;
     background-color:#fff;
}
.capa2{
     margin-top:20px;
}

Ahora replicaremos el mismo ejemplo, pero esta vez, haciendo uso de las Propiedades Personalizadas.


:root{
     --color1:#1b1b1b;
     --color2:#fff;
     --mainSpacing:20px;
}
body{
     background-color:var(--color1);
     color:var(--color2);
}
.capa1{
     padding:var(--mainSpacing);
     color:var(--color1);
     background-color:var(--color2);
}
.capa2{
     margin-top:var(--mainSpacing);
}

Mediante :root, declaramos dentro las variables, que serán accesibles a lo largo de todo el documento CSS, introducimos el doble guión — para declarar una variable y su valor. Luego, para hacer uso de las variables declaradas, usamos var(–VARIABLE);.

Imaginemos ahora el uso que le podemos dar en una hoja de estilos CSS con más de 1000 lineas de código y en la facilidad en el momento de modificar valores. Tan solo tendremos que cambiar un valor, para que se refleje en todo el documento CSS.

 

Un paso más allá

O dos. Ya que las CSS Custom Properties, nos permiten hacer cálculos, realizar operaciones condicionales y aplicar valores por defecto, en caso de que cierta variable no esté definida. ¿Parce Javascript no? Pues todo esto lo hacemos dentro de la misma Hoja CSS.

Podemos sumar, multiplicar, comparar diferentes valores y aplicar un valor u otro en caso de darse el condicional.


.caja{
     /*En caso de no tener declarada la variable1, se aplicarán 10px*/
     margin-top:var(--variable1, 10px);

     /*También podemos hacer uso de variables para establecer un valor por defecto*/
     padding-top:var(--variable1,var(--variable2));

    /*Podemos sumar, restar, multiplicar y dividir (*importante el espaciado en la suma y la resta)*/
     padding-top:calc(var(--variable1) + 10px);
     height:calc(var(--variable1) - 5px);
     line-height:calc(var(--variable1) * 2);
     width:calc((var(--variable1) - 5px)/2);
     
}

Otros ejemplos:


:root{
     /*Podemos crear texto para ser insertado en un :before más tarde*/
     --texto:"Click para ver";
}
.caja:before{
     content:var(--text);
}
.caja2:before{
     /*Podemos añadir más texto después de nuestra variable declarada (por ejemplo, un link a proyecto)*/
     content:var(--text)' nuestro proyecto al completo';
}
.caja2:before{
     /*Ahora lo usaremos para un link a una noticia*/
     content:var(--text)' nuestra noticia';
}

Ejemplo condicional:


:root{
     /*Podremos acceder mediante Javascript*/
     --variableCond: if(x > 5) this.width = 10;
}

 

Soporte entre navegadores

Como veis, prácticamente, todos los navegadores lo soportan… ¡Salvo Explorer! ¡Que raro, NO ME LO ESPERABA ESO! Todo sea por recordar aquellos maravillosos años en que teníamos que hacer malabares maquetando para Explorer 6.

Por suerte, a diferencia de entonces, ahora tan solo son menos del 4% de usuarios utilizando Explorer. No big deal.

El total de usuarios que utilizan un navegador con soporte a las Custom Properties es del 70.9%. Muy elevado.

propiedades personalizadas o custom properties

http://caniuse.com/#feat=css-variables



diseño web barcelona contacto
El autor: Jordi Ensenyat
Graphic & Web Designer + Programmer
Jordi Ensenyat es un diseñador gráfico y web, programador y
maquetador, ubicado en el Maresme, Barcelona.
While I'm designing/programming don't disturb me. I could fatality you.
www.jordiensenyatdisseny.com


Volver
Cuánto cuesta un logo
leer más
Cuánto cuesta una página web
leer más
Identidad corporativa Shido Hàbitat
leer más
Antes de pedir presupuesto para diseño web
leer más
SUBIR ARRIBA


· Diseño de páginas web en barcelona ·

¿Estás preparado para
ver nuestra selección
de mejores obras?
Descubre más sobre el
estudio y los servicios
que ofrecemos
Mantente al día sobre
todas nuestras novedades
y nuevas obras
¿Empezamos a trabajar tu diseño web?
estamos en Barcelona, ponte en contacto
con nosotros ahora
Vuelve al punto de partida
Diseño web Barcelona