Compatibilidades y CSS

Son miles los articulos que tratan sobre css y los estandares, los problemas de compatibilidad, etc... pero vamos a explicar un poco a fondo el tema de la compatibilidad entre css y los navegadores.


Cuando te pones a hacer una nueva pagina web.. sea para una empresa, para ti, para un amigo o para quien sea, lo primero que has de plantearte es el diseño de la pagina, luego las caracteristicas de tu pagina web, si sera dinamica o estatica y que vas a usar para hacerla: HTML, XHTML, PHP, ... lo que esta claro es que hagas lo que hagas (si no quieres no, claro :P) debes hacer una pagina "portable", en el sentido de que si yo uso Mozilla 1.0, Netscape 6, IExplorer 5.5 u Opera 6 pueda verla igual que si uso Konqueror 3.2, Safari o IExplorer 6. Esto puede hacerse gracias a nuestros señores estandares, de los cuales se encarga W3C o World Wide Web Consortium (http://www.w3.org), el cual se encarga de crear directrices, herramientas y especificaciones cuya finalidad es llevar a la web a su maximo exponente. Podeis echar un vistazo a los 7 puntos de W3C aqui.

Y CSS que pinta en todo esto.. pues mucho, ya que sin CSS seria casi imposible hacer una pagina 100% portable para todos los navegadores. Para los que no saben que es CSS, CSS significa Cascade StyleSheets y nos proporciona una separacion de estilos en nuestro diseño, es decir, separa el estilo logico del estilo fisico o estructura del documento (codigo HTML). Con CSS, dotamos a nuestro documento HTML de clases e identificadores los cuales se detallan en la hoja de estilos, dejando al codigo HTML libre de propiedades en sus etiquetas, dando mas versatilidad y reusabilidad a nuestro codigo (Si tenemos 100 paginas iguales solo tenemos que cambiar el diseño en la hoja de estilos para cambiar toda la apariencia de esas 100 paginas).

Pero CSS tiene muchos problemas, o mas bien, los problemas los tiene Microsoft y Netscape con CSS :). La mala gestion de hojas de estilo de IExplorer o Netscape hacen que tengamos que preocuparnos demasiado de truquitos para que nuestra pagina web valide perfectamente en el validador de W3C (el que nos dice si nuestra pagina cumple los estandares o no). Y que trucos son esos, pues por ejemplo el uso de 2 tamaños (lo explico ahora), el uso de voice-family, nombrar las clases con html>body delante, ... no son trucos realmente, sino que simplemente dependiendo del navegador, reconoce mejor los tamaños, medidas, etc..

En el caso de Opera, Konqueror y Safari, el uso de html>body .nombredeclase se adapta mejor para las medidas y tamaños que el uso normal, al igual que para algunas versiones de Internet Explorer (<6). El uso de dos tamaños significa que cuando desarrollas una clase, le asignas una altura y una anchura, pues algunos navegadores (Opera por ej.) no parecen aplicarla y necesitamos usar una segunda especificacion de esa propiedad, por ejemplo, consideremos esta clase:


.hola {
width: 100px;
padding: 10px;
border: 10px;
}


Si estamos hablando de un navegador que cumpla los estandares, la distancia de un borde a otro seria de 140px (100px de ancho mas 40 de relleno) pero navegadores como IE5 no lo tratan asi y contarian 100px, sin contar el relleno, por lo que necesitamos un parche para este problema. Este problema se ha descrito como el Box Model Hack, del que se ha hablado muchas veces y el cual trata de que no todos los navegadores tienen los mismos parametros de referencias para trabajar con algunas de las propiedades y valores de las hojas de estilo. Si quieres saber mas sobre el box model hack visita el wiki de css-Discuss.

Para solucionar este problema tenemos varios "Hacks" los cuales no expondre, pero veremos algunos:

Caja en caja

El mismo nombre lo indica y el ejemplo es mas que ilustrativo:


div { width: 100px; }
div .i { padding: 1em; }

<div>
<div class="i">
Text
</div>
</div>


Este metodo funciona siempre, y el unico punto negativo que tiene es el tener que usar dos elementos div en el codigo HTML.

Simplified Box Model Hack (SBMH)

Este ejemplo trata de usar un bug en el escapado de propiedades, el cual solo es usado cuando el navegador no entiende el modelo de cajas.


div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}


La primera regla seria entendida por navegadores como Opera5, el cual entiende el modelo de cajas perfectamente. La siguiente regla con las propiedades escapadas seria ignorada por estos navegadores.

La primera propiedad escapada es para navegadores como IE5.X y la segunda propiedad escapada es para navegadores "escape friendly" como N6, Mozilla, Opera6, y IE6.

Ojo, si Netscape4 encontrase algun escape en la hoja de estilos, esta seria ignorada completamente, por lo que necesitariamos implementar un parche (Caio Hack), el cual se detalla aqui.

Tambien hay que señalar que las propiedades que se pueden escapar no han de empezar nunca por las letras a, b, c, d, e, f ya que sino, el navegadore las entenderia como codigo hexadecimal y puede pasar de todo :D. Esto significa que ninguna propiedad que empiece por esas letras puede ser "hackeada", por ejemplo, la propiedad height podra ser "hackeada" pero font-family nunca, ya que empieza por f y seria interpretado como codigo hexadecimal. Afortunadamente, las propiedades de altura y anchura y relleno (width, height y padding), las propiedades mas importantes de este "hack", no estan afectadas.

Espero os haya sido util este articulo.