Una vez que definiste las versiones de internet explorer a las que quieres dar soporte y revisaste en cada una de esas versiones las inconsistencias, ya tienes definidas las tareas a realizar.
Para corregir las inconsistencias puedes utilizar dos técnicas:
- Comentarios Condicionales.
- Hacks en CSS.
Comentarios condicionales
Son comentarios en HTML que incluyen una expresión (condición). El navegador o los navegadores que cumplan con la condición van a interpretar el contenido del comentario. Dentro del comentario se puede incluir marcado y contenido en html. Esto incluye incrustar o utilizar hojas de estilo externas, así como incrustar o utilizar código de JavaScript.
Beneficios
Los cambios pueden aplicarse a una o un conjunto de versiones de internet explorer. Por ejemplo realizar cambios que afecten únicamente a la versión 6 de internet explorer o realizar cambios que afecten a las versiones de internet explorer menores o igual a la 8 (incluye las versiones 6, 7 y 8).
Desventajas
Más código: El marcado adicional puede hacer el contenido más complicado para leer (sobre todo cuando se utiliza estilo o código incrustado).
Archivos extra (hojas de estilo o JavaScript): Una corrección puede ir en uno, dos o más archivos externos. Las versiones de internet explorer que utilicen estos archivos van a tener cierto impacto en el desempeño de la página.
Operadores para los comentarios condicionales
| Operador | Funcionalidad | Descripción |
| ! | Negación | Al utilizar la negación, el comentario condicional va a ser válido para la versión o las versiones de internet explorer que no estén especificadas en la condición. |
| lt | Menor que | Al utilizar menor que, el comentario condicional va a ser válido para la versión o las versiones de internet explorer menores (anteriores) que la versión especificada en la condición. |
| lte | Menor o igual que | Al utilizar menor o igual que, el comentario condicional va a ser válido para la versión o las versiones de internet explorer menores (anteriores) a la versión especificada en la condición pero aquí también se toma en cuenta y se incluye la versión especificada. |
| gt | Mayor que | Al utilizar mayor que, el comentario condicional va a ser válido para la versión o las versiones de internet explorer superiores (más recientes) que la versión especificada en la condición. |
| gte | Mayor o igual que | Al utilizar mayor o igual que, el comentario condicional va a ser válido para la versión o las versiones de internet explorer superiores (más recientes) a la versión especificada en la condición pero aquí también se toma en cuenta y se incluye la versión especificada. |
Ejemplo
| Referencia | Descripción |
|
Comentario condicional que solo aplica a la versión 6 de internet explorer. |
|
Comentario condicional que incluye la versión 6 de internet explorer además de las versiones anteriores. |
|
Comentario condicional que incluye la versión 7 de internet explorer además de las versiones superiores. |
|
En este caso la regla del comentario condicional se aplica a todas las versiones de internet explorer. |
|
En este caso la regla del comentario condicional se aplica a todos los navegadroes que no sean internet explorer. |
Nota:
El contenido de los comentarios condicionales únicamente puede ser aplicado hasta la versión 9 de internet explorer. La versión 10 en modo estándar no los analiza. – About conditional comments (Internet Explorer).
En este caso, si se va a modificar el estilo, ya sea mediante una hoja de estilo externa o incrustar algunas reglas de estilo con la etiqueta style hay que incluir el comentario condicional después de que se encuentre definido el estilo principal. De esta manera el estilo no se va a sobrescribir y únicamente los navegadores que cumplan con la condición del comentario van a incorporar los cambios.
CSS hacks
En este contexto un hack de css (css hack) se refiere a escribir las reglas de CSS de formas no convencionales. Al no ser convencionales solo algunos navegadores las van a interpretar e implementar.
Beneficios:
Crear una regla que pueda ser interpretada únicamente por alguna versión de internet explorer – o de otro(s) navegador(es) pero estamos enfocándonos a IE en este momento – .
No se necesita tener más marcado (nodos en html) o utilizar archivos extras (hojas de estilo o scripts).
Desventajas
Sintaxis no común. Cada regla puede tener diferente sintaxis que funciona en una versión particular de internet explorer.
Entender cómo funciona el hack CSS para poder adaptarlo a lo que estemos ajustando.
Referencia – Algunos hacks de CSS para IE
/*
Sintaxis: * html <selector> {}
Descripción: Selecciona los nodos de un documento html definidos
por el <selector>
Únicamente se va a aplicar a internet explorer 6 y anteriores.
*/
* html div {
background: #f2f2f2;
}
/*
Sintaxis: _<propiedad>: valor
Descripción: Aplica el valor a la propiedad, únicamente funciona
en internet explorer 6.
*/
p {
color: #151515;
_color: #151515;
}
/*
Sintaxis: *<propiedad>: valor
Descripción: Aplica el valor a la propiedad, únicamente funciona
en internet explorer 7 (y anteriores).
*/
p {
color: #151515;
*color: #151515;
}
/*
Sintaxis: <reglas-css>\0/;
Descripción: Aplica para internet explorer 7 y 8. Debe de ir al final de todas
las reglas.
*/
p {
color: #151515\0/;
} Estos fueron unos hacks en css muy generales. Si quieres probar más hacks (css y js) para diferentes versiones de diferentes navegadores visita Browser Hacks.
Otros acercamientos
En Octubre del 2008 Paul Irish escribió en su blog una publicación Hojas de estilo condicionales vs hacks en css – ninguno.
Ahí utiliza los comentarios condicionales para asignar una clase a la etiqueta html dependiendo de la versión de explorer que visite el sitio. De esta manera se pueden hacer ajustes particulares utilizando la cascada de estilos sin necesidad de tener hacks en CSS ni hojas de estilo externas.
Dentro de la publicación se menciona que en Mayo del 2010 Patrick O’Neill extendió al asignar diferentes clases a la etiqueta body – improved-internet-explorer-targeting-through-body-classes – de esta manera las reglas de css pueden quedar más claras.
Por último
Una vez entendiendo cómo funcionan los comentarios condicionales, los hack en CSS, y con la ayuda de las herramientas cuentas con lo básico para poder ajustar la visualización de tu sitio en alguna versión de internet explorer.