Especificando classes no html conforme versão do Internet Explorer

Esse é um esquema utilizado com frequência na comunidade de desenvolvedores, está em vários boilerplates. É uma solução rápida e fácil pra quem precisa especificar algum estilo pra algum objeto somente no IE ou em algum versão dele.

O código abaixo exibe uma classe “ie” junto de uma “ie+versão do IE”. Ex: No Internet Explorer 8, ele vai exibir duas classes, são elas: “ie” e “ie8”.

	
	
	
	

Logo, o html no Internet Explorer 8 ficará assim:

	< html class="ie ie8">

E caso você vá usar um seletor específico pra corrigir algum pepino no IE, ficará assim:

	.ie SELETOR {
		/* estilos */	
	}
	.ie7 SELETOR {
		/* estilos */	
	}

Em breve posto a alternativa que eu costumo usar – que é feita em JS.

 

Utilizando RGBA do CSS3

Há um tempo atrás eu não utilizava CSS3 pra declarar cores por um motivo bem conhecido: Suporte no IE. O nosso amado navegador da Microsoft só implementou o suporte na versão 9. Resolvi começar a usar CSS3 com mais frequência e aplicar Progressive Enchancement nos projetos – e é claro, usar sempre um fallback pros usuários que usam o maldito IE.

O RGBA é uma declaração simples, que utiliza o RGB normal com uma última declaração – o “A” – para o alpha, que é responsável pela transparência.

Aplicando o RBGA

Declarando uma fonte com a cor vermelha com 50% de transparência.

.exemplo {
    color: rgba(255,0,0,0.5)
}

Pra pegar os valores com precisão, veja no layout a opacidade (opacity) e a cor do objeto que ja é exibida em RGB, entre outros. Ex: Na imagem abaixo.

Bem, por enquanto é isso! Comentem, perguntem, enviem feedbacks, whatever.

 

Se livrando do “.last” em uma listagem em blocos

É comum vermos desenvolvedores “sujando” o código html com uma classe “.last” em uma itens de lista para remover alguma formatação de margin ou padding que mantém o último item de uma linha onde deveria estar, e não na linha debaixo. Não entendeu? Vou desenhar – literalmente.

Nesta página temos uma lista comum, com três produtos, alinhados quase corretamente, mas existe um espaço perceptível do lado esquerdo, entre o começo da div de conteúdo e o começo da lista. Não viu? Dê uma olhada neste segundo exemplo.

O bloco de fundo verde é a área de conteúdo, o roxo é o conteúdo da lista e o amarelo é o item. Se você imaginar que esta lista está ao lado de alguma outra coluna, como um menu, etc., o último objeto ficará colado na coluna do lado esquerdo (ou direito, depende da sua especificação pra marge no css), ou o item vai para a linha debaixo.

… 

 

Cuidado! O Box-Shadow pode prejudicar a rolagem da sua página!

O texto abaixo é de autoria de Ross Allen, e foi publicado no blog de desenvolvedores do airbnb. A tradução e distribuição do artigo foi autorizada pelo autor.

Trabalhando em um dos Chromebooks que a Google empresta durante os vôos da Virgin America, eu percebi a rolagem de algumas páginas do site airbnb.com ficavam lerdas, mais do que o de costume quando uso meu notebook de trabalho. A princípio culpei o hardware humilde do Chromebook, mas alguns outros sites com bastante conteúdo estavam com a rolagem normal. Percebi que o problema era o box-shadow, aplicado na lista de resultados da busca, então decidi investigar.

Usei a aba de timeline do Chrome para ver a duração do preenchimento do box-shadow nos elementos. Antes de cada teste, eu juntei alguns resultados rolando o conteúdo da página até o mesmo local, usando window.scroll(0, 140). Então, cliquei duas vezes na seta para rolar a página, sendo que cada clique corresponde a um scroll de 40 pixels, e guardei os resultados.

Elemento com 10px de blur-radius do Box-Shadow, que equivale 3 aplicações a cada 40px de rolagem.

Para checar se o problema era realmente o Box-shadow, diminui a quantidade de blur (blur-radius) pela metade. O resultado foi uma rolagem mais suave, e os números mostraram que a aplicação foi feita em metade do tempo.

Elemento com 5px de blur-radius do Box-Shadow, que equivale 3~4 aplicações a cada 40px de rolagem.

Já que percebi que o box-shadow era o culpado, resolvi removê-lo por inteiro. A rolagem foi bem mais suave.

Então, só pra finalizar o teste, apliquei um box-shadow monstruoso. O Chromebook não gostou nem um pouco de um blur-radius de 300 pixels. Ele levou exatamente dois segundos para preencher a área com sombra a cada clique para rolar a página para baixo (40 pixels por clique, lembra?). Veja a performance na tabela abaixo:

Efeitos da pesquisa no produto

Alteramos o box-shadow para 3 pixels e adicionamos um offset de 3px para manter um visual mais simples e não prejudicar a performance de aparelhos com um poder de processamento mais fraco.

Porque isso foi importante? Eu tenho por volta de 3 visitantes usuários de Chromebook!

Seus visitantes que usam Chromebook podem ser poucos – ou nenhum, como é o caso de muitos sites no Brasil – mas o Chromebook é baseado no Chrome, que usa a engine Webkit, a mesma utilizada nos navegadores de iOS e Android. Se o CSS afeta a performance do seu produto no Chromebook, é bem provável que afete também quem está usando/visualizando via Android/iOS.

Recomendo que acesse a área de comentários deste post e do post original para acompanhar debates sobre este assunto.

 

Seletor :nth-child

Acho justo que você saiba que esse seletor não funciona no IE – quer dizer, até funciona, mas só na versão 9. Já nos demais navegadores populares (FF 3.5+, Chrome 4, Safari 4) tá tudo bem, menos no Opera, que tem alguns problemas.

Como você já deve saber, o seletor first-child funciona para o primeiro item (filho) e o last-child para o último item (também filho), o nth-child seleciona esses itens de um jeito mais específico, deixando você livre da necessidade de aplicar alguma classe ou fazer alguma “gambiarra” do tipo.

Vamos para alguns exemplos:

Selecionando o primeiro item de uma lista, teremos o seguinte CSS e o respectivo código HTML:

ul li:first-child {
	color:#f00;
	}
  • Primeiro Item
  • Segundo Item
  • Terceiro Item
  • Quarto Item
  • Quinto (e último) Item

Caso você faça um teste, o código acima vai aplicar a cor vermelha (#f00 ou #ff000) no primeiro item da lista.

… 

 

Solução para inline-block no Internet Explorer 7

Se levarmos em conta todo aquele papo de código semântico na hora de passar um layout de imagem pra html e css sempre teremos a companhia de algumas tags, e uma delas é a
<ul>, que deve ser usada para uma lista (o rly?). Ultimamente tenho trabalhado com layouts melhores e devido as exigências de onde eu trabalho, preciso codificar páginas que sejam compatíveis com o IE7, já que não damos mais suporte ao IE6.

Quando você busca utilizar uma lista e precisa estipular tamanhos e alguns outros atributos nela e nos items, você precisa utilizar o elemento “block”, e em alguns casos, se esse elemento tiver que ficar em linha, será necessário usar o “inline-block”. Mas e aí, o que tem demais? O inline-block não está implementado no IE7.

SELETOR {display:inline-block;}

Para solucionarmos esse problema, só precisamos duplicar o seletor e colocar um “* + html” antes do seletor, trocar o display por inline e pronto!

Exemplo:

* + html SELETOR {display:inline;zoom:1;}

Pronto, problema resolvido!

Aprendi com o Édipo!