Violetside











{noviembre 26, 2008}   Hacks ie6 – ie7 para css

Los hacks en las hojas de estilo a la hora de maquetar son una cosa poco recomendable, pero inevitable por las diferencias que existen a la hora de interpretar el código entre navegadores. Los 3 que normalmente se suelen tener mas en cuenta, hoy en dia y a la espera siempre de nuevas actualizaciones, son el Firefox 3 el Internet Explorer 6 y el Internet Explorer 7 y estos son los que vamos a intentar hackear con las recomendaciones de este artículo.

Existen varias maneras de cargar diferentes estilos dependiendo de cual sea el navegador que el usuario este utilizando para acceder a nuestra página, las dos que mejor funcionan son las siguientes:

Por un lado podemos tener 3 css diferentes, una por navegador, lo suyo es crear una css “buena” siguiendo los estándares de la w3c y en las demas meter solo los hacks para los estilos que den problemas, a estas 2 css que no son politicamente correctas las podemos llamar desde nuestro html con un “if”, para conseguir asi que al validar no se tengan en cuenta y solo revise la css ajustada a estándares, que normalmente es la que funciona 100% en Firefox.

Tambien podemos meter todos los hacks en la misma css, cosa que al menos a mi no me gusta demasiado porque es una manera de ensuciar la css que al final siempre acaba trayendo problemas, pero si no queda mas remedio y la validación no es una cosa imprescindible en nuestro proyecto podemos usar trucos como añadir un “_” o  un “*” antes del nombre del atributo para que solo vea ese atributo el navegador que nos interesa, por ejemplo de esta manera:

.clase{
margin:0px;
_margin:10px; (esto solo lo ve el ie6)
padding:0px;
*padding:10px (esto lo ven el ie6 y el ie7)
}

Si usamos este último sistema tenemos que tener en cuenta en que orden escribimos los atributos porque las css los navegadores las leen de arriba a abajo y el último que coloquemos será el que predomine sobre el resto, vamos que el orden de los factores en este caso si altera el producto😉



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

et cetera
A %d blogueros les gusta esto: