CSS3 variables var() para el manual de estilos de un proyecto web

CSS3 variables var() para el manual de estilos de un proyecto web

5
(1)

En todo proyecto web me gusta trabajar con varias hojas de estilos diferenciadas:

  • reset.css del gran Eric Meyer.
  • grid.css (utilizo la rejilla de bootstrap pero personalizada y eliminando todo el ruido que aparece en getbootstrap.com. Hay muchas instrucciones que si no las voy a usar me molestan en la hoja de estilos).
  • style.css dónde pongo mi propio manual de estilos definido para cada empresa.

Algunos aspectos vitales para el manual de estilos suelen ser las tipografías, tamaños de fuente y …. colores.

Bien.

En esta entrada de hoy vamos a ver un recurso de css3 que nos ayuda muchísimo a lidiar con los colores. Y es que cuando se usan en hexadecimal personalmente me cuesta mucho saber cual estoy usando a cada momento.

Vayamos por partes.

El pseudoselector :root

De acuerdo con la ayuda de mozilla el pseudo-selector :root es lo mismo que usar el selector html salvo que con más especificidad.

Tiene compatibilidad a partir de explorer 9.

Es decir que:

html{
	box-sizing:border-box;
}

/*Es equivalente a */

:root{
	box-sizing:border-box;
}

/* pero con diferente especificidad */

CSS variables var()

Una variable es una unidad mínima de información que almacena un dato.

Por ejemplo podemos usar las variables para almacenar un color hexadecimal y nombrarlos:

  • negro1
  • negro2
  • negro3
  • negro4

¿Parece una buena idea verdad?

De este modo en un proyecto nos podemos definir a los colores en base a nombres que no son fáciles de recordar y no en base al color hexadecimal o rgb.

Veamos un ejemplo de uso:

Dado el siguiente código html

<div class="caja-1"></div>
 <div class="caja-2"></div>
 <div class="caja-3"></div>
 <div class="caja-4"></div>
 <div class="caja-5"></div>
 <div class="caja-6"></div>

Dado el siguiente código css

:root{
--negro1:#1b1b1b;
--negro2:#252525;
--negro3:#2f2f2f;
--negro4:#393939;
--negro5:#424242;
--negro6:#4c4c4c;
}

.caja-1{background-color:var(--negro1);}
.caja-2{background-color:var(--negro2);}
.caja-3{background-color:var(--negro3);}
.caja-4{background-color:var(--negro4);}
.caja-5{background-color:var(--negro5);}
.caja-6{background-color:var(--negro6);}

div{
	width:100px;
	height:100px;
	float:left;
}

El resultado final es la siguiente escale de tintes negros.

Escala de tintes a partir de #252525
Escala de tintes a partir de #252525

Compatibilidad con navegadores web

¿Adivinas quién es el patito feo?

Estás en lo cierto.

Explorer es el único navegador que soporta esta instrucción CSS3.

Nada es perfecto….

Lástima porqué según varios estudios el 10% de la población mundial sigue usando Explorer.

Compatibilidad de var() según caniuse.com
Compatibilidad de var() según caniuse.com Edge ya acepta var()

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.