O Internet Explorer tem sido a ruína da vida dos desenvolvedores web, em grande parte devido ao seu suporte limitado e cheio de bugs padrões.

Embora as coisas tenham melhorado um pouco no IE9, ele ainda não tem a participação de mercado que lhe permitiria ignorar seus irmãos mais velhos. E, embora seja discutível se você precisa se preocupar com o IE7 (eu não), o IE8 é popular o suficiente para exigir atenção.

A boa notícia é que é possível conseguir que o IE8 faça coisas decentes com tecnologias web modernas. Neste artigo, vou me concentrar em duas: tags HTML5 e Web Fonts.

Elementos HTML5

O HTML5 tem um monte de novos elementos para acrescentar significado semântico à sua página. Por exemplo, nav significa um menu de navegação.

Uma vez que o IE8 não sabe nada sobre isso, ele não reconhecerá estilos aplicados a eles através de CSS. Felizmente, há uma maneira fácil de corrigir isso – basta adicionar elementos ausentes ao DOM da página:

Obviamente, você não tem que definir cada elemento HTML5 existente, apenas os que você realmente usa. A propósito, este código utiliza comentários condicionais, um recurso introduzido pela Microsoft para suportar  especificamente as diferenças nas versões do navegador.

Outra coisa importante para se destacar é que os elementos do HTML5 são exibidos como block por padrão, mas o IE8 não sabe disso também. Para atenuar esse problema, você pode tanto especificar display: block; quando estiver estilizando elementos específicos ou fazer isso no atacado no seu CSS:

Note que se você estiver usando um CSS  Reset para HTML5 (como este), isso provavelmente já deve ter sido resolvido para você.

Web Fonts

Web Fonts têm estado por aí há um tempo e existem alguns ótimos recursos online para obtê-las: fontes do Google, Type Kit, Fonte Squirrel etc. Além de fornecer mais opções para o seu texto, as web fonts podem ser muito úteis para ícones, links de mídia social, e assim por diante.

Para usar web fonts, você pode aproveitar a norma do CSS @font-face:

Nesse exemplo, eu defini uma nova font-family chamada “Minha Fonte”, deixei o navegador saber onde encontrar o arquivo que descreve o formato da fonte e, na verdade, estilizei um elemento de cabeçalho usando a font-family recém-definida.

Agora, a relação do IE8 com web fonts é um pouco mais complexa do que “ele não suporta isso”. Ele realmente os suporta, mas usá-los é extremamente trabalhoso.

Existem cinco tipos de formatos de web fonts:

• Embedded Open Type (EOT)
• TrueType (TTF)
• OpenType (OTF)
• Scalable Vector Graphics (SVG)
• Web Open FontFormat (WOFF)

Do grupo, o WOFF se tornará o padrão. Ele é suportado por Chrome, Firefox (desde a versão 3.6), Opera, Safari e IE9.

É claro que o IE8 não sabe nada de WOFF e suporta exclusivamente o EOT (para ser justo, isso acontece principalmente porque o IE8 precedeu o WOFF). Isso significa que, para usar uma web font, que pode ser exibida tanto no IE8 quanto em outros navegadores, você tem que fornecer os formatos EOT e WOFF.

Para piorar a situação, o IE8 tem um bug que o impede de carregar mais de um formato para a mesma fonte. Felizmente, há um truque que você pode usar.

De qualquer forma, aqui está o CSS cross-browser para @font-face, cortesia dos caras super-inteligentes da fonte Spring:

Nesse exemplo, estou usando uma fonte chamada Open Sans e seus diversos formatos (EOT, WOFF, TTF e SVG), que são armazenados na pasta “fonts” no meu site.

* Se você está se perguntando por que incluí o formato SVG, a resposta é porque o Safari móvel (iPhone/iPad) suportou apenas esse formato até a versão 4.1.

A propósito, é importante perceber que, se você usar @font-face, vai precisar fornecer as versões de fonte para todas as combinações de estilo/weight que você planeja usar. Por exemplo, eu estou usando weights font das 300 (normal) e 600 (negrito), bem como estilos de fonte normal e itálico. Isso significa que preciso fornecer 4 faces de fontes diferentes:

1. 300, normal
2. 3oo, itálico
3. 600, normal
4. 600, itálico

Aqui está o código para o resto:

Finalmente, você pode não ter acesso a todos os formatos de fontes diversas para uma fonte que você deseja usar sempre. Se for esse o caso, a fonte Squirrel tem uma ferramenta excelente para gerá-las automaticamente. Basta fazer o upload do formato que você tem, e ele vai te dar um arquivo zip com todos os formatos que você precisa.

***

Texto original disponível em http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/