He vuelto a cambiar de look… sí, lo sé, soy muy inquieta.
Separar el markup (html) del diseño y layout para una web es cada vez mñas popular, ya que permite que éste sea modificado aún cuando no tenemos acceso al código de la estructura de la página, o bien por comodidad no queremos estar urgando en él. La idea es que quiero ir recopilando varios css diferentes para un mismo código html y luego poder cambiar de uno a otro con un simple clic en un link. Así el navegante podría elegir poner el que le guste más. Algo como ocurre en css Zen garden, pero más cutre. Esto lo hago por puro placer y para practicar un poquillo, no por nada más.
Fahrner Image Replacement:
Cada vez que hago un diseño me gusta probar algo nuevo. En el anterior (el de la fruta) utilicé por primera vez (por primera vez después de saber cómo se llama, porque antes ya había hecho uso de ello) el sistema FIR (Fahrner Image Replacement), el más sencillo, antiguo y conocido método de mejorar el aspecto de una web mediante imágenes reemplazando cierto texto. En ocasiones no podemos pretender que el navegante tenga instalada la fuente que queremos usar, y otras veces simplemente nos gusta más un dibujo en lugar de una palabra… así que es esencial usar imágenes. Se trata de un método cada vez más extendido pues la web ya no se basa en una presentación directa de información, sino en una estrategia comercial en la que el diseño juega un papel incluso más importante que el contenido en muchas webs que buscan atraer clientes. Pero FIR es fácil, se engloba el titular que queremos reemplazar en un span que se ocultará a la vez la ‘caja’ que lo contiene tiene de fondo la imagen.
Por ejemplo, en lugar de:
<h3>Titular que no queremos que se vea</h3>
escribimos:
<h3 id="titulo" ><span>Titular que no queremos que se vea</span></h3>
y luego en el css sólo habría que añadir:
#titulo{
width: Xpx;
height:Ypx;
background: transparent url("url_de_la_imagen.png") top left no-repeat;
}
(donde X es la anchura en píxels e Y la altura en píxels) y, dado el caracter jeráquico de css:
#titulo span{
display:none;
}
Si olvidamos ocultar el span interior, el texto solapará la imagen, lógicamente. Según la especificación W3C:
This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the ‘display’ property on the descendants.
Please note that a display of ‘none’ does not create an invisible box; it creates no box at all.
Es decir, el contendor con un display a ‘none’ físicamente desaparece, es ignorado (que no es lo mismo que visibility:hidden que mantiene el contenedor -transparente- en la estructura del documento).
En teoría este método es perfecto pues nuestra página presentaría un bonito dibujo o una tipografía interesante a la vez que es indexada por Google y otros robots, y tampoco supondría un problema para los screen readers (los navegadores para ciegos). Ahora, en la realidad este método presenta muchas deficiencias, aunque sopesándolas lo he vuelto a escoger para esta nueva imagen.
Screen readers:
En principio, los screen readers sí renderizan el atributo:
display:none;
de forma que el texto quedaría oculto y al no aparecer en pantalla no quedaría constancia de él. En principio esto tiene solucón. Basta con especificar el medio en el cual será renderizado este css, “screen”, y así dispositivos como PDAs o screen readers no esconderán el texto.
<style type="text/css" media="screen">@import url(style.css); </style>
El tema aquí es que aún así muchos screen readers hacen caso omiso de nuestros media types, sobretodo cuando en lugar de importar el css (como en el ejemplo de arriba), se “linka” con la etiqueta <link>
En ese caso sí se renderizaría la instruccion de ocultar y no podrían acceder al texto… así que para curarse en salud, cuando se use FIR es mejor importar.
Traducciones:
FIR también resulta problemático a la hora de traducir una página, pues las imágenes no se traducirán. Esto se puede solventar presentando varios css y un script que, según el idioma, escoja uno u otro. Es interesante anotar que para el futuro, cuando el soporte por parte de los navegadores sea óptimo, ya no supondrá un problema pues CSS-2 incluye una pseudo clase llamada lang(n) donde n puede ser alguna de las variantes que representan los idiomas. Así pues: h3:lang(fr){ url(blabla) } mostraría la imagen únicamente cuando la página esté servida en francés.
Bloqueo de imágenes:
Éste es el problema más obvio, y el más chungo: que el navegador tenga el css activado, pero las imágenes externas desactivadas. De tener el css desactivado no habría problema porque con FIR el texto original en el codigo sigue existiendo, y si el span del primer ejemplo no recibe la instrucción de ocultarse, se mostrará tal cual, sin formato alguno. Pero para este caso, raro pero existe, no hay solución.
Por encima de todo los puristas rechazarían el hecho de que se usan spans innecesarios (añadidos para la ocasión) en el codigo estructural y, según la definición y los estándares, éste debe contener sólo lo necesario y no poseer contenedores vacíos.
Alternativas al FIR:
Para solventar esto están saliendo nuevas técnicas, algunas más ofuscadas como la de Dave Hyatt que propone XBL, y otras mucho más sencillas que se posicionan como grandes alternativas en cuanto consigan solventar lo del “Css ON, imágenes OFF” como la que propusieron Seamus Leahy y Stuart Langridge (LIR -Leahy/Langridge Image Replacement) de forma individual, que consistía en aplicar un overflow: hidden; y un height: 0; que, junto con paddings apropiados para darle alto y ancho a la imagen, esconderia el texto sin necesidad de un span adicional. Esto no es más que una particularización del método de Dead Centre sobre alineamiento en vertical que ya explicaré en otro momento. Mike Rundle propuso usar un text-ident para desplazar el texto más allá de los márgenes de la página, donde ya no fuera visibile pero siguiera ahí, y por último hay un mñetodo de Peter Stanicek y Tom Gilder que consiste en cubrir literalmente el texto con la imagen de forma que si ésta no se muestra el texto sigue ahí, pero no solventa el problema de tener un span de más.
Para saber más sobre este tema Facts and Opinions About FIR by Joe Clark y In Defense of FIR by David Shea.
Aquí hay links a otros temas de interés sobre los que escribiré si me da la gana, en otro momento: los famosísimos menús desplegables suckerfish, el Box Model Hack (y el maldito Box Model bug del IE), la navegación con tabs, alineación vertical con css (y el link a Dead Centre de antes)…
¿¿Aburrido??
A mí me encanta pasar las noches de sábados con estas cosillas… 
y además me aclaro las ideas.
EDIT: Otro método que leo a través de la lista de correo de css es el MIR (Malarkey Image Replacement) que consiste en asignar al texto un letter-spacing: -1000em; y que ayuda a solventar el problema de una barra de scroll larguísima que aparece en ocasiones cuando se usa el text-indent. Nuevamente con este método ya no se necesitan spans adicionales. 
El FIR también es un filtro digital, muy usado en teoría de señal: Finite Impulse Response. Acostumbrate mucho más a esta definición, que falta te va a hacer en los próximos años, al menos si quieres aprobar TDS y sus derivados :p
jejeje tomo nota
Yo también uso ese método para reemplazar texto por imágenes… Es una putada que tenga que ser con SPANs, pero no he encontrado otra cosa realmente mejor
PD: Argh, filtros FIR… Me suenan de cuando estudié Informática Musical
Pues se supone que el LIR, lo de un height a 0 y un overflow a hidden… luego le pones paddings (negativos supongo) para el tamaño real de la imagen. Pero no lo he probado todavía.
Tb podrías mirar el MIR (Markeley Image Replacement): Aquí hay info: http://www.stuffandnonsense.co.uk/archives/examples/malarkey-method-example.html
Voy a editar el artículo.
Com t’ho curres noia. Felicitats pel post : )