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.

Múltiples event listeners en JavaScript
22/ago/2016 0

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 […]

La variable CSS currentColor
9/feb/2016 0

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:

Eventos JavaScript para un <input type=”number”>
8/oct/2015 6

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: “🍻”; } JS Bin […]

🍻 can be styled
10/jul/2015 0

La utilidad (y poca accesibilidad) de los menúes dropdown son conocidos e incuestionables. Pero existe un pequeño problema cuando el usuario navega sobre ellos, el cual se puede apreciar a continuación:

Hover Intent moderno en menues dropdown
7/may/2015 0

En iOS, cuando intentamos utilizar un elemento <video /> nos vemos obligados a que el player del dispositivo se haga cargo. No podemos aplicar autoplay ni responder a su comportamiento, ya que es intrínseco del sistema operativo y no del […]

Cerrar video cuando termina en iOS
4/sep/2014 0

Desde IE10 quer ya no existen los comentarios condicionales, ese útil invento de Microsoft para que nosotros desarrolladores front-end pudiéramos lidiar con los estilos específicos para IE5, 6, 7, 8…. y 9. Los quitaron porque creían que con IE10 todo […]

Estilos para IE9, IE10 e IE11
18/jun/2014 6

Sucede que creamos lindos estilos para elemento con CSS3 y queremos aplicar la propiedad transform para darle profundidad 3D. Observamos que ocurre lo siguiente en Firefox:

3D CSS3 transform con bordes dentados en Firefox
16/may/2014 3

Utilizar pre-procesadores CSS se ha vuelto una necesidad en la actualidad, ya que sus múltiples ventajas hacen que no exista excusa para seguir escribiendo CSS puro. Lo mejor es que no intervenimos el lenguaje, sólo lo escribimos más eficiente. Ahora […]

Auto-prefix en Sass
5/mar/2014 0

La propiedad CSS content: “”; viene siendo utilizada para entregar más estilos donde no necesitas extra marcado con HTML. Su soporte es amplio (IE8+ y demases browsers modernos). Su uso está atado a los pseudo-elementos :after y :before y permite […]

Pseudo contenido con CSS
11/dic/2013 0

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder. Placeholder permite […]

Dando estilos a placeholder
23/oct/2013 1

¿Cansado de soportar IE? Te entiendo, pero aún hay clientes que piden que sus proyectos se vean en estos browsers antiguos. Frustraciones aparte, cuando escribes Javascript y usas console.log() para debuggear tu código en la consola del browser, es usual […]

IE v/s console
13/jun/2013 0

Este es un comportamiento por defecto de los browsers para móviles, el cual al hacer algún tipo de arrastre extremo dentro del <body> (me refiero del extremo superior al inferior principalmente, ó si está en landscape de derecha a izquierda […]

Movimiento del browser al arrastrar en móviles
11/mar/2013 3

Hace meses que tengo la idea de generar varios micro-cursos, donde en no más de 30 minutos expongo varias ideas puntuales sobre temas orientados al desarrollo web. En esta ocasión les traigo el primero de ellos: Diseñando con CSS3, donde […]

Diseñando con CSS3: micro-curso y slides
26/dic/2012 6

Problema: a través de CSS, necesitaba entregar estilos al primer hijo de un elemento sin afectar la herencia (nietos y más allá); sólo necesito darle estilo al hijo directo de un selector. Además: debiera ser genérico, sin restringirse al tipo […]

Alcanzar el primer hijo de un selector pero no su descendencia
18/dic/2012 4

Me entretengo mucho inventando proyectos donde pueda aplicar CSS3 a destajo sin importarme un carajo las limitaciones de los browsers. Buscando una solución elegante para aplicar el mismo efecto reflejo que tan fácil es hacer en Photoshop, pero con CSS3, […]

Reflejo horizontal y vertical con CSS3
12/dic/2012 5

Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar […]

FadeIn/Out en menú con CSS
8/oct/2012 0

Este es un bug molesto, donde a partir de algunas tipografías (generalmente de palo seco y delgadas) tienen un pobre renderizado en Chrome en Windows. Buscando una solución me deparo con 4 diferentes; finalmente solo la solución 2 me resulta […]

@font-face y renderizado de texto en Chrome Windows
21/sep/2012 5

Con CSS3 el soporte a múltiple background nos permite ser mucho más creativos al momento de solucionar problemas de estilos, cuando antes sólo dependíamos de crear y anidar etiquetas y cortar esos gif’s y png’s que tanto nos han atormentado. […]

Backgrounds múltiples en CSS3 y un truco gradual
27/jun/2012 6

Contexto: día de semana laboral, cliente envía sus observaciones: Después de leer un poco, dí con la solución la que presento a continuación. Básicamente con CSS2 existió una propiedad que permitía que se definiera el modo de impresión a través […]

Impresión portarretrato con CSS3
29/may/2012 1

La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores […]

Aceleración por hardware con CSS3
17/may/2012 1

CSSLab

⤷ Etiqueta tip