JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

CSS: cómo cambiar los estilos de un conjunto de elementos cuando haya más de un número determinado de ellos

Imagina que en una aplicación web tienes un listado de fichas de producto en el que cada elemento es una pequeña estructura HTML para mostrar toda la info de cada uno de los productos del listado: foto, nombre, descripción, tamaños, colores, precio... Además, ese conjunto de elementos de información se generan desde una aplicación en el lado servidor, en función de alguna búsqueda o filtro de la base de datos, de modo que *no puedes saber de antemano* desde tu HTML cuántos elementos hay en la lista. Dependiendo de cuántos haya, quieres cambiar el diseño del listado de resultados. Por ejemplo, si hay muy pocos (3 o menos) quieres que se vean más grandes y resaltándolos todo lo que puedas. Sin embargo si hay más 4 o más la ficha de cada producto en el listado será menos llamativa. En este post vamos a ver como conseguir esto *tan solo usando CSS* sin necesidad de programación ni en cliente ni en servidor. Tiene más miga de lo que parece. [Más]

La relación entre atributos HTML y propiedades JavaScript

Cuando uno programa para la Web en la parte Front-End tiene muy interiorizados algunos conceptos que no siempre son correctos. Una confusión habitual (o al menos algo que no siempre se tiene claro) es la relación que existe entre los atributos de las etiquetas HTML y las propiedades de los objetos del DOM que representan a dichas etiquetas, a las que accedemos desde JavaScript. Muchas veces se piensa que existe una relación directa y bidireccional entre ellas, de modo que si cambias una propiedad se está cambiando el atributo y viceversa. Y aunque esto es cierto en algunos casos, existen otras casuísticas que pueden complicarte la vida si no las tienes en cuenta. Vamos a verlo... [Más]

Copiado de texto al portapapeles con JavaScript - API Asíncrona

El mes pasado os hablaba aquí de una manera sencilla y soportada por todos los navegadores para acceder al portapapeles desde código JavaScript en el navegador. Es un método simple pero un poco engorroso de implementar, puesto que hay que seleccionar rangos en la página para poder copiar su contenido. Además, su implementación varía ligeramente de un navegador a otro porque no está estandarizada. Otra pega importante que tiene el método "clásico" es que es síncrono. Para solucionar todos estos problemas la W3C ha creado la Async Clipboard API. A continuación te cuento cómo sacarle partido. [Más]

CSS: Cómo igualar la altura de dos cajas flotadas para que sean iguales

Imagina que tienes una maquetación básica de un sitio web que tiene una estructura típica: cabecera, cuerpo con dos secciones (lateral y principal) y pie. Para maquetar esto tenemos infinidad de posibilidades, pero supongamos que hemos utilizado cajas flotadas (con float) para definir la sección central, donde está la barra de navegación lateral y el contenido principal de la página. Un efecto negativo habitual de maquetar de esta manera es que si las dos cajas que están una al lado de la otra tienen contenidos muy diferentes en tamaño (lo más habitual de hecho) no tienen la misma altura y quedan descompensadas, creando un efecto muy feo. Te explico cómo solucionarlo usando CSS y un poco de imaginación. [Más]

Copiado de texto al portapapeles con JavaScript - Método "clásico"

Hasta no hace muchos años, facilitar programáticamente que la gente pudiera copiar (o cortar) contenido de una página para llevárselo al portapapeles no era tarea tan fácil. Es decir, si por ejemplo tenías un fragmento de código en tu página de contenidos, y querías ponerle un botón de "Copiar" para facilitar a tus visitantes su copiado al portapapeles, la cosa no era tan fácil. De hecho si querías asegurar que iba a funcionar en todos los navegadores debías recurrir al uso de Flash =:-O En la actualidad la forma de hacerlo está estandarizada y extendida, por lo que resulta más fácil, pero lo curioso es que lo complicado del caso no es tanto copiar al portapapeles sino cómo decidir qué es lo que se va a copiar, así como las pequeñas diferencias entre navegadores a la hora de hacerlo. En este artículo te lo cuento... [Más]

CSS3: propiedades background-origin y background-clip

En CSS3 existen un par de propiedades que tienen que ver con cómo se colocan las imágenes de fondo en elemento HTML y que suelen provocar bastantes dudas entre los programadores cuando se las encuentran por primera vez. Se trata de las propiedades background-origin y background-clip. El motivo es que ambas toman exactamente los mismos valores y, aparentemente, hacen lo mismo. Pero nada más lejos de la realidad. En verdad las dos se complementan muy bien como voy a explicar en este post... [Más]

Funcionalidad "Overrides" en Chrome 65: guardando cambios en tu CSS desde el navegador

¿Cuántas veces has estado toqueteando una página que gestionas desde las herramientas del desarrollador? Seguro que muchas. Lo típico es que un elemento rebelde no acaba de quedar en donde a ti te gustaría o quieres afinar mucho más un margen, un tamaño o un color. Así que abres las herramientas del desarrollador y te pones a seleccionar elementos, ver sus reglas resultantes, cuáles influyen sobre el resultado final, y retocas directamente los estilos en el editor del lateral. Si tus cambios se reducen a un par de propiedades CSS es muy fácil llevarlos a producción, pero si son muchos hacerles el seguimiento puede ser una locura. A partir de ahora la cosa cambia mucho gracias a Crrome 65... [Más]

Variables en el lenguaje CSS: Guía de uso y abuso

CSS es un lenguaje más bien pobre: no dispone de construcciones complejas que nos permitan tomar decisiones con condicionales, repetir operaciones mediante bucles, etc... La máxima lógica que nos permite aplicar es cambiar ciertas definiciones en función del medio (pantalla, impresora...) o los anchos y resoluciones (media-queries). Esto hace que mantener hojas de estilo CSS muy grandes resulte complicado. Por ejemplo, si estamos reutilizando un color o una dimensión (ancho o alto) a lo largo de un documento CSS muy largo, no nos queda más remedio que repetir el mismo valor una y otra vez. Si más adelante decidimos cambiarlo tenemos que buscar y reemplazar con cuidado en el documento de texto. Las variables CSS son una realidad en todos los navegadores modernos desde hace muy poco tiempo, pero ya podemos sacarles todo el partido. Con este completo artículo aprenderás a dominarlas... [Más]