Inherit en CSS con Internet Explorer

Como siempre, tengo la manía de hacer todas mis aplicaciones Web en Firefox y luego comprobarlas en Internet Explorer.

Cual ha sido mi sorpresa cuando al ejecutarla en este curioso navegador muchos de los enlaces no tenían el color adecuado, en vez de ello tenían el típico azul como si no se hubiera definido ninguno.

Después de un rato buscando la razón me di cuenta de que Internet Explorer 7 y anteriores no soportan la propiedad de CSS inherit.

Antes de mostrar una posible solución voy a explicar qué es esta propiedad.

¿Qué es inherit?

Inherit es una característica de CSS mediante la cual podemos definir herencia entre los estilos. Por ejemplo, si declaramos una cabecera de la siguiente manera

h1{
   color:black
   padding:10px;
}

Y luego queremos definir las características para el enlace lo haríamos de la siguiente manera

h1 a {
   color:inherit;
}

De esta manera le estamos diciendo que el color para el enlace lo herede del elemento padre, h1, el color black. Esto está genial cuando tenemos un montón de propiedades, si tuviéramos que cambiar una por una el color sería un poco tedioso, de esta manera con cambiarlo en el padre quedaría resuelto.

Pero no todo iba a ser tan bonito, Internet Explorer 7 y anteriores no soportan esta propiedad, tengo que suponer que la versión 8 si.

¿Cómo simular inherit en Internet Explorer?

Bueno, esta solución un poco casera requiere de el uso de expresiones, por lo que es muy posible que al ejecutar la página aparezca la típica barra amarilla de “Peligro, la página está intentando ejecutar código”.

Básicamente lo que se puede hacer es recoger mediante una expresión el color del elemento padre, en el caso de que no lo encuentre, podremos poner uno por defecto utilizando el operador ternario.

h1 a{
   color:expression(
    this.parentNode.currentStyle.color ?
    this.parentNode.currentStyle.color :
    'black');
;
}