De por qué el silencio

De por qué el silencio
Hace muchos meses que CSSLab no se actualiza en cuanto a su contenido. Tampoco en su estructura. Lo último que hice fue cerrar las inscripciones a CSSLab Weekly y las razones fueron entregadas a quienes recibían esos emails semanalmente, y tiene que ver con lo que escribo en este artículo personal. Entonces, llego a este momento en que quiero transparentar qué ha sucedido y cuál sería la el estado de este sitio que me ha dado tantas satisfacciones…
Leer más →

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 →