CSS no Lanche

Muitos desenvolvedores desconhecem que existe no W3C uma folha de estilos padrão para o HTML4 com base em uma análise em User Agents para ser usada como referência para desenvolvedores, até eu desconhecia sua existência, descobri apouco em uma de minhas insessantes buscas por conhecimento. Ela se resume nas seguintes especificações:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A" }
:before, :after { white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

Teoricamente falando então essa folha de estilos então é para ser usada como base no desenvolvimento de browsers. Se todos os fabricantes de browsers utilizassem esse padrão, com certeza não teríamos mais que quebrar a cabeça para consertar erros bizarros em alguns browsers.

Para vocês verem a diferença que a entre as folhas de estilo, dêem uma olhada na folha de estilo padrão do Firefox 2 e Firefox 3. Não consegui achar a folha de estilos padrão do Internet Explorer para efetuar uma comparação, mas se alguém souber onde conseguí-la, eu agradeceria.

Você alguma vez já tentou fazer aqueles efeitos de bordas internas em imagens semelhantes a utilizadas no sites da Globo.com e não conseguiu ou não teve saco algum para descobrir como fazer? Pois bem, vou postar aqui uma forma muito simples de conseguir esse efeito que acabei encontrando aqui.

Primeiro vamos a marcação HTML, bem simples, utilizaremos listas para estruturar as imagens:

<ul>
	    <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
</ul>

No HTML nenhum segredo até agora, agora vamos iniciar o processo de verdade aplicando o CSS:

img {border:none}
ul {margin:0; padding:0; width:236px}
ul:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
ul li {list-style-type:none; float:left; margin:0 3px 3px 0}
ul li a, ul li a img {float:left; overflow:hidden}
ul li a:hover {border:4px solid #f00}
ul li a:hover img {margin:-4px}

Agora vamos a explicação de cada item:

• Linha 1: Retirei as bordas padrão do link, que por default são azuis, nesse momento minha imagem não pode ter borda alguma.
• Linha 2: Defini uma largura para meu objeto container (ul) para que as imagens ficassem uma ao lado da outra.
• Linha 3: Uma técnica utilizada para “limpar floats”, prometo fazer um post sobre isso qualquer dia desses.
• Linha 4: Adicionei float:left para colocar as imagens uma do lado da outra.
• Linha 5: É obrigatório o uso de float e oveflow:hidden para que as imagens não fiquem sambando na tela.
• Linha 6: É aí onde eu defini a cor e espessura da borda da imagem.
• Linha 7: Onde a mágica toda acontece, quando eu defini 4px de borda para a imagem no hover do link, para que o efeito ocorra corretamente eu preciso deslocar as margens da imagem com seus valores negativos nas 4 direções (top, right, bottom e left), por isso o valor de margin:-4px.

Agora vejam o exemplo em funcionamento.

Quando você inicia seus estudos com CSS, uma das primeiras coisas que quer aprender é a centralizar divs na página independente da resolução do usuário. Existe uma forma muito simples de fazer isso somente com a utilização de CSS. Observe a seguinte marcação HTML:

<div id="box"></div>

O que nós vamos fazer agora é centralizar essa div na tela do usuário utilizando o seguinte CSS:

#box {background-color:#ff0000; height:480px; left:50%; position:absolute; top:50%; width:640px}

A primeira vista você pode pensar que somente definindo position:absolute e as coordenadas left e top com 50% para a div funcionarão, mas vejam nesse exemplo o que acontece. Infelizmente assim não conseguiremos centralizar a div horizontalmente nem verticalmente, o segredo para que isso aconteça é muito simples, temos que adicionar margens negativas ao elemento que você deseja centralizar, da seguinte forma:

#box {background-color:#ff0000; height:480px; left:50%; margin:-240px 0 0 -320px; position:absolute; top:50%; width:640px}

Agora se repararem nesse exemplo, verão que a div estará sempre centralizada na tela independente da resolução do usuário. O segredo é utilizar as margens top e left com valores negativos. A base para se chegar a esses valores é a seguinte: Para a margin-top você deve pegar a altura total do elemento e dividir por 2, como temos alí uma div com um height de 480px, o valor final é de 240px, e para margin-left pegamos a largura total do elemento, que alí é de 640px, dividimos por 2, e chegamos ao valor de 320px. A partir daí basta utilizar esses valores negativos.

Testei e funciona perfeitamente nos seguintes Browsers: IE6, IE7, Firefox 2.0.0.18, Firefox 3, Safari 3(Win), Opera 9.5, Opera 10 Alpha, Google Chrome e Flock.

Está interessado em aprender boas práticas no desenvolvimento CSS? Então seria uma boa você dar uma olhada nesse overview:

| View | Upload your own