Devemos saber desenvolver para internet explorer [ie]!

Quero explicar aos ‘mais novos’, o porquê devemos saber desenvolver FrontEnd para esse famigerado navegador.

Mais especificamente, para o motor de renderização no qual ele se baseia.

Beleza, o Firefox é lindo, o Chrome é uma maravilha, mas é preciso deixarr claro o que é: obrigação do desenvolvedor(nós), e o que é: que o browser deveria de fato fazer.

Corrigir marcação

É um recurso muito interessante, poupa os visitantes de ver muitos sites quebrados. Pois diversos browsers modernos, através de complicadas rotinas, corrigem literalmente uma marcação HTML incorreta. Os motores praticamente adivinham o que o desenvolvedor queria fazer, e faz por eles!

Olha que beleza, podemos ser preguiçosos e ruins, que o FF vai dar um jeito e corrigir!
Balela, se toca! caia na real!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model</title>
<style type="text/css">
* { margin: 0; padding: 0; }
</style>
</head>
<body>
	<div id="main">
		<h1>Titulo
	
	</div>
	<p>continua normal</p>
</body>
</html>

Problema: não fechei a tag h1. O FF fechou pra mim. O IE não.

Isso é obrigação sua! Faça correto! Não seja dependente de um workaround de terceiros. Aqui que entra a maravilha. O internet explorer não corrije, não arruma teus erros(na maioria das vezes)!

É praticamente como a sua mãe: vai te apontar todos os teus erros, apontando bruscamente o que vc fez, detonando todo o resto do documento.

Eu pessoalmente acho isso ótimo. Aqui começamos a destinguir os bons dos ruins(devs). O mínimo do mínimo é fazer uma marcação consistente, e válida. Obrigação sua.

Atributo incorreto

Erro tosco, absurdo de sintaxe HTML!

	<div id="main">
		<h1 id="titulo>Titulo</h1>
	
	</div>
	<p>continua normal

Visualização:

IE fudeo tudo. FF corrigiu. Quem tá errado ? O FF e nós mesmos. Afinal fizemos errado.

Na minha opinião, o IE está certo, pois mostrou errado algo que fizemos errado.

Box Model

Cara, essa eu acho absurda. Exemplo rápido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#main {
	width: 400px;
	height: 70px;
	background: #ff0;
}
.content {
	width: 200px;
	height: 100px;
	background: #f0f;
}
</style>
</head>
<body>
	<div id="main">
		<div class="content"></div>
	</div><!-- /main -->
</body>
</html>

Explicando o que eu fiz: .content é filha da #main
Porém, notem que o height da filha é maior que o height da mãe. (erro de lógica isso)

Aqui que o ‘bug do ie’ é explicado: o ie trata height como min-height

Notem como no Firefox, acontece oque pedimos: a #main (que é mãe), com menos altura que a filha.
Ridículo! Erramos, deveria estar errado! Não foi bug do ie, foi bug do desenvolvedor !

Value de input centralizado verticalmente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model</title>
<style type="text/css">
input {
	height: 40px;
}
</style>
</head>
<body>
	<input type="text" name="" />
</body>
</html>

E ai ? pq o FF fez bonitinho e mandou pro centro ?
eu não disse nada pra ele. Não informei um line-height de mesmo valor do height.

São pequenas coisas. Mas que podem nos dar grandes dores de cabeça. O único intuito desse post, é te fazer refletir.

Não estou defendendo o ie. Só quero expor, que muitos dos erros e das dores de cabeça que enfrentamos todos os dias, provém dos nossos próprios erros. E não da engine do navegador.

Culpe a si mesmo, antes de culpar os outros!

5 Comments

  1. Fala brunão! Blz?

    O problema é que isso acontece em muitas outras “áreas” da nossa vida, e é muito mais cômodo apontar os outros e se esconder nisso.

    Parabéns pelo post inteligente.

  2. há hoje em dia o IE tá muito atrasado comparado com os outros deveria ser mais bem feito o ie eu msm faiz muitos anos q nem passo perto do internet explore kk.

  3. carlinhoslehn

    agosto 12, 2011 at 04:48

    Buenas!

    Muito Bem focado o texto, pior que no final das contas o erro mesmo é nosso, pois se voce identar tudo correto vai funcionar legal, mas tem coisas que irritantemente não vão para o seu lugar, ai entra aquela coisarada de hack e webkit etc..
    mas isso acredito que é outro assunto para ser abordado..
    aquele abraço
    Carlinhos lehn

  4. Nem sei porque a microsoft ainda inssiste nisso de mater o ie
    so da mais trabalho, criar css,e codigos javascript diferente

    espero que para a versão 10 eles mudem, a começar pelo nome, depois pelo logo, depois pela aparencia, depois pelos arquivos do sistinha dele, ou seja lançar outro navegador bom, ou pelo menos que possa competir com google chrome

  5. Muito bom! Compartilho do mesmo pensamento que você.

    Eu não preciso fazer um CSS para cada browser (como já vi algumas pessoas fazendo), simplesmente crio da forma correta (DOCTYPE, HTML validado pela W3C e CSS corretamente) e funciona em todos os browsers.

    O pessoal tem preguiça de aprender a fazer da maneira correta e perde um tempão corrigindo problemas que eles mesmo criam.

Deixe uma resposta

Your email address will not be published.

*