Como muitos desenvolvedores, nós não somos muito fãs do Internet Explorer, além de não ser muito conhecido por “inovações”, é inadmissível a utilização de um browser tão antigo em uma época que novas e poderosas técnicas vem surgindo, como o CSS3 e o HTML5. Mas para amenizar este problema, alguns “truques” podem ser feitos para facilitar seu dia a dia.
Habilitar HTML5 no IE
Você conhece o HTML5? Se você fizer parte do cenário de desenvolvimento web, com certeza sim. HTML5 é a próxima grande revisão da HTM (linguagem de marcação de núcleo da World Wide Web).
O script html5.js é um projeto muito interessante que visa tornar o Internet Explorer compatível com HTML5, a única coisa que você precisa fazer é incluir o script html5.js no cabeçalho de seu HTML.
1 2 3 | <!--[ if IE]--> <script language="javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <!-- [endif] --> |
Mais informações: http://remysharp.com/2009/01/07/html5-enabling-script/
Propriedade CSS text-shadow no IE
Devido a recente implementação da propriedade text-shadow no Firefox 3.5, os designers começaram a utilizar este recurso intensivamente. Hoje a grande maioria dos browsers modernos pode processar esta propriedade corretamente, com exceção do IE que mais uma vez ignora.
Felizmente, há um filtro que se esforça para interpretar esta propriedade no IE, o exemplo abaixo mostra como aplicar sombra de texto em browsers modernos e o filtro no IE. Repare que por não ser uma propriedade CSS padrão, ele deve ser isolado usando comentário condicional.
1 2 3 4 | p.shadowed ( text-shadow: # 0000ff 0px 0px 3px; /* Browsers modernos */ filter: glow (color =# 0000ff, Strength =3); /* IE */ } |
Mais informações: http://www.howtocreate.co.uk/textshadow.html
CSS box-shadow no IE
A implementação da sombra de caixa com a propriedade box-shadow é uma das mais interessantes inovações do CSS3, porque nos permite criar muitas sombras legais em elementos HTML sem necessidade de imagens. Uma verdadeira revolução para designers e desenvolvedores web front-end!
1 2 3 | .sombreado ( box-shadow: 10px 10px 5px #888; } |
Mas você pergunta se o Internet Explorer pode manipular box-shadow? Não, ele não pode.
Novamente, para imitar a propriedade CSS box-shadow no IE, vamos ter que usar outro filtro de propriedade privada:
1 2 3 4 5 6 | .sombreado ( filter: progid: DXImageTransform.Microsoft.DropShadow (color =#969696, OffX =1, Offy =1) progid: DXImageTransform.Microsoft.DropShadow (color =# C2C2C2, OffX =1, Offy =1) progid: DXImageTransform.Microsoft.DropShadow (color =# EFEFEF, OffX =1, Offy =1); } |
Mais informações: http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html
Bordas Arredondadas
Bordas arredondadas! Assim como sombras nos elementos HTML sem usar qualquer imagem, outra mega inovação do CSS3 é a propriedade border-radius, que projeta facilmente cantos arredondados sem nenhuma imagem!
Abaixo, a utilização do border-radius:
1 2 3 4 5 | . round ( border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } |
Há algumas maneiras de criar cantos arredondados no IE sem utilizar imagens, um dos mais utilizados é o Roundies DD, um código Javascript que arredonda qualquer elemento HTML.
O exemplo abaixo criar elementos arredondados com a classe Roundify:
1 2 3 4 | <script tipo="text / javascript" src="DD_roundies.js"></script> <script tipo="text / javascript"> DD_roundies.addRule ('. Roundify', '10px '); </script> |
Mais informações: http://www.dillerdesign.com/experiment/DD_roundies/
Layout de Múltiplas Colunas
O CSS3 também permite a exibição automática de certos conteúdos em colunas. Algo bem legal, porque dá aos designers a possibilidade de criar layouts incríveis.
O código abaixo funciona no Firefox e Safari, ele adicionar automaticamente colunas a um elemento div:
1 2 3 4 5 6 | . column ( -moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; } |
Infelizmente não há nada similar no Internet Explorer, por isso será necessário utilizarmos o plugin JQuery Columnize. Abaixo você vê como é fácil criar colunas com ele:
1 2 3 | $('# mydiv').columnize(); $('# myotherdiv').columnize((width: 200)); $('# mythirddiv'). columnize((columns: 2)); |
Mais informações: http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/
Opacidade
Opacidade é outra coisa que não podemos esperar do IE, uma pena, porque ter a capacidade de determinar a opacidade de um elemento é algo muito interessante em termos de design. O filtro Crappy pode nos ajudar a atingir resultados semelhantes no IE.
1 2 3 4 | . elemento ( opacity:.7; /* CSS Padrão */ filter:alpha (opacity=70); /* IE */ } |
Elementos HTML Rotativos
Elementos rotativos com CSS3:
1 2 3 | transform: rotate (240deg); -webkit-transform: rotate (240deg); -moz-transform: rotate (240deg); |
O Internet Explorer irá simplesmente ignorar as declarações acima, mas podemos utilizar um filtro de propriedade particular que apesar de não ser validado pela W3C, simula o mesmo efeito para o IE:
1 | filter: progid: DXImageTransform.Microsoft.Matrix (M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540); |
Mais informações: http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx
Suporte RGBa
Esta nova funcionalidade permite aos desenvolvedores especificar um valor de opacidade de cor, que é extremamente útil na codificação de um website:
1 2 3 4 | .cor -bloco { largura: 50%; background-color: rgba (0, 0, 255, 0.2); /* Browsers Modernos */ } |
No Internet Explorer, precisamos de um filtro para conseguir um efeito similar ao RGBa:
1 2 3 4 5 6 7 8 9 | <!--[if IE]> <style type="text/css"> .color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050); zoom: 1; } </style> <![endif]--> |
Mais informações: http://css-tricks.com/rgba-browser-support/
Incorporação de Fontes Compatíveis no IE
Durante muito tempo, a web foi dominada por algumas fontes como Arial, Verdana, Courier e Times New Roman. Estas fontes são denominadas como “web safe”, que significa que praticamente qualquer computador as tem instaladas (elas não instaladas no GNU/Linux por não serem livres).
Mas, de um ano ou dois pra cá, a técnica de incorporação de fontes mostrou-se muito interessante.
Entre outras técnicas, o método @font-face é provavelmente o mais limpo (acredite ou não, o Internet Explorer tenta apoiar a incorporação de fontes desde a versão 4), algo bem legal, mas considerando que nada na Microsoft é como nos outros, sua fonte deve estar no formato proprietário eot e você tem que usar uma declaração diferente para inseri-las em suas páginas:
1 2 3 4 5 6 7 8 9 10 11 | @ font-face ( font-family: "Sua" FontName; src: URL(Localização da fonte/FontFileName.eot); /* IE */ src: local("FontName real"), URL(Localização da font FontFileName.ttf) formato("truetype"); /* Browsers Modernos */ } /* Depois disso você a usa como qualquer outra fonte */ . elemento ( font-family:"Sua" FontName, verdana, Helvetica, sans-serif; } |
Você precisará converter suas fontes para o formato eot da Microsoft para que elas funcionem no IE, para isso você pode usar esta ferramenta online gratuita. http://www.kirsle.net/wizards/ttf2eot.cgi
Mais informações: http://randsco.com/index.php/2009/07/04/p680
