Tag Archives: Hack

Você não precisa de uma coleção de css hacks pra todos os browsers

Posted on by
7

Em quase todo blog tem uma coleção de hacks css, para todos as versões de todos os navegadores, opera, safari, ie6, ie7, firefox 2, firefox 3 etc etc… mas aqui você não vai encontrar, porque? Porquê você não precisa de hacks pra fazer um layout!

O jeito correto de escrever css é encontrar uma estrutura que funcione em todos os navegadores. Não faça o site pensando apenas no seu navegador favorito para depois encher de hacks para os demais e meter a culpa neles.

copyNavegadores são atualizados sempre, isso quando não surgem novos. A 6 meses atrás não existia o Google Chrome, Firefox 3 e pouco era utilizado internet em celulares no Brasil. Se o layout de um site foi construído errado e “consertado” com hacks, provavelmente o mesmo site está quebrando o layout nesses novos navegadores, por isso não vale a pena. Antes de criar uma hack, pense 10 minutos a mais resolver seu problema de outra forma. Tudo bem, tem hacks que realmente precisamos colocar por falta de suporte do ie6. min-height e max-height, o suporte a imagens alpha ( pgn24 ) tão usado pelos designers hoje em dia e os pseudo seletores :first-child e :last-child. Essas 3 opções, somente essas 3 não tem jeito mesmo, é colocar expression no seu css e filter pro png, mas de resto, nenhuma hack é necessária.

Outras técnicas que não recomendo são: display table, uso excessivo de float, margin com valores negativos, tudo isso não passa de gambearra para fazer o layout ficar no lugar onde está dando erro.

Dicas para ter menos problemas ao construir um css :

Utilize o CSS Global Reset para diminuir as diferenças entre os browsers. Cada browser, coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, etc… Com esse código, essas diferenças caem quase que por completo.

Para elementos fixos (que não tem variedade de tamanho) dentro de um container, tipo botões ou input / label de formulário, pense em utilizar position absolute, é uma técnica muito simples de se trabalhar quando se tem um xhtml válido, pois todos os navegadores interpretam da mesma forma a posição do elemento, ao contrário de float e margin que dão muitos problemas. O site americano Position Is Everything recomenda a técnica e explica melhor como utilizar.

Aqui no TidBits também nós disponibilizamos uma apostila e material de estudo sobre padrões web em português

Min-Height e Max-Height para IE usando css condicional

Posted on by
11

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 */
}
&#91;/sourcecode&#93;

E se fosse max-height seria assim : 

&#91;sourcecode language="css"&#93;
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 eliminar as diferenças de CSS do IE6 e iE5.x com o ie7.js

Posted on by
4

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 cross browser usando css condicional

Posted on by
4

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.

first-child e last-child cross browser usando css condificional

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; }