O INTERNET EXPLORER NÃO... | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

O INTERNET EXPLORER NÃO…

Publicado na categoria Artigos com 6.777 visualizações e 33 comentários

Fala Pessoas!

Vou compartilhar com vocês um e-mail que recebi:

Olá tudo bem André?
Você tem bastante posts interessantes.
Ainda hoje é muito grande a quantidade de usuários que usam Internet Explorer que as vezes interpretam os novos recursos, mas de maneira muito mais lento que em outros browsers como Chrome, Firefox, etc.
Tendo em vista esse cenário gostaria que escrevesse algo no bom senso do uso desses novos recursos para que o site seja bem visto em todos os browsers sem grandes diferenças e problemas.
A abordagem deve ser feita no bom senso do uso de novas tecnologias como css3, Jquery, html5, etc. Outros problemas com imagem em .png no IE.
Abraço.
Alex Mota

O Alex me pede para utilizar de bom senso ao escrever sobre o bom senso dos desenvolvedores na hora de projetar um website.

Então vamos lá, já que eu DETESTO falar mal do IE mesmo. Isso vai ser uma tortura de escrever!

O Internet Explorer não ... - André Buzzo Webdesign

O QUE EU POSSO FAZER PELO IE?

Minha resposta para é isso é simples, curta e direta: o que puder, sem se matar.

Simples assim!

Eu vejo as coisas da seguinte maneira: dizem por aí que o IE 6 já morreu, e quem não há tantos indícios de seu uso (apenas 5% dos usuários AINDA o utilizam!), e sendo assim, o que podemos dizer também é que ainda se trata de um número significativo.

Do meu ponto de vista, se a pessoa que o usa NÃO O ATUALIZA isso é mais problema dela do que meu. Eu não posso me proibir a utilizar tecnologias avançadas, que irão favorecer a maior parte dos meus usuários, porque fulaninho não atualiza o seu navegador! Tenha a santa paciência!
O engraçado é que o cara abre um e-mail que o “Banco” dele mandou e que é um vírus, mas não atualiza o navegador!

O que podemos fazer nesses casos é o que chamamos de

DEGRADAÇÃO GRACIOSA

Degradação graciosa nada mais é do que projetar sites que POSSAM SER UTILIZADOS por qualquer versão de navegador. Por mais singela que seja sua exibição, o sistema DEVE funcionar em todos os dispositivos que proporcionem acesso à internet e não privar o usuário de realizar determinada tarefa!

O IE 6 não consegue entender a transparência do PNG? Sem problemas! Use PNG se não impactar diretamente na USABILIDADE do site. Causa impacto negativo? Então, por favor, substitua seu PNG por um GIF, que todos os navegadores entendem incluindo aí o IE 6.

Estamos carecas de saber que os IE da vida quase sempre apresentam problemas em tudo o que neles é exibido, e isso não é só um “dom” do Internet Explorer. O Chrome também apresenta alguns problemas, quando falamos sobre jQuery. E vou parar de usar o jQuery se APENAS um navegador dá problemas?
Deveria. Se ele afetar o bom funcionamento do site.

Confesso a todos: meu site, na versão anterior, não apresentava o menu em jQuery no Chrome que funcionava em todos os outros! Até o Internet Explorer o exibia perfeitamente, olha que coisa!

Recebi a observação por e-mail, e fui testar no Chrome e realmente não funcionava! E isso afetava e muito a USABILIDADE do meu site, pois meu usuário não tinha acesso ao menu suspenso para navegar no mesmo! E meu navegador era o mais atual!

Se eu aplicasse a DEGRADAÇÃO GRACIOSA nesse projeto, eu poderia exibir mesmo com nenhum efeito aplicado, mas ele deveria apresentá-lo ao meu usuário, para que pudesse usar meu site. E isso não acontecia. Veja o exemplo abaixo:

O INTERNET EXPLORER NÃO...

Aqui o menu é exibido perfeitamente em todos os navegadores, exceto no Chorme;

O Internet Explorer não ... - André Buzzo Webdesign

Que por sua vez, apresentava o informado na imagem acima.

O Internet Explorer não ... - André Buzzo Webdesign

Deveria, para não prejudicar meu usuário em sua visita, ao menos, ser exibido dessa maneira, ou algo parecido com isso. Todas as opções na tela, que concordo não ser em nada bonito, mas é funcional, pois meu usuário pode ir onde quiser dentro do site!

Partindo desse ponto, eu comecei a procurar

COISAS QUE FUCIONAM EM TODOS OS NAVEGADORES

Mesmo que de maneiras diferentes. Mas que funcionem.

Fui atrás de um maldito menu em jQuery que funcionasse no Chrome também. Descobri, implementei no meu site e meu problema foi resolvido. Mas e quando os problemas acontecem no nosso famigerado Internet Explorer? Como devemos proceder?

