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

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

Print Friendly, PDF & Email
CSS3 variables var() para el manual de estilos de un proyecto web
5 (100%) 1 voto

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!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.