En febrero de este año, Eric Meyer nos recordaba la posibilidad de utilizar valores numéricos sin unidad con la propiedad line-height de CSS.
A pesar de los errores que da el (precario) validador del W3C, es una solución perfectamente estándar pero parece que algunas versiones antiguas del motor de render Gecko para Mac no saben como interpretar estos valores sin unidad. Así lo apunta Roger Johansson.
Los navegadores afectados son Mozilla en todas sus versiones pero no SeaMonkey y todas las versiones de Firefox anteriores a la 1.0.8, siempre en Mac. Tenéis toda la información necesaria para reproducir el bug en el post de Roger, además de una captura de pantalla del problema para todos los que no tenemos a mano un Mac.
Habitualmente, cuando diseñamos nuestras páginas con XHTML y CSS tendemos a sustituir las
típicas líneas separadoras horizontales <hr> con algún estilo aplicado a un div (border-bottom por ejemplo). Es una práctica correcta e incluso recomendable pero debemos recordar que, cuando un usuario no visualiza la página con la hoja de estilo, toda referencia a esta división desaparece. En la mayoría de casos esto no tiene mayor importancia ya que las divisiones son estéticas pero cuando tu contenido precisa de esas divisiones para ser comprendido no deberías privar a usuarios de navegadores de texto o lectores de pantalla de esa ayuda.
(más…)
Ya hemos hablado en otras ocasiones de aplicaciones web que nos permiten comparar tipografías en pantalla. Sin duda son de gran utilidad para hacer experimentos.
Font Tester va un paso más allá, además de dejarnos comparar hasta tres tipos de letra simultáneamente, nos permite agregarles estilos CSS y, una vez conseguido el estilo deseado, nos permite copiarlo para pegarlo directamente en nuestras hojas de estilo. Sin duda podrá ahorrarnos mucho tiempo comprobando como afectarán a nuestro texto las diferentes propiedades de CSS para tipografías. Además, por si no era suficiente, incluye un listado clickable de entidades (x)html para que las introduzcamos comodamente en nuestras pruebas.
Font Tester: http://www.fonttester.com
Via Download Squad
En Blogging Pro han hecho un test a cuatro conocidos compresores de CSS: CSS Optimizer, Icey’s CSS Compressor, Flumpcakes CSS Optimiser y CleanCSS.
La prueba consistió en pasar por ellos las hojas de estilo de 6 archiconocidos sitios: Digg, Slashdot, Filmsy, iBegin, Download.com y ESPN.
Los resultados han sido realmente sorprendentes, concluyendose que el Icey’s CSS Compressor es el que consigue mayor compresión y menor tasa de errores, seguido por CleanCSS (que yo pensaba sería claro ganador), CSS Optmizer y, por último, Flumpcake CSS Optimiser.
El artículo completo, en inglés, con tablas de resultados y explicaciones lo encontraréis en CSS Optimization: Make your Site Load Faster for Free
El mes pasado en Intenta, se nos apuntaba un truco para maquetar nuestras páginas. Colocar una retícula como fondo, una solución simple pero eficaz para comprobar esas diferencias entre navegadores en nuestros diseños.
A pesar de ser una solución inteligente, para muchos es un incordio ir modificando el css cada vez que haya que comprobar algo, por eso Andy Budd ha creado un bookmarlet que, con un simple click aplica la rejilla a las páginas.
Las propiedades min-width y min-height nos permiten establecer un tamaño mínimo para el ancho y el alto de una capa u objeto, respectivamente. Esto tiene sentido en los navegadores más estrictos donde width y height son valores exactos para la anchura y altura pero cuando mostramos la página en Internet Explorer suceden cosas “raras”:
En aNieto2k se ha publicado hoy un enlace a un hack que nos ayudará a solucionar este problema, nada que no pudiésemos hacer ya con otros trucos de los que ya hemos hablado, no obstante es interesante y bastante limpio para ser un hack: Min-Height Fast Hack por Dustin Diaz
selector {
min-height:500px;
height:auto !important;
height:500px;
}Como el Explorer no entiende la marca !important, la ignora y continua tomando valores. Por tanto funcionará hasta que se arregle el fallo en versiones nuevas pero esperemos que llegados a ese momento también funcione min-height.
Supongo que no hace falta decirlo pero: también funciona con min-width
Hace tiempo llegó a portada de digg un artículo, del que se hicieron eco algunos blogs como Sentido Web, que hablaba de cómo dar estilo a los checkboxes y radio buttons de los formularios. Como viene siendo habitual, la mayor pega de este método es que no funciona en Internet Explorer.
Si quieres dar estilo a los radio buttons y checkbox de tus formularios, para todos los navegadores con javascript activado, prueba la técnica de Chris Erwin.
Por medio de Javascript se ocultan los botones y se le da estilo a la etiqueta label.
El formulario sigue recogiendo los datos normalmente ya que es la propia etiqueta label la que activa el control correspondiente.
Y si el Javascript no está activado, no se ocultarán los controles y el formulario se presentará como un formulario normal, totalmente funcional.
Su implementación es muy sencilla, tenéis instrucciones detalladas en la página del autor.
Via Intenta descubro esta colección de enlaces útiles para CSS. Está dividida por categorías: herramientas, generadores de layouts…
CSS Tools: http://www.soxiam.com/Notes/CSSTools
Hace ya algo os había comentado la existencia de HTML Slidy, un sistema bastante simple para generar presentaciones tipo Power Point con XHTML, CSS y Javascript que se pueden reproducir en cualquier navegador.
S5 es un sistema similar, creado por Eric Meyer, que cuenta con bastante más documentación y ayuda que HTML Slidy, además de existir varios themes para escoger, más cómodo imposible.
Una de las “novedosas novedades” del Internet Explorer 7 es el soporte a la transparencia de los PNG, ¡por fin! No obstante, seguro que aún nos quedan algunos años de versiones anteriores que no tragan bien con las transparencias.
Para solucionar este “pequeño” inconveniente existen algunos trucos, unos sirven para unos casos , otros para otros.
(más…)
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
