CSS hacks para Internet Explorer 6 y 7

·

En muchas ocasiones nos encontramos que necesitamos aplicar algún tipo de estilo específico a Internet Explorer 6 o 7, que son los navegadores que menos funcionalidades CSS soportan pero que aún tienen una cantidad elevada de usuarios.

En estos casos, y debido a algunos errores en el funcionamiento del navegador, tenemos la posibilidad de ejecutar un pequeño hack que no afecta al resto.

El sistema es sencillo. Internet Explorer tiene un fallo y es que los atributos de los CSS permiten los símbolos «*» y «_» delante. Tomando de ejemplo este código a continuación, podemos ver algunos detalles:

.fondo {
  background: Green; /* Todos los navegadores */
  *background: Yellow; /* Sólo Explorer 6 y 7 */
  _background: Red; /* Sólo Explorer 6 */
}

¿Qué significaría esto? Pues que, todos los navegadores excepto Internet Explorer sólo leerían la primera línea, que es la única correcta. En el caso de Internet Explorer 8, también sólo leería la primera (las otras dos ya no, porque son erróneas). En el caso de Internet Explorer 7, como lee en orden y prima la última cosa correcta, de las 3 líneas leería hasta la segunda, porque el 7 no entiende la tercera, claro está.

En el caso de Explorer 6 es bastante similar… va leyendo en orden, y como entiende las 3 líneas, se queda con la tercera «porque es la última»… De esta forma, si queremos jugar con algunos pequeños hacks para Internet Explorer 6, 7 y 8 podemos hacerlo mediante este curioso sistema (gracias a los fallos que llevan las versiones anteriores)…

Comments

Una respuesta a «CSS hacks para Internet Explorer 6 y 7»

  1. Avatar de remora

    No es nada aconsejable utilizar estos hacks directamente en el css, ya que pueden producir errores inesperados en otros navegadores, no validan y añaden complejidad al mantenimiento de la página. La mejor manera es utilizar un css adicional ajustando las propiedades para estas versiones de Explorer y utilizar los comentarios condicionales.

    Este css sólo se cargará en versiones 6 y anteriores de Explorer, sobreescribiendo las propiedades del css general. Más info:

    http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *