Suporte do CSS3 para Internet Explorer 6, 7 e 8

O que é isto

IE-CSS3 é um script para prover suporte para o Internet Explorer para alguns estilos disponíveis com o padrão CSS3.

Como ele trabalha

Se você estiver vendo esta página no Internet Explorer, alguns dos elementos foram reconstruidos pelo script em VML (Vector Markup Language), uma linguagem específica para o IE para desenho vetorial. VML suporta coisas que os IE's não renderizam como cantos arredondados e efeito blur.

Como usá-lo

Apenas adicione os estilos CSS como você faz normalmente, mas também inclua uma nova linha:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari e Chrome */
  border-radius: 15px; /* Opera 10.5+, outros navegadores recentes, e agora também Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, outros navegadores recentes, e IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* Isto faz o IE chamar o script em todos elementos com esta classe */
}

Problemas e Soluções

As URL's informadas em behavior: url(...) precisam ser relativas ao diretório atual assim como o estilo background-image: url(...) por exemplo, mas a Microsoft decidiu ignorar as normas e torná-los aqui em relação à raiz da página. Então behavior: url(ie-css3.htc) funcionará se ie-css3.htc estiver na raiz do site.

Você provavelmente vai ter problemas com o z-index, especialmente se a incorporação de um elemento IE-CSS3 ativada dentro do outro. Há duas soluções simples:

Às vezes, um elemento IE-CSS3 irá aparecer em uma posição ligeiramente diferente do elemento original intacta. Pode haver algumas razões para isso:

Estilos e seus status

Estilo Como trabalha O que não funciona
border-radius
  • Altera o radius para todos os cantos
  • Bordas dos elementos
  • Configurar um radius para um canto separadamente
box-shadow
  • Tabamanho do blur
  • Offset
  • Qualquer outra cor como #000
text-shadow
  • Tabamanho do blur
  • Offset
  • Cor
  • A sombra parece um pouco diferente do que acontece no FF / Safari / Chrome, eu não sei porquê

TODO

O melhor local para este script :)

Este gato não aprova cantos quadrados.

Agradecimentos para Remiz Rahnas por escrever o roteiro original que este é baseado.
Original: http://fetchak.com/ie-css3/

Baixar HTC

Se você gostou deste script ou tem alguma sugestão/reportar bugs, deixe-me saber.