Front-end, Web Standards & Accessibility

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 [...]

Continue reading "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% [...]

Continue reading "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 [...]

Continue reading "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 [...]

Continue reading "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 [...]

Continue reading "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 [...]

Continue reading "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 [...]

Continue reading "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 [...]

Continue reading "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" [...]

Continue reading "Button y img, botón de formulario con icono".

Bajo Windows tenemos algunas herramientas para probar nuestras hojas de estilo y el marcado que hemos generado. IETester MultipleIEs Sin embargo, las dos soluciones presentan algunos problemas. El primero de ellos en determinados casos no suele emular muy certeramente. El segundo no soporta Windows vista. Al menos no por ahora… El soporte javascript es bastante [...]

Continue reading "Virtualización de WinXP + IE6, probando nuestro CSS".