Uninstallme

Hace cosa de un mes publicaba otra forma de limpiar flotaciones y explicaba las ventajas de este método respecto a otros que se basan en el uso de hacks y ponen en peligro la compatibilidad hacia adelante. Pues bien, podía ser todavía más simple e indoloro.

Código CSS para la clase “clearfix”

.clearfix:after{content: ""; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix{min-height: 0; height: 1%;}

Con el uso de min-height, atacamos a Internet Explorer 7 sin causar daños colaterales y con height 1% hacemos lo mismo con Explorer 6.

Demostración de clase “clearfix”.

Los rollovers de imágenes con javascript casi han pasado a la historia desde que podemos hacerlo de manera mucho más fácil y limpia con CSS, pero para los casos en los que, por la razón que sea, sea necesario que la imagen del rollover esté como elemento <img> en el código HTML, podemos conseguirlo utilizando sólo CSS.

El único requisito para que el rollover funcione en Internet Explorer 6, es que la imagen esté contenida en un enlace. En el caso de que la imagen sea un botón de tipo image, necesitaremos añadir una clase por Javascript, ya que Explorer 6 ignora el :hover sobre cualquier elemento que no sea un enlace.

El principal inconveniente de los rollovers con Javascript es que necesitamos dos imágenes para cada estado. Con esta técnica, usamos una sola imagen con sus dos estados, como lo haríamos con un rollover “normal” con CSS.

Imagen usada para el rollover:

La técnica se basa en conseguir un efecto “clip” mediante el uso de overflow: hidden. Para ello metemos la imagen en un elemento <span> al que damos el ancho y alto del área visible de cada estado de la imagen. En el ejemplo 22 píxeles. Damos display block y posición relativa para que Internet Explorer sea feliz (en otros navegadores no es necesaria la posición relativa)

Por último, damos al enlace en estado hover, posición relativa y una posición negativa igual a la altura de la imagen.  En este caso no es necesario dejar un margen en blanco entre ambos estados de la imagen para prevenir que al aumentar el tamaño de texto de la página se vea parte de la imagen para el estado hover, como ocurre con los navegadores que no hacen zoom (Firefox 2, Google Chrome, Internet Explorer 6) y los rollovers con CSS mediante imágenes de fondo, ya que que podremos aplicar dimensiones mediante CSS diréctamente a la imagen, permitiendo que se dimensione al aumentar el tamaño de texto.

El código HTML utilizado sería el siguiente:

<span class="img-rollover">
<a href="#"><img alt="A" src="boton-a.png" /></a>
</span>

Y el código CSS:

span.img-rollover{ width: 22px; height: 22px; overflow: hidden; display: block; position: relative; }
span.img-rollover a:hover{ top: -22px; position: relative;}

El resultado:

Técnica inspirada en el botón de buscar de The Man in Blue

Los iconos como enlaces en páginas web pueden ofrecer algunas ventajas. Dependiendo de las características del icono y del perfil del usuario, pueden ser asociados rapidamente con la acción o elemento que representan, además de ayudar a aprovechar espacios en pantalla o concentrar en un área una serie de elementos relacionados entre sí para que puedan ser localizados visualmente con facilidad. Un ejemplo de esto último podriá ser un grupo de acciones relacionadas con el documento como “enviar por correo” o “imprimir”.

Sin embargo, a la hora de codificarlos intentando ofrecer una solución accesible para todo tipo de usuarios, presentan algún que otro problema.

Continúa en "Iconos como enlaces: problemas y soluciones"

Hace unos meses escribía una técnica para limpiar flotaciones en la que se usaba la propiedad display: inline-block para Internet Explorer 7. El problema de esta técnica es que se basa en un error de interpretación de este valor de la propiedad display en IE 7, por lo que pone en peligro la compatibilidad hacia adelante y obliga a usar filtros o hacks para este navegador en concreto.

Continúa en "Limpiar flotaciones: otro método más"

Mootools es una librería Javascript muy parecida a Prototype pero que permite crear efectos de movimiento, opacidad, color, etc. sin necesidad de usar una librería adicional como Scriptaculous. Su peso comprimida es de 60Kb y tiene una muy buena documentación también disponible offline. Además es una de las librerías Javascript que podemos encontrar en las librerías Ajax de Google.

Para crear efectos de transición con Mootools usamos la clase Fx.

Continúa en "Crear efectos de transición con Mootools"

Con los otros me refiero a los navegadores que no son Internet Explorer.

El código contenido en el siguiente comentario condicional es ignorado por todas las versiones de Explorer:

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/w3c-compatible.css" />
<!--<![endif]-->

Continúa en "Hojas de estilo condicionales para “los otros”"

Dejo una técnica para conseguir que un elemento <a> mantenga un ancho mínimo en Internet Explorer 6. Explorer 6 no soporta la propiedad min-width, como otras muchas cosas, por lo que una vez más, hay que buscar una forma más retorcida de hacer lo que en otros navegadores se consigue con una sola declaración CSS.

Continúa en "Enlaces con un ancho mínimo en Internet Explorer 6"

Hacía unos meses que me rondaba la cabeza la idea de crear una css para chequear problemas de accesibilidad. La idea surgió al ver esta sencilla técnica para poner un borde a todos los elementos de un html (a modo de debugging) en Snipplr utilizando un código tan simple como este:

Continúa en "Diagnosticar problemas de accesibilidad utilizando una CSS de usuario"

Acabo de encontrar en Smashing Magazine una serie de consejos para mejorar la legibilidad de nuestras hojas de estilo. Algunos de ellos, como crear una tabla de contenidos, pueden ser muy útiles en css’s para sitios muy grandes o mantenidos por varias personas, aunque quizá un poco desproporcionados para hojas de estilo pequeñas, como por ejemplo, la que puede utilizar un blog.

Continúa en "Los colores a mano en tu CSS"

La forma más accesible de ocultar un elemento en pantalla que sí debe estar disponible para otros medios, es aplicándole a ese elemento posición absoluta y sacándolo fuera del área visible de la pantalla mediante un valor negativo (a la iquierda) bastante exagerado, por ejemplo, -99999em.

Continúa en "Ocultar el texto de la etiqueta legend en Firefox"