Múltiples event listeners en JavaScript

Múltiples event listeners en JavaScript
En JavaScript, para agregar un evento a un selector ó un conjunto de ellos se utiliza comúnmente addEventListener() pero que tiene una sutil limitación: sólo puedes darle 1 evento a la vez.
Leer más →

Etiquetas de título en HTML5

Etiquetas de título en HTML5
Ya estamos acostumbrados al estándar HTML5 hace años y lo utilizamos tranquilamente en nuestros proyectos web este 2016. Pero, ¿realmente conoces su uso y lo aprovechas? No basta con declarar un nuevo doctype; si no utilizas correctamente sus etiquetas será poco o nada el provecho que le sacarás al estándar. En este artículo me enfocaré en el uso y reglas recomendadas en HTML5 para las etiquetas HTML para título de contenido, las que van del <h1> al <h6>.
Leer más →

Grilla CSS Responsive / Fluid + Fixed

Grilla CSS Responsive / Fluid + Fixed
Grillas CSS abundan y son múltiples sus utilidades (aunque se sigan usando de forma incorrecta y abusando de sus componentes asociados pero enfin, herrar es umano). Vinieron para quedarse por mucho más tiempo y nos han acostumbrado a los layout tan comunes que hoy en día todas nos parecen iguales: 3 columnas, grilla 12 columnas, responsive, líquido… a fin de cuentas todos terminan pareciéndose.
Leer más →

SCSS @media mixin

SCSS @media mixin
Este útil mixin de SCSS me ha ayudado a mantener consistencia y legibilidad en el código de un proyecto donde estamos muchas personas trabajando de manera remota.
Leer más →

La variable CSS currentColor

La variable CSS currentColor
Estos días se anunció que Google Chrome incluye soporte para CSS Variables, lo que finalmente abre las puertas a que los nuevos features de CSS sean finalmente adquirido por los browsers. Pero una variable poco conocida y con buen soporte crossbrowsing ha existido por años: currentColor. Esta capacidad tiene muchas aplicaciones las que veremos en este artículo.
Leer más →

La pseudo-class :not

La pseudo-class :not
Esta es una de las pseudo-clases menos utilizadas pero con gran utilidad al momento de alcanzar selectores CSS que no comparten cierta regla. La pseudo-clase :not permite seleccionar todos los selectores excepto que satisfacen cierta condición. Esto es muy útil ya que solíamos definir las propiedades a los elementos que necesitábamos y luego escribíamos la excepción y dependiendo de cómo, podía ser con clase CSS ó selectores hermanos/adyacentes u otros. Por ejemplo, para darle un borde separador a todos los elementos de un menú menos para el último podíamos:
Leer más →

Eventos JavaScript para un input type=“number”

Eventos JavaScript para un input type="number"
En un proyecto tengo que obtener el valor de un input de tipo number, el cual en algunos browsers trae controles para aumentar/disminuir el valor:
Leer más →

🍻 can be styled

Sólo un experimento utilizando emojis como nombre de clase CSS. No se atrevan a usarlo en producción. HTML: <p class="🍻">Emojis can be styled</p> CSS: .🍻 { font-size: 10vmin; text-align: center; color: green; } .🍻:before { content: "?"; } Ejemplo en jsbin.com
Leer más →

Alcanzar y manipular pseudo-elementos CSS con JavaScript

Alcanzar y manipular pseudo-elementos CSS con JavaScript
Los pseudo-elementos (y pseudo-clases) son selectores CSS virtuales que no existen esplícitamente en el árbol de DOM. Pero aparte de esa característica, puede ser manipulado con propiedades CSS como cualquier otra, a excepción que agrega una nueva propiedad content la que permite ingresar texto al pseudo-elemento.
Leer más →

Sobre pseudo-clases y pseudo-elementos

Sobre pseudo-clases y pseudo-elementos
Las pseudo-clases y los pseudo-elementos son tipos de selectores CSS que permiten alcanzar estados y elementos que no están en el DOM original. La lista de pseudo-clases es amplia, la de pseudo-elementos no ha crecido hasta la actual versión de CSS3 (aunque en CSS4 se vienen varios más):
Leer más →