Leandro Vieira Pinho's Blog » IE

Vamos matar o Internet Explorer 6, por favor.

Leandro Vieira Pinho — Fri, 09 Jan 2009 12:31:46 +0000

Todo bom desenvolvedor constrói suas aplicações com foco numa solução crossbrowser, ou seja, que funcione no máximo de browsers possíveis, se possível em todos. Mas, todos concordam que lidar com o infame do Internet Explorer 6 é uma *****.

O iMasters brilhantemente lançou uma campanha para eliminar browsers antigos do mercado, entre eles o dito cujo do IE 6. Convido todos desenvolvedores decentes a participarem dessa iniciativa e nos ajudar a matar o Internet Explorer 6, por favor.

Participar da campanha é simples, basta adicionar um pequeno e simples código nos sites de sua responsabilidade que esse código irá detectar o navegador e sua versão. Se detectado que se trata do IE 6, será exibido uma barra convidando o usuário a atualizar seu navegador e ter uma navegação mais segura e nos ajudar, é claro.

Para ajudar na divulgação da campanha e facilitar nosso trabalho hoje e amanhã, inicio agora um Meme onde o objetivo é blogar a respeito da campanha, inserir o código da campanha em seu blog e dizer por que o Internet Explorer 6 deve morrer

Convido meus amigos Metzen, Bruno Dulcetti, Japs e Michelazzo para participarem.

w3FormValidation 2.3

Leandro Vieira Pinho — Fri, 02 Feb 2007 11:04:14 +0000

Disponível a versão 2.3 do w3FormValidation. Essa versão inclui a correção de um bug em que as tags select são exibidas sobre o overlay no body no Microsoft Internet Explorer.

Mais informações sobre o w3FormValidation.

“Novas” regras CSS para o Internet Explorer 7 – Child Selector

Leandro Vieira Pinho — Tue, 02 Jan 2007 02:29:16 +0000

Com o lançamento do Internet Explorer 7, temos a nova disposição “novas” regras CSS que utilizaremos sem a preocupação, se o IE irá interpretá-las ou não. Essas “novas” regras possibilitarão ao desenvolvedor/designer um controle maior sobre os elementos HTML.

Com esse feito – um controle maior sobre os elementos HTML – evitamos a classite (falarei sobre ela em um outro post), ou seja, o uso excessivo de classes desnecessárias; bem como os ids. Então, vamos conhecer as “novas” regras CSS para o Internet Explorer 7:

Child Selector

O que é um child Selector?

É um tipo de regra CSS destinado aos filhos de um determinado elemento. Isto é, a regra CSS será aplicada somente aos filhos de um elemento HTML e não em seu neto, por exemplo.

Um exemplo de child Selector

Para clarear melhor a explicação sobre o que é um child selector, imagine o seguinte cenário:


div filha 1 div neta 1
div filha 2

E esta regra CSS:

body div {
padding: 20px;
}

Ou seja, todas as tags div do documento terão um padding de 20px. Não importando se ela é filha, neta ou bisneta da tag body. Agora, se utilizarmos a seguinte regra CSS:

body>div{
padding: 20px;
}

Somente as tags div filhas que receberão tal regra.

Com esse recurso não há aquela necessidade de adicionar à determinada tag uma classe ou um id; e com isso atribuir a regra CSS à classe ou id determinado.

Os child selectors foi (e ainda é em alguns sites) muito utilizado como um hack para esconder regras CSS do IE. Mas, no Internet Explorer 7 isto não acontecerá mais, uma vez que ele finalmente interpretará os child selector.

Se houver necessidade de esconder uma determinada regra CSS do IE 7; podemos utilizar um comentário vazio após o sinal de maior que da seguinte maneira:

body>/***/body .alguma_classe {
...
}

A regra CSS acima será ignorada pelo Internet Explorer 7 e sinceramente não sei o motivo. Alguém sabe? Comente aí

Diferenças entre os browsers ao interpretar JavaScript #1

Leandro Vieira Pinho — Thu, 21 Dec 2006 13:35:56 +0000

Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui

Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = objLink.getAttribute('rel');
	// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
	alert('Tipo: ' + typeof(objLinkAttRel));
}

Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:

Tipo: string = Internet Explorer 6
Tipo: object = Firefox 2.0.0.1
Tipo: object = Opera 9

Como você percebeu, somente o Internet Explorer interpreta o tipo da variável como Object String. Então, se você faz um código assim:

...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
	// Faz alguma coisa
}

Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no Internet Explorer, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores – como o Firefox e o Opera – você terá uma mensagem de erro – objLinkAttRel has no properties. Isto por que você está utilizando um método – substring – para trabalhar com Objects Strings. E como eles não interpretam tal variável como Object String, certamente não funcionará.

Então, o que fazer para que tenhamos esse código de forma crossbrowser? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um Object String. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = new String(objLink.getAttribute('rel')); // Observe: new String()
	if ( objLinkAttRel.substring(0,3) == 'foo' ) {
		// Faz alguma coisa
	}
}
}

Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus códigos sempre de forma crossbrowser

Microsoft se prepara para 2007 com redesign drástico em sua Home Page

Leandro Vieira Pinho — Wed, 20 Dec 2006 11:14:49 +0000

A Microsoft Corporation lançou sua nova home page e sinceramente, me surpreendi com o redesign. Primeiro, por se tratar de uma empresa que mantém o browser do ícone azul. Segundo por ela não aderir como deveria os padrões da web (será?).

Com o lançamento do Internet Explorer 7, e a preparação para o Windows Vista e o Office 2007 para o próximo ano, a empresa de Bill Gates estrutura sua nova home page com base nos padrões da web e na utilização do Ajax. Acredite: eles usaram javascript não-obstrutivo.

A dois anos atrás, um grande nome ligado aos padrões da web, refez a home page da companhia com técnicas de CSS para Layout. Confira. Mas agora em 2006, caminhando para 2007 a sugestão parece ter surgido efeito (como demorou hein).

A nova interface como demonstrada abaixo:

Utiliza o Ajax para carregar o conteúdo dinâmicamente através dos links dispostos no menu flutuante à direita. Caso o usuário esteja com o JavaScript desabilitado ou não tenha suporte a esse recurso, ele navegará perfeitamente pelo site, uma vez que os desenvolvedores utilizaram o JavaScript como deve ser: não-obstrutivo.

Uma vez clicado nos links do menu, o conteúdo é exibido em um painel que oferece três opções de visualização de conteúdo (Detail, Thumbnail, Text). Observe a imagem abaixo:

O painel exibido ao clicar nos links do menu flutuante à direita, também oferece uma navegação em um menu flutuante à esquerda, que também utilizada o Ajax para carregar o conteúdo e exibi-lo nesse mesmo painel.

A navegação secundária, localizada na parte inferior da página, altera seu conteúdo dinâmicamente através do evento onmouseover. Os desenvolvedores também privilegiaram a navegação através do teclado, testei aqui e funcionou perfeitamente.

Meu primeiro contato com esta nova Home Page da Microsoft foi super positiva. Fiquei feliz de ver essa empresa se preocupar com a acessibilidade e com os padrões da web. E você, o que achou deste redesign?

Para os amantes do Firefox, uma boa notícia.

Leandro Vieira Pinho — Mon, 04 Dec 2006 17:29:05 +0000

O Firefox subiu 0,46 ponto percentual e chegou a 13,5% de participação de mercado em novembro. Enquanto nosso “amigo” Internet Explorer recuou de 81,28% para 80,56%. Isto é, segundo uma pesquisa da NetApplications.

Veja mais detalhes em Participação do browser Firefox aumenta para 13,5% em novembro

JSLint – Verificador de códigos JavaScript

Leandro Vieira Pinho — Thu, 23 Nov 2006 03:25:24 +0000

Conheci recentemente o JSLint, um verificador de códigos JavaScript. Sua utilização é bem simples. Você cola seu código JavaScript no verificador e pede a ele para verificar o código colado, somente.

Nem sempre nosso amigo Firefox ou nosso outro “amigo” Internet Explorer fazem uma verificação 100% dos nossos códigos JavaScript, então, é bom verificar o código para evitar problemas em navegadores, nos seus sistemas, com seus clientes, e claro, evitar dor de cabeça.

Por isso, meu caro, estou sugerindo a você a visitar o JSLint e conhecê-lo. O autor da aplicação Douglas Crockfords disponibilizou também uma convenção de códigos em JavaScript.