Front-end, Estándares web y Accesibilidad

Cuando insertamos una galería de imágenes en WordPress se incrusta por defecto una serie de estilos CSS: <style type=’text/css’> #{$selector} { margin: auto; } #{$selector} .gallery-item { float: {$float}; margin-top: 10px; text-align: center; width: {$itemwidth}%; } #{$selector} img { border: 2px solid #cfcfcf; } #{$selector} .gallery-caption { margin-left: 0; } </style> Este fragmento de código [...]

Continuar leyendo "Eliminando el style por defecto de una gallery con un add_filter en WordPress".

Tener diferentes hojas de estilo dependiendo del navegador me parece algo horrible .  Pero si por algún motivo es necesario, podemos emplear una forma bastante fácil y limpia mediante PHP (Ref. Andrew Martin). Para ello, (1) pondremos un CSS base que sea compatible para todos los navegadores y a continuación (2) haremos uso del array [...]

Continuar leyendo "CSS adaptado a cada navegador con PHP".

Hace un tiempo escribí sobre algunas técnicas para poder optimizar nuestros códigos CSS. También mencionaba herramientas que puede facilitar nuestro trabajo de optimización: Firebug, PageSpeed, YSlow y YUI Compressor. 5 errores típicos Un 42% de páginas no comprimen su contenido con GZIP. Un 44% de páginas enlazan a más de 2 ficheros CSS. Un 56% [...]

Continuar leyendo "Optimización de CSS; Nicole Sullivan nos enseña 5 errores típicos y 5 buenas maneras".

Internet Explorer en su versión 6 y anteriores no soporta la transparencia del formato PNG. Para solucionar este problema existen varias técnicas: A través del filtro Directx AlphaImageLoader. Con Behaviors. El conocido pngfix (con la ayuda de JavaScript). Algunas implementaciones pngfix para frameworks de JavaScript, como jquery.pngFix.js Todas ellas presentan pros y contras. Dependiendo del [...]

Continuar leyendo "PNG transparente e IE, el mítico problema…".

Expongo a continuación algunos consejos para la optimización de nuestras hojas de estilos CSS. 1. Selectores ID, Classes, Tags #logo { margin-top: 1em; } .ico { margin-left: 1em; } a { text-decoration:none; } Los Selectores ID es la forma más eficiente y rápida que hay en CSS para otorgar estilo. Por contra no podemos sobrecargar [...]

Continuar leyendo "Optimizar CSS, 12 consejos y 4 herramientas".

Las CSS Expressions son usadas para establecer propiedades dinámicas. Fue un invento más de Microsoft para Internet Explorer. Los problemas que veo en las “CSS Expressions” son: No es un estándar web, con todo lo que ello implica… Se diluye la abstracción: contenido > estilo > comportamiento. A excepción de IE todos los navegadores tendrán [...]

Continuar leyendo "No me gustan las “CSS Expressions”".

Voy a comentar una técnica de la cual no soy partidario. Pero como ya sabéis, existen veces en las que tus ideas y argumentos no coinciden con los del cliente y te ves obligado a usar este tipo de cosas. Imagen ilustrativa de enlace que recibe el foco Cuando hacemos clic en un enlace los [...]

Continuar leyendo "Quitar el foco del enlace después de clic".

Es seguro que en algún momento todos los que trabajamos con CSS echamos en falta las conocidas variables, elementos esenciales en cualquier lenguaje de programación. Para solventarlo se me ocurren varias formas: Evitar las redundancias. Usar mejor la descendencia en los selectores. Definir las variables como meros comentarios. Usar variables de PHP u otro lenguaje [...]

Continuar leyendo "Variables en CSS; Implementaciones".

Con la ayuda de herramientas como CleanCSS (basado en CSSTidy) podemos optimizar y reducir notablemente el peso de nuestras hojas de estilo. Hace tiempo hablábamos en este blog sobre como optimizar CSS y hace uso de formas abreviadas. Mediante esta herramienta online podemos probar nuestros ficheros CSS y descubrir mejores formas a la hora de [...]

Continuar leyendo "CleanCSS – Limpiar y optimizar nuestras hojas de estilo".

Para crear un botón en HTML contamos con dos etiquetas: INPUT BUTTON Ambas son válidas. La segunda de ellas es menos usada (con diferencia) aunque esconde tras de si muchas ventajas al poder anidar en su interior contenido. Botón tradicional con input <input type="submit" value="Eliminar" /> Botón + icono con button <button type="submit"><img src="delete.gif" alt="x" [...]

Continuar leyendo "Button y img, botón de formulario con icono".