Image for post
Image for post

Artículo en constante actualización

Las CSS Custom Properties permiten definir variables dentro del rango que le especifiquemos, si por ejemplo la definimos dentro de un .container , sólo se podrá usar en todos los elementos que estén dentro de esa clase.

Se definen de la siguiente manera:

—nombreDeVariable: propiedad;

Y se las llama así:

color: var( – nombreDeVariable);

Se puede usar un fallback si no es soportado por un navegador, por ejemplo:

color: var(  – nombreDeVariable, #ffffff); // Si no acepta variable el navegador, utiliza el #ffffff.

Como me comenta dinaelurdaneta en Twitter el fallback no sólo nos sirve para la falta de soporte. Como declaramos un valor inicial y en caso de no existir ese valor para la Custom Property toma el valor del fallback, nos puede venir bien si hacemos componentes que se reutilizan en una o varias aplicaciones. …


Image for post
Image for post
Imagen de https://undraw.co

Hay 6 elementos que podemos utilizar para estructurar nuestro HTML semánticamente.

  • main
  • header
  • footer
  • article
  • section
  • aside

Estos elementos tienen un significado semántico que no tiene por qué estar relacionado a su estilo visual ni a su posición en la página. Habitualmente vemos el footer debajo de todo y el header arriba, pero eso no tiene por qué ser así.

Uso de cada elemento

main

Este elemento nos indica que lo que está dentro suyo es el contenido principal de la página en la que estamos. Sólo puede ser usado una vez por cada página.

header

Se usa para identificar contenido que nos sirva de introducción a un bloque de código de nuestro HTML, puede ser usado por cada sección que lo necesite. …


Image for post
Image for post
Imagen de https://undraw.co

En sólo 3 pasos! 🎯

Muchos de nosotros tenemos proyectos y ejercicios montados en GitHub, ese hermoso repositorio donde poner nuestros experimentos y compartirlos con el resto de la comunidad.

Pero muchas veces dejamos el código ahí y ya está. Esperando que la persona que quiera verlo en acción se descargue el repo, lo monte localmente y lo despliegue. Cosa que no siempre sucede.

Una forma muy fácil y sencilla que nos proporciona GitHub para compartir el resultado final del código que tenemos en el repo es a través de GitHub Pages. …

About

Alejandro Narvaja

UI Developer | alejandronarvaja.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store