Hace ya varios meses que diferentes sistemas operativos y aplicaciones traen como opcional el dark-mode, donde todo lo claro se ha vuelto oscuro. ¿Moda, accesibilidad? Realmente no he indagado, pero eso trae pequeños problemas en cuanto al uso de navegadores […]

Detectar dark-mode en browsers
16/Sep/2020 118

Spambots aman scrapear páginas para sacar emails para, evidentemente, mandar email spam. En este corto artículo presentaré la técnica que he utilizado y ha sido efectivo, además la encuentro simple entre varias que analicé. Incluye HTML, CSS y opcional (puedes […]

Evitar el spam del mailto (el que he utilizado)
8/Mar/2019 496

Existe una propiedad CSS que remueve toda propiedad CSS aplicada por el browser a un selector y la deja sin nada, desnuda y cruda. No me refiero a un reseter, menos a un normalizer. La propiedad all: unset; aplicada a […]

Reset de todas las propiedades CSS de selectores con una sola propiedad: all
9/Nov/2018 166

Con CSS Grids a la vuelta de la esquina en cuanto a soporte cross-browser, podemos ya considerarlo para centrar horizontal y verticalmente. De todos los artículos escritos anteriormente esta es lejos la manera más simple y fácil de lograr centrar […]

Centrando verticalmente IV: CSS Grid
18/Dic/2017 249

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 756

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 35

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 187

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 85

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 162

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 196

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 92

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 94

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 3737

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 116

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 16530

¿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 86

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 103

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 85

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 99

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 233

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 111

CSSLab

⤷ Etiqueta tip