Como disse no começo do artigo. Fazer o possível, sem se matar.

Comecei a adotar a seguinte linha de raciocínio em meus projetos:

“Isso o IE não renderiza. Mas o quê ele renderiza? Ah tá, então coloco os dois…”

Um exemplo: praticamente todos os navegadores executam o “box-shadow” do CSS3. Claro, menos o IE.
Então, ao declarar essa propriedade, eu “aplico uma degradação graciosa” no meu script de CSS, que fica assim:

box-shadow: 0 0 5px 0 #000; /*Mozilla*/
-webkit-box-shadow: 0 0 5px 0 #000; /*navegadores com webkit*/
-moz-box-shadow: 0 0 5px 0 #000; /*Mozzila 3.6*/
border: 1px solid #666; /*Aqui eu dou uma opção para o Internet Explorer*/
padding: 5px:

O que eu propus no código acima: Todos os navegadores QUE ENTENDEM o box-shadow EXIBAM a sombra. Os que não exibem, substitua a sombra por uma borda. Veja o exemplo abaixo:

Site exibido no IE 8

O Internet Explorer não ... - André Buzzo Webdesign

Site exibido no Firefox 7

O Internet Explorer não ... - André Buzzo Webdesign

EU NÃO TENHO CULPA SE VOCÊ ADORA USAR O IE. Mas apresento um site mais elaborado para quem usa o IE9 e os outros navegadores, como o Firefox, Opera, etc. enquanto no IE 8 e demais, saem “diferentes”, porém, sem privar o usuário de assistir minha vídeo aula.

Outro exemplo, mas com imagens agora:

No Firefox, com sombra e cantos arredondados

O Internet Explorer não ... - André Buzzo Webdesign

No IE, apenas com bordas

O Internet Explorer não ... - André Buzzo Webdesign

E isso não afeta a experiência do meu usuário, pois eu não estou afetando a usabilidade do site, e sim o design dele.

Então, se o IE não aceita HTML5 ou CSS3, dê opções ao mesmo.

Mas use o que de bom está chegando com o HTML5 e o CSS3. Eles vieram para facilitar a nossa vida, enquanto o IE estará sempre aí, para complicá-la.
Forte abraço a todos, e até a próxima!

Voltar à página anterior!

  • Rudnei

    Cara simplesmente demais seu post, é isso ai, mas vou ser sincero,não estou mais dando a minima pro IE6 e 7 , mas o que mais irrita é vc fazer um site todo perfeito e nessas, porcarias ta tudo atravessado, ai só tomando umas dez pra relaxar kkkkk forte abraço!

    • Hahahaha…. fala Rudnei!

      O IE é o Freedy Krueger dos pesadelos do desenvolvedor web …rs

      Abraços!

  • Eduardo Amaral (Amaroca)

    Carakkkk Buzzo que artigo show meu camarada, vou até aproveita-lo em meu blog srsrsr, mto bom mesmo, temos que organizar uma campanha “Diga não ao IE” srsrs, mas falando serio cara, li duas vezes esse artigo e fiquei empolgado a estudar e criar um artigo parecido com detalhes sobre como solucionar problemas do IE onde se trata de css3 e html5, caso tu ja tenha algo, crie cara um solucionador de problemas IE kkk, valew meu irmão.

    • Fala Eduardo!

      Manda bala meu velho!

      Abraços!

  • Alyson Antunes

    Nos meus sites vou privar o usuario.. se o site reconhecer o IE.. vou colocar um tarja de vermelho no meio da tela falando asim “Navegador não compativel com site! Porfavor Utilize o Mozilla Firefox, Chrome ou Opera. Obrigado”

    Vou acabar com essa raça miseravel do IE..

    • Faz isso não Alyson!! rsrsrs

      Sei que é contraditório, mas o seu usuário não pode ser culpado pelo erro de terceiros. Faça-o bem simples se for o caso, mas não prive seu usuário de IE de ter acesso ao site.

      Abraços!

  • Nando Abreu

    Já dei a dica… Se for em PHP…

    if (preg_match(“/MSIE/”, $_SERVER[‘HTTP_USER_AGENT’])) {
    // imprimir recomendação de uso de FF ou Chrome
    }

    • Opa! Eu vi outro dia uma outra maneira de fazer isso:

      <!--[if lte IE 7]>
       body{
         display:none;
      }
      <![endif]-->

      O que acha? rs

  • Renato

    E o engraçado André, é que o pe$$oal que tem um fervor próximo a religioso pela micro$oft desce a ripa no software livre, q usam jQuery, FCKEditor, MySQL…

    Nem o Steve Ballmer usa pc com rwindows, olha aki:
    http://www.flickr.com/photos/paintitblack/2439080330/

    kkkkk

  • Renato

    Na minha humilde opinião, a micro$soft é que deveria acabar, morrer e ser pra sempre esquecida

    • Ainda bem que é só sua “humilde” opinião …. kkkkkkkkkkkkk

      Abraços e obrigado pelo comentrário Renato! Faço das suas as minhas!

      Até mais!

  • Luan

    Recentemente tive que adaptar um site que havia desenvolvido para FF e Chrome e também no IE9, a cliente pediu para que funcionasse no IE7 e 8, cara fiquei muito bravo porque tive que quebrar várias partes do código para funcionar neste maldito navegador! Essa %@#$¨@ tem que morrer

  • Leandro

    André brigadu por ter me mandado o link de seu artigo pelo twitter, ajudou e muito na duvida q eu estava. O artigo esta otimo parabens brigadu…
    Vou divulgar.
    abraços!

    • Que isso Leandro!!

      Fico feliz por poder ajudar de alguma maneira!

      Abraços e até mais!

  • JacsonLeite

    Fala André, tudo blz?

    Eu estava com dúvidas nesse sentindo, de como fazer meu site ser visto de forma a não prejudicar o seu conteúdo nos diversos navegadores. Mas tem hora que dá vontade de “espancar” (rsrsrsrsr) os desenvolvedores da Microsoft.

    Abraço.

    • Fala Jacson!! Tudo em ordem meu velho!!

      Eu sinto essa vontade dentro da minha pessoa diariamente! rs

      Abraços!

  • Natã Almeida

    Parabéns pelo site André. Seus artigos tem me ajudadoo bastante, pois estou iniciando agora nessa área de programação para web, é muito legal. Sempre pegando umas dicas aqui!

    Abraços!!!

    • Obrigado Natã!

      Fico feliz em poder lhe ajudar meu velho!!

      Abraços!

  • Tiago

    Nossa cara, graças a Deus consegui!
    Obrigado!

  • Tiago

    André, estou desesperado, me ajude!
    Fiz um site faz pouco tempo com wp. http://amauricarvalho.com.br está normal no firefox, chrome, pa e pa. Mas no internet explorer, ele nao fica normal, e estou desenvolvendo outro, tb no wordpress e estou caindo no msm erro, me ajude!

    Abraço, ótimo post e novo site super bacana!
    Tiago

  • Miguel

    Muito bom o artigo… Parabéns ae cara!
    Ah, e parabéns também pelo novo layout, ficou ótimo.

    • Fala Miguel!!

      Muito obrigado meu velho!

      Abraços!

  • Alex Mota

    Bacana o artigo,… é o que venho fazendo como o Matheus citou. Retire os efeitos que não interferem na usabilidade do site.

    Até mais!

    • Fala Alex!!!

      Isso! Ou remove os efeitos ou aplica um paliativo para os que não entendem….rs

      Abraços meu velho!

  • ainda nao tive tempo de ir no local com o meu tio (o qual esta registrado no nome dele), mas assim que tiver uma posição eu te aviso.

    abraços.

  • Jhonatan R.

    Hum… fiz lenha, esqueci do strip_tags.

  • Jhonatan R.

    Pow, se tem uma coisa que matava os programadores de raiva era esse IE, ele já virou ate piada. Mais como não somos nós que mandamos na Microsoft temos que nos adaptar por que, por pior que seja, a maioria dos usuário de internet usam o Internet Explorer (por incrível que pareça o IE6).

    Mais como nossas preces de Designers fora ouvidas o Google (Google… Google… Vivaaa!!!) bolou uma solução, que já é largamente usada, o http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″. E se o André me permite, quero dar uma pequena dica:

    Usando o “X-UA-Compatible”:
    1 – Coloque entre a tag “” essa linha de código: , fica assim:

    O titulo…

    <meta

    Conteúdo …

    2 – Essa linha ” http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″” faz com que o IE (todas as versões) se comporte como o Chrome, assim o IE ganha agilidade e funcionalidades, como o Chrome, ou seja… é o chrome funcionando dentro do IE.

    3 – Testem e sejam felizes, principalmente gritem Google… Google… Vivaaa!!!.

    PS: Lembrando que essa dica é para programadores e Designers.

    @Jhonny_Reis

    • Galera, fica a dica do Jhonatan!!

      Interessante… eu usava o X-UA-Compatible para tornar o 9 em 8, mas para fazê-lo comportar-se como o Chrome, sinceramente, desconhecia… que chato…..hahahaha

      Abraços meu velho, e muito interessante o lance!!

      Até mais!

  • é seguir essa linha de raciocinio mesmo, se o erro que acontece em navegadores vai dificultar a usabilidade, retire ou tente arrumar, mas se fo só efeitos de design, tire as frescuras e deixe mais viavel (no caso uma 2 opçao).

    abraços.

    • Exatamente Matheus!!!

      Abraços!

      E deu certo a transferência do domínio?