Front-end, Web Standards & Accessibility

Me he encontrado con un problema que parece afectar exclusivamente a Gmail y que ocurre al recibir un mail que contiene la etiqueta pre. La misión de esta etiqueta es pre-formatear su contenido, con lo cual mantiene en el texto los espacios en blanco, saltos de línea, etc. Y es justamente por esa razón por [...]

Continue reading "Etiqueta PRE, desbordamiento en gmail y solución con nl2br o white-space".

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…".

En la vieja escuela estábamos acostumbrados a identificar y definir cada abreviatura y acrónimo con intención de aportar más semántica a nuestro contenido. Usamos el atributo title con la versión textual completa, dentro de las etiquetas abbr y acronym, para explicar el término sin interrumpir el flujo del documento. Ejemplo de abreviatura – abbr <p><abbr [...]

Continue reading "Abreviaturas (abbr) VS. Acrónimos (acronym)".

Son como su propio nombre indica comentarios interpretados únicamente por Internet Explorer e incrustados en el código HTML, generalmente en el apartado HEAD y realizan su función únicamente si la condicional se cumple atendiendo al navegador y su versión. Este mecanismo fue “un invento” de Microsoft (Internet Explorer), que en númerosas ocasiones no han seguido [...]

Continue reading "Comentarios condicionales de Internet Explorer".

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”".

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".

En un proyecto sobre el que estoy trabajando observo que en el maravilloso mundo de IE6 no aparece bien el estilo para el menú de secciones… Intentare ilustrarlo con un ejemplo resumido. CSS del menú #nav li a.home { } #nav li a#current.home { } Internet Explorer 6 e inferiores recelan de los selectores combinados, [...]

Continue reading "Juntar identificador y clase en IE6".

Aunque con cierto retraso (20/10/09) me hago eco de esta noticia, y es que los XFORM ya han sido establecidos como recomendación por parte del W3C. Los formularios que usamos actualmente con HTML presentan un nivel de interacción algo pobre para las necesidades de hoy en día. Los sitios web han pasado de ser páginas [...]

Continue reading "XFORM pasa a ser recomendación".