Hubo un tiempo en que el desarrollo de diseño de sitios web se basaba totalmente en tablas. Muchos sitios hasta hoy son así, algunos por desconocer los beneficios de CSS (Cascading Style Sheets) y otros simplemente por usar herramientas que no sacan provecho de CSS.
Jeffrey Zeldman dice en su libro Diseño de sitios web compatibles, que el 99,9% de los sitios son obsoletos.
Por increíble que parezca, con el uso correcto de CSS se puede utilizar la mitad del ancho de banda para la transferencia de un sitio o incluso menos.
El secreto de este rendimiento es la separación de responsabilidades en tres:
- Estructura - HTML / XHTML
- Presentación - CSS
- Comportamiento - ECMAScript (JavaScript)
En realidad lo que ocurre es que el comportamiento (archivos .js) y la presentación (archivos .CSS) se almacenan en caché en el navegador del cliente, lo que hace una diferencia notable para tener en cuenta en el ancho de banda gastada, en la transferencia de información de un sitio . Las grandes empresas se han dado cuenta de esto y están adoptando esta estructura, cosechando los frutos de sus beneficios. Experimenten acceder a los siguientes sitios Web y mirar el código fuente: HappyCoq y Mozilla.
Para aprovechar las ventajas de CSS, lo que necesita saber son estos 10 consejos:
1. Donde consultar la especificación de CSS: aquí, y aquí también hasy mas cosas. Esa especificación y muchas otras de HTML, XML están en el sitio de World Wide Web Consortium, o simplemente W3C un sitio fundado en 1994 con el objetivo de discutir y definir los padrones utilizados por Internet, hoy más de 400 entidades participan de este proyecto.
2. Conocer los atributos mas utilizados: muchos de ellos son idénticos a los de HTML: width, background,border; mientras que otros son un poco diferentes, pero con un intuitivo nombre: font-size, font-family, otros yason comportamientos particulares de CSS: padding , float, margin. Un buen lugar para ver ejemplos de código aquí.
3. Conocer la lista de compatibilidad de los navegadores: es muy bueno trabajar con los navegadores actuales: IE7, Firefox3, Konqueror 3, Opera 9 y Safari 3. Algo mas antiguo que esta lista, como Netscape4, IE4 ~ 6, puede tener problemas porque CSS trabaja de manera incorrecta o no funciona. Compruebe esta lista para comprender mejor el problema.
4. Conocer los principales hacks: por el problema antes citado, podemos tener un comportamiento extraño en algunos navegadores que no soportan el 100% de la especificación CSS2. De ahí surgirán una serie de hacks para que CSS funcione en estos navegadores también.
5. Conozca la diferencia de DIV y TABLE: las personas antiguamente estaban acostumbrados a montar sitios Web con sólo TABLE, ahora se empieza a pasar a DIV, encontrando que es lo mismo, ten cuidado. Al contrario de una TABLE, una DIV puede invadir el espacio de otra DIV y comprometer completamente el diseño de su sitio.
6. Conocer el movimiento Tableless: Algunas personas consideran el uso de TABLE extremadamente obsoleto, definido todo el diseño del sitio por DIV, lo que es perfectamente posible, pero no es nada trivial. Conozca más acerca de ello en Tableless.com.br y en famosísimoCSS Zen Garden.
7. Elegir el DOCTYPE correcto: dependiendo del tipo que usted elija, su sitio podría ser renderizado mas rápido por los navegadores soportados. Este artículo ilustra las opciones más comunes, ante la duda opte por el tipo Transitional, que es más flexible que el tipo Strict.
8. Conozca las ventajas que CSS ofrece: además de ahorrar ancho de banda para la transferencia, tiene la ventaja de ofrecer un fácil mantenimiento de los contenidos del sitio Web, una vez que la estructura está lista (esta es la razón por la que, por ejemplo, Wordpress tiene tantos excelentes temas), y un número mucho mayor de opciones de diseño que HTML. Véa los temas creados en CSS en la galería de CSS Beauty.
9. Empieza a jugar con CSS3: varias mejoras están previstas en CSS3, donde se puede destacar las propiedades opacity y resize.
10. Combinando lo mejor de ambos mundos: el mundo perfecto no está compuesto enteramente de nuevas normas, simplemente lo mejor de cada uno. Salir codificando sólo en DIV puede ser interesante, pero puede dar mucho trabajo en el diseño de las columnas. En estos casos, utilice las tablas, pero deje las propiedades separadas en archivos CSS.
Existen pruebas que validan la compatibilidad de CSS de su navegador.
La más famosa de estas pruebas es ACID2 que pocos navegadores pueden pasar, en la actualidad la versión 3.0 de firefox pasó, aparte de WebKit (Safari), Opera y algunos otros. Ya existe un ACID3 enfocado al comportamiento más moderno de aplicaciones web (y que, por ahora, ningún navegador puede pasar en forma completa).
