Cómo no usar más iframe
Estuvieron de moda. Fueron la sensación. Pero como muchas otras etiquetas, perdieron su reinado dado a que no eran accesibles y mal indexado por los buscadores. Pero no totalmente, ya que suelen ser bastante útiles para refrescar datos dinámicos, sin tener que hacer un reload del sitio completo. ¿Te suena esta teoría de algún lugar? ¿Quizás de [AJAX][1]? Esa sigla tan de moda y que vende más que detergente o equipo de fútbol holandés, puede utilizar 2 recursos para realizar sus consultas a servidor asincrónicamente. Una, es el objeto XMLHTTPRequest (propietario de Microsoft); la otra, es IFrame. Esas ventanas modales ([lightbox, greybox, thickbox][2]) suelen utilizar iframe‘s para abrir otros contenidos dentro de la misma página, sin tener que volver a cargarla, evitando también el ya obsoleto popup. Así que no estaba tan muerta del todo esta etiqueta…
Bueno, pero la idea es evitar su uso dentro de contenidos, para así impedir la limitada acccesibilidad que nos entrega (no todos los browsers lo interpretan) y que sea indexado separadamente por los buscadores (así como ocurre con los <frame>, que tienen la misma lógica). Mediante CSS lograremos el mismo fin, el de poder diagramar un espacio donde el contenido fluya a través de scroll vertical. Pero todo dentro de la misma página.
El HTML no será nada distinto a un bloque de texto cualquiera, soportado por un A través de CSS veremos reales cambios. Primero, al igual que en la etiqueta , definiremos alto y ancho fijo. Todo lo que se salga de ese alto será absorbido por una elegante barra de scroll, la que será mostrada mediante la propiedad overflow: scroll; [Ver ejemplo 1][3]{.verejemplo} Eso es todo. Muy simple. Ahora, existe otra propiedad CSS no muy difundida que es overflow-x: hidden; Con ella, lograremos que desaparezca la barra horizontal de scroll, o la vertical con overflow-y: hidden; Pero esta propiedad no valida en CSS2.1, sólo lo hará con CSS3, pero felizmente es soportada por todos los browsers importantes exceptuando Opera (que es un muy importante browser). Una lástima, pero la realidad es que ¡sí es soportado por IE6! ¡¡A celebrar!! [Ver ejemplo final][4]{.verejemplo} [1]: http://www.csslab.cl/2005/11/15/ajax-live/ “Enlace en CSSLab “AJAX live!””
[2]: http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/ “Enlace en CSSLab “JavaScript, Toolkit y demases””
[3]: http://www.csslab.cl/ejemplos/iframe/01.html “Enlace en CSSLab a “ver ejemplo 1"”
[4]: http://www.csslab.cl/ejemplos/iframe/final.html “Enlace en CSSLab “ver ejemplo final””<div id="contenido_scroll"><br />
<p>Morbi non erat non ipsum pharetra....</p><br />
<p>Pellentesque habitant morbi tristique.....</p><br />
</div>
#contenido_scroll {<br />
width: 300px;<br />
height: 200px;<br />
overflow: scroll; <br />
}