El identificador único o ID: como atributo Html y selector Css

El identificador único o ID: como atributo Html y selector Css
Por Rev: 5 Comentarios
El identificador único o ID: como atributo Html y selector Css

Hace unas fechas en mi TL de Twitter apareció una captura de pantalla de un pedacito de código. <div id='boton de arriba'> La parte protagonista era el atributo id con varios valores. No la enlazo porque la conversación fue en tono de bromas y chanzas, especialmente por la falta de la tilde ;-)

Sin embargo sí hay un detalle en el que, repito, por el tono humorístico de la conversación, pasó desapercibido: los valores múltiples del atributo ID y su efecto al querer usarse como selector Css.

Porque ese es un detalle explicitado en la especificación de Html y las restricciones al valor del atributo de identificador único (id) en Html. Sobre ello dice:

Leer artículo El identificador único o ID: como atributo Html y selector Css

Transition Vs Animation Css

Por Rev: 0 Comentarios

Al momento de aplicar alguna variación o cambio a un elemento en la web de forma gradual y sin cambios bruscos cabe la posibilidad de que surjan dudas entre qué vía Css utilizar: mediante la propiedad transition o animation.

Podría decirse que ambas propiedades permiten a un elemento pasar de un estado 'A' a otro final 'B' de forma progresiva, no instantánea. Entendiendo estado 'A' y 'B' como valores distintos de una propiedad Css determinada. Propiedad que, como es lógico, debe ser por definición animatable.

Entonces la cuestión es, si ambas permiten hacer el cambio de forma progresivo, cuál usar. Y para tomar esa decisión nada mejor que ver las diferencias y semejanzas entre ambas propiedades.

Transition Vs Animation Css

Leer artículo Transition Vs Animation Css

Javascript con Furoya: Parallax y Lazy-Load ¿estoy dentro o fuera del viewport?

Por Rev: 0 Comentarios
Javascript con Furoya: Lazy load ¿estoy dentro o fuera del viewport?

En el artículo anterior prometí una continuación en el uso de onscroll con fines más prácticos que desaparecer un encabezado. Y no voy a cumplir tal y como quería; pero al menos les voy a contar por qué.

La historia comienza semanas atrás cuando publique un ejemplo que no me pareció muy útil, pero lo pidieron varias veces (y lo siguen haciendo) en distintos foros [ver].

Lo hice porque estaba sin ideas, y creí que luego de verlo funcionando se me iba a ocurrir algo. No pasó. Digo, no inmediatamente. Porque después entendí que el punto fuerte del efecto estaba en modificar la propia imagen.

Así que comencé a trabajar en una galería (¡otra más!) que animara las fotos cuando aparecieran en el documento. La versión es perfectible (y mucho) pero todos entendemos que estos no son ejemplos para sitios "de producción" sino pura y exclusivamente para estudiarlos.

En vez de poner botones o miniaturas a modo de barra, las imágenes se mueven con la vieja, conocida, y poco valorada scrollbar, arrastrando hacia abajo hasta recorrerlas todas. Funciona unicamente en esa dirección, un poco porque es muy molesto re-visar una galería cuando las fotos bailan todo el tiempo (ésta hace la animación sólo una vez al mostrar la imagen), y otro porque no hay necesidad de complicar demasiado el ejemplo.

Leer artículo Javascript con Furoya: Parallax y Lazy-Load ¿estoy dentro o fuera del viewport?

Numeración inversa en Listas Ordenadas

Por Rev: 1 Comentario
Numeración inversa en Listas Ordenadas

Uno de los diferentes tipos de lista son las listas ordenadas (ordered list) representadas en el html por la etiqueta <ol> y sus únicos hijos directos marcados con <li>.
La principal característica de este tipo de lista es que sus items aparecerán numerados, si no se explicita lo contrario en el css, sin necesidad de incluir contadores css.

Leer artículo Numeración inversa en Listas Ordenadas