TidBits

Assim com o exemplo de :first-child e :last-child, para usar min-height e max-height é necessário css condicional.

Na verdade é bem simples, vamos supor que temos uma div que tem que ter uma altura mínima pra não “quebrar o layout”

<div class="post">
	Lorem Ipsum Fusce rutrum nibh.
</div>

E agora o CSS para ficar no mínimo com 200px por exemplo:

div.post {
    height: expression(this.scrollHeight <= "200" ? "200" : "auto");
    min-height: 200px; /* para ff, safari, chrome, etc */
}

E se fosse max-height seria assim :

div.post {
    height: expression(this.scrollHeight >= "200" ? "200" : "auto");
    max-height: 200px; /* para ff, safari, chrome, etc */
}

Isso resolve também alguns problemas com float e position absolute onde a div não calcula automaticamente a altura do elemento com float dentro da div.

Como o último post sobre a Microsoft foi muitíssimo polêmico, vou colocar um pouco mais de lenha na fogueira: apresento a vocês um plugin de Jquery para convencer os usuários a abandonarem o IE. Quem desenvolveu o plugin foi o pessoal do CSS Lab, o que justifica o nome “KillIE”, já que a esse navegador faz pior a vida de todos os htmlers e css’ers.

Indo um pouco na onda do que a Microsoft fez no Hotmail para o Chrome, o plugin exibe uma mensagem no alto da página, recomendando o uso de um outro navegador.

A versão original do plugin traz o texto “You’re using Internet Explorer 6, which is a terrible browser. Why don’t you try Firefox?”, mas você pode configurar outro texto, e se quer que ele apareça para o IE6 ou o IE7, e o navegador que deseja recomendar.

Utilizar o plugin, é ainda mais fácil do que falar mal do IE, basta invocar o Jquery e o plugin:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.killIE.js" type="text/javascript"></script>

Baixe aqui o Jquery e o KillIE

Depois, invoque o código do KillIE:

$(document).ready(function(){
$().killIE();
});

Para ver funcionando, entre aqui com o IE6.

Mas agora, depois que você já aprendeu a instalar o plugin, um lembrete: (deixando um pouco meu lado “interfacer” (amador) de lado, e falando como defensora do usuário que preciso ser) esse tipo de medida é arbitrária, e desaconselhável na maioria das vezes. Obrigar o usuário a conviver com uma mensagem amarela horrorosa, falando que o navegador dele é “terrível”, é uma atitude tão ruim quanto as que a Microsoft costuma tomar. Na verdade, parte do nosso trabalho é fazer as coisas boas para todo mundo, mesmo pra quem usa o famigerado IE6

Boa sexta-feira pra todo mundo!

Em meio a guerra dos browsers com o lancamento do Google Chrome, a Discovery exibiu na semana passada um documentário interessante: A internet - guerra dos navegadores.

O documentário conta a história do sucesso do primeiro navegador, que 12 pessoas ganharam uma cópia e logo se tornou 1 milhão de usuários e acabou se tornando o Netscape que teve anos hegemonia até que a Microsoft integrou o Internet Explorer no Windows.

O Vídeo está dublado em português. Vale a pena assistir (quem tiver 42 minutos livres).

Outros documentários sobre internet serão exibidos ao longo do mês, a programação está disponível aqui.

A famosa extensão para firefox ganhou uma solução para os demais browsers, o firebug lite. Não é a mesma maravilha, mas dá pra quebrar um galho na hora de procurar onde é que está a cagada.

Veja o Firebug Lite em funcionamento clicando aqui.

Funciona diferente, é um arquivo javascript que você deve invocar dentro da tag head da sua página.

<script type='text/javascript' src='js/firebug-lite.js'></script>

Além de obter todo o css dos elementos, é possível adicionar css. A página também passa a aceitar console.log(’teste’); para testar, ao invés de ficar dando alert(’teste’);

A documentação completa está disponível no site do firebug lite.

Para quem procura ferramentas de auxílio no desenvolvimento para o IE, recomendo também :

IE developer toolbar

Bom para corrigir erros de layout / css. É possível inspecionar, obter e alterar todo o css de um elemento.

E o Debug bar.

Esse é melhor para corrigir erros de javascript, lista todas os scripts e as funções e é possível executar javascript a partir de seu console.

O ie7.js é um script muito útil e muito bom, desenvolvido nos últimos 4 anos por Dean Edwards, tem 31 kb e o grande desafio de consertar os bugs de renderização de html e css do ie 5.x e 6.

E o que ele faz realmente?

Adiciona novos seletores :
:hover
:first-child
:last-child
[attr]
[attr="value"]
[attr~="value"]
[attr|="value"]
[attr^="value"]
[attr$="value"]
[attr*="value"]

Altera as propriedades de CSS
background-attachment - > aceitando posicionamento fixo
background-image -> passando a aceitar png alpha
cursor -> ie IE5.x passa a suportar pointer
display -> converte list-item para block no IE5.x
margin -> suporta auto no ie 5.x
adiciona as propriedades max-height, max-width, min-height e min-width

Arruma até o HTML e corrige bugs como o famoso “Doubled Margin” (float: left; margin-left: 10px;)

A descrição completa do que o script faz, com exemplos, está aqui.

Como eu coloco isso no meu site?

Faça download do script clicando aqui.
Insira o seguinte código dentro da tag head:

<!--[if lt IE 7]>
    <script src="js/ie7.js" type="text/javascript"></script>
<![endif]-->

Recomendo o uso desse script para backends, administrativos, pois normalmente para corrigir um bug, o script renderiza a página do jeito comum e só depois aplica o script e isso, nuUm site grande, pode ficar com o conteúdo “dançando” antes de ser completamente carregado.

Já tem uma versão para corrigir os bugs do ie7 também (ie8.js) e pode ser baixada no site do desenvolvedor.

Pseudo classes first-child e last-child servem para aplicar css no primeiro ou último ítem de uma seletor CSS.
É muito bom usar pra colocar cantos arredondados.

Normalmente as pessoas colocam :

<ul>
	<li class="primeiro"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="ultimo"></li>
</ul>

E depois aplicam css no li.primeiro e no li.ultimo, e quem tem que programar depois server side no server que se vire fazendo ifs.

Isso não é necessário!

Veja no exemplo de First Child, como colocar uma cor diferente no primeiro ítem do menu.

HTML :

<ul>
	<li>Programas Relacionados</li>
	<li>Comentários (4)</li>
	<li>Espalhe este Post</li>
</ul>

CSS :

#tabs ul li{ 

	/* font padrão - preto */
	font-color: #000;

	/* IE - CSS Condicional */
	font-color: expression(this.previousSibling == null ? '#F00' : '#000');

}

/*
	Pra todos os outros browsers é mais simples,
	é só usar o pseudo-classe :first-child
*/
#tabs ul li:first-child{ font-color: #f00; }

Funciona como um operador ternário normal :
Propriedade css : expression(condição ? valor verdadeiro : valor falso )

E se tivesse que escolher o último ítem?
Veja no exemplo, como colocar uma borda somente no último ítem:

#tabs ul li{
	border: 0;
	border: expression(this.nextSibling == null ? '1px solid #000' : '0');
}
#tabs ul li:last-child{ border: 0; }