Guía responsive image: Los atributos srcset y sizes y las bases de selección: art direction, dpi y tamaños

Guía responsive image: Los atributos srcset y sizes y las bases de selección: art direction, dpi y tamaños
Por 2 Comentarios

El elemento picture y su hijo asociado source junto a los atributos srcset, sizes, definidos originalmente para el elemento img, es la respuesta actual vencedora en la batalla para dotar al desarrollador de herramientas para el manejo de las imágenes en el escenario del responsive web design.

Así, con un uso correcto de estos elementos y atributos, ya es posible disponer de responsive images: servir el archivo de imagen que mejor se adapta al dispositivo que recibe la página.

Leer: Guía responsive image: Los atributos srcset y sizes y las bases de selección: art direction, dpi y tamaños

Javascript con Furoya: Pseudo borde circular de caracteres tipográficos

Por 0 Comentarios

Hace unos días Kseso trajo a portada del blog de su #olvidoteca css un ingenioso método para acomodar en círculos una serie de elementos: Secuencias progresivas en Transformaciones y otras propiedades Css.

El fin último era mostrar caracteres de un texto acomodados en ronda, y aquí también vemos el inconveniente para el CSS : no se puede dar formato de forma independiente a cada letra, hay que meter cada una en algún elemento html y actuar sobre ellos. Por supuesto, el texto queda destruído.

Javascript con Furoya: Pseudo borde circular de caracteres tipográficos

Hay otro caso similar donde se usan elementos y hasta caracteres de modo puramente ornamental, y nunca es conveniente poner esos falsos textos en el HTML para que no sean leídos por buscadores o texttovoices, o lisa y llanamente para que no lo ensucien. Los pseudoelementos ayudan bastante con estos temas, hasta que hay que meter elementos HTM adentro. Por supuesto, eso no se puede.

En el artículo anterior sobre Javascript mostraba cómo capturar texto y procesarlo fuera del código fuente agregando etiquetas entre los caracteres. Hoy vamos a presentar una variante de ese ejemplo, pero poniendo nuestros propios caracteres para que nunca se vean en el documento original.

Seguramente esta situación es poco probable, pero a los efectos del artículo califica sobradamente. Vamos a simular un borde decorado con caracteres dispuestos en círculo, y vemos que el HTML contiene escritos a todos.

Leer: Javascript con Furoya: Pseudo borde circular de caracteres tipográficos

De Ems y Rems

Por 12 Comentarios
De Ems y Rems - Valores relativos al tamaño de la tipografía

A estas alturas, los dos valores, em y rem, son de sobra conocidos. Quizás no tan extendido el uso del segundo. Y quizás un poquito menos aún los pros y contras de ambos.

Para los más nóveles en css, vamos de entrada con sus similitudes y su diferencia:

  • Semejanzas:
    • Ambos son unidades de longitud relativas.
    • Ambos se basan en el font-size de la letra "m" de la tipografía declarada en font-family.
    • Los dos priman la accesibilidad y los tamaños de tipografía y cajas dependerían (en teoría) de las "preferencias/necesidades" del visitante.

Leer: De Ems y Rems

"Parent selector" - selector de precedente o ancestro. O de cómo remontar el DOM con puro Css

Por 2 Comentarios
Parent selector - selector de precedente o ancestro. O de cómo remontar el DOM con puro Css
Lo que la especificación no da, la imaginación nos presta.

Es una máxima que debería presidir todas tus acciones. Y hablando de Css más que una frase bonita (y efectiva) debería ser una "condición sin la cual no" se debería permitir escribir ni un comentario en la hoja de estilo. En serio. Y para ilustrarlo nada mejor que enfrentarse a un "falso imposible" Css: cómo remontarse en el DOM o crear selectores de ancestro (parent selector) a la carta.

Un poco de historia

En los primeros borradores del documento "Selectors Level 4" apareció un nuevo combinador de selectores Css (el de antecesor) junto a los ya conocidos. A saber:

Leer: "Parent selector" - selector de precedente o ancestro. O de cómo remontar el DOM con puro Css