TidBits

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.

Navegadores 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

Essa é uma galeria é Hoverbox Image Gallery, desenvolvida pelo Nathan Smith, e é uma idéia muito legal para se fazer uma galeria de fotos sem usar Flash ou Javascript.

É bem simples de fazer e funciona em todos os browsers. Veja o exemplo:

Para fazer igual, é só utilizar a mesma estrutura do html:

<div id="galeria">
<ul class="hoverbook>
<li><img src="#" alt="#" /><img src="#" alt="#" class="preview" /></a></li>
</ul>
</div>

A mesma imagem precisa ser invocada duas vezes (uma sem class definido, e outra com a class “preview” e para cada imagem da galeria, é só acrescentar um item li na lista.

Já o CSS, vai ficar assim:

#galeria{width:450px;}
.hoverbox{cursor:default; list-style:none;}
.hoverbox a{cursor:default; position:relative;}
.hoverbox a .preview{display:none;}
.hoverbox a:hover{font-size:100%; z-index:1;}
.hoverbox a:hover .preview{display:block; position:absolute; top:-33px; left:-45px; z-index:1;}
.hoverbox img{background:#fff; border-color:#aaa #ccc #ddd #bbb; border-style:solid; border-width:1px; color:inherit; padding:2px; vertical-align:top; width:80px; height:50px;}
.hoverbox li{background:#eee; border-color:#ddd #bbb #aaa #ccc; border-style:solid; border-width:1px; color:inherit; display:inline; float:left; margin:3px; padding:5px; position:static;}
.hoverbox .preview {border-color:#000; width:200px; height:150px;}

Em #galeria, é só definir a largura da galeria, enquanto o tamanho do thumb você configura em .hoverbox img . A largura da imagem quando aberta, fica na propriedade .hoverbox .preview mas a dica é se for aumentar o tamanho do preview, não se esqueça de aumentar o padding / margin entre os thumbs, do contrário a imagem ampliada vai obstruir o acesso à outras imagens da galeria.

Clique aqui para baixar o exemplo da Hoverbook Image Gallery.

Recentemente a Belinha comentou de CSS Global Reset num post falando de construção de sites cross browsers , mas acho que isso é tão importante que merece um post só pra ele.

Para entender o que faz o reset, pense que todo browser tem prioridades para definir o CSS de uma página. A ordem é:

1º - CSS inline : aquela porqueira <div style=”float:left”>

2º - CSS na página : outra coisa que não recomendo, e não vejo necessidade. É quando coloca a tag style dentro da tag head
<style> .publicidade { width: 200px; } </style>

3º - CSS externo : esse é o css normal, quando invocamos dentro do head <link href=”home.css” type=”text/css” rel=”stylesheet”/>

4º - CSS definido pelo browser: sim, isso existe e é isso que nos causa problemas.

Quando nenhum CSS é encontrado para um elemento (div, p, h1, img, etc..), o navegador 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, bordas dos elementos, etc…

É aí que entra o CSS Global Reset, que são uma série de propriedades css atribuidas a todos os elementos html, justamente para retirar o css definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Mac, Ie, Opera, etc.

Existem diversos CSS Global Reset ( normalmente as pessoas colocam alguma coisa a mais pra facilitar no seu projeto ), mas todos eles variam pouco. Vejam o que eu utilizo:

*{outline-color:invert;outline-style:none;outline-width:medium;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: inherit;
	font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea {  font-size: inherit; }

E normalmente, quando vou começar a montar um html, um projeto novo, eu altero as propriedades da fonte, por exemplo: se o layout for usar sempre arial, vale a pena trocar “font-family: inherit;” para “font-family: arial;”

Seja lá qual CSS Global Reset escolherem, usem sempre um quando iniciarem um projeto, isso evita muitooo trabalho.

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