Inherit no Internet Explorer
Postado por: Pedro Rogério em
O que é Inherit?
De acordo com as especificações das CSS 2.1, inherit pode ser definido como:
É uma característica das CSS ao qual podemos definir herança entre os estilos, suportada por todas as propriedades CSS.
Se por exemplo, se definirmos que nossa tag de título h1 tenha os seguintes estilos:
h1{
color:black;
padding:10px;
}
E logo após definirmos os seguintes estilos para um link ou qualquer elemento que tenha como pai o h1, dessa forma:
h1 a {
color:inherit;
}
A nossa tag a irá herdar a cor que foi definida em seu elemento pai, que no exemplo foi definido como preto, conseguiram entender agora o significado de inherit em CSS? Curiosamente inherit não funciona no Internet Explorer 7 e versões anteriores, não sei em sua nova versão, a 8, mas existe uma forma não muito ortodoxa de fazer inherit funcionar no Internet Explorer.
Essa solução requer o uso de CSS Expressions, onde, mediante uma expressão, a cor do elemento pai, caso seja encontrada, será adicionada ao elemento filho, utilizando um operador ternário:
h1 a{
color:expression(
this.parentNode.currentStyle.color ?
this.parentNode.currentStyle.color :
'black');
;
}
Evite utilizar CSS Expressions, só as utilize em último caso, pois elas podem interferir na performance de seu site.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Meu senhor, isso é muito pra pouca coisa. Com certeza é bom evitar ao máximo o uso de Expressions no CSS. Nesse caso apenas um simples “h1 a { color: black; }” resolve. O único último caso qual conheço que a solução menos pior para usar Expressions, é de quando precisa de Max e min width no IE 6.
Bom, fora de contexto, esta solução me parece “um canhão para matar uma mosca”. Mas, é uma possível solução – vai depender do caso (nunca precisei disso).
No caso de cores e imagens, normalmente eu uso um arquivo, ou area dentro de um CSS, apenas para definição deles, sendo assim, qualquer “cor diferente” que aparecer eu já sei onde mexer. Evita o uso de expressões dentro do css – que eu acho feio (soa como uma gambiarra).
No exemplo do texto poderia até ser:
h1{
padding:10px;
}
h1, h1 a {
color : black;
}
Bem mais simples e sem firulas.
Essa é nova para mim, por tanto vale apena comentar depois se só ficar lendo pelo Liferea xD
Parabéns;
Abraço.
Num caso desses a minha postura padrão é: ainda não.
Acho que o foco não é usar Expressions no H1 como o pessoal falou, e sim como utilizar o Expressions.
valeu Pedro!!!
Acho que o foco, na verdade, é evitar os Expressions ao máximo.
Concordo com o Gustavo e acho que esse caso é muita coisa para um recurso tão fraco… o inherit é útil em determinadas situações bem específicas, então pra mim não faz sentido.
Interessante conteúdo, mas poderia colocar simplesmente a cor, assim evitando possíveis problemas, ou fazer como citou o José Luiz.
Parabéns.
Na versão 8 do IEeca! o inherit já funciona.
abs
Cara, se você fizer isso:
h1 {
color: black;
}
Tudo que você colocar depois do h1 já será black.
tipo:
h1 b {
padding: 10px;
}
h1 a {
text-decoration:underline;
}
Tudo que você colocar depois do h1 será black!
Por favor teste o que você acabou de falar Diogo e veja se o link fica preto.
Tá ai, não vejo a necessidade do uso do inherit.
Muito bom!
Não sabia da existência desta “opção” CSS expression.
Talvez o exemplo tenha sido um pouco exagerado. Há outras soluções para contornar o problema levantado.
Pergunto: o uso de CSS expression pode contornar o problema, por exemplo, da incompatibilidade do IE com position:fixed?
Ixi, a galera postou comentários criticando o uso, mas ele está apenas explicando o que é o inherit e as expressões CSS.
Parabéns, Pedro, sanou minhas dúvidas.
Diogo, como disse o Gustavo Krause, seu link fica da cor padrão de link, meu rapaz. O link não herda cor do h1.
Grande abraço a todos.
Mas o texto esta simplesmente falando do Inherit e não se ele é mais fácil ou mais difícil, se deve ou não ser usado.
Esse tipo de informação é mesmo muito importante para quem está iniciando.
Obrigado.