DGmike

Calma! Eu sei que o certo é não usar CSS Hacks nem comentários condicionais, mas antes de me atirarem pedras eu tenho que me defender. Algumas vezes a pressa/pressão do cliente nos obriga a enfiar um hack ou outro, então temos que inserir mesmo assim. Hoje, quando termino um projeto meus arquivos CSS tem dois ou três hacks que acabo resolvendo após a entrega do material. Mas na hora do aperto, o cliente está contando os minutos, uma boa lista de CSS hacks pode salvar sua pele. Por isso essa lista de hacks para css que encontrei no AJAXIAN, originado pelo Paul Irish.

A lista definitiva pra resolver seus problemas mais comuns com CSS

O Paul ainda fez uma página de teste e você ainda pode ver um screenshoot de cada browser com os resultados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/***** Selector Hacks ******/
 
/* IE 6 e inferiores */
* html #uno { color: red }
 
/* IE 7 e superiores */
*:first-child+html #dos { color: red } 
 
/* IE 7 e browsers modernos */
html>body #tres { color: red }
 
/* Browsers modernos (exceto IE 7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 e inferiores */
html:first-child #cinco { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
/***** Hacks para Atributos ******/
 
/* ie6 e inferiores */
#once { _color:blue }
 
/* ie7 e inferiores */
#doce { *color: blue } /* ou #color:blue */
 
/* 'Browsers Modernos' incluem IE8, se concorda ou não .. :) */

O cara é tão bom nesse negócio de distinguir os browsersque criou uma lista de como reconhecer seu browser via javascript (para você escrever um código para determinado browser por exemplo). Mas, se você usa jQuery em seus projetos, ele já tem isso tá?!

Aqui na visie o pessoal está organizando uma série de palestras sobre produtividade, acessibilidade, linguagens, programação, produtividade. O custo de cada palestra é de apenas R$ 35,00 (R$ 30,00 se cadastrado com antecedencia) um preço muito amigável, levando em conta a informação que eles vão passar e a quantidades de horas que eles vão falar.

Não digo isso só porque eu sou funcionário da visie, mas antes de entrar aqui eu assisti a alguns eventos dos caras como o CodeShow, palestra (resenha do arquivo de audio) no ELPI e interCon, universidades ou mesmo videos no Youtube (ah, o bate papo com eles também é muito bom, por mais que saibamos, eles sempre tem uma coisa nova para ensinar) com palestras dos caras e digo, com experiência que vale a pena pagar o preço por cada hora com os caras.

As palestras vão até outubro e cada uma leva em torno de duas horas (das 19:30 até às 21:30) e acontecerão Colégio Adventista da Liberdade (fica uma rua atrás do metrô, como você pode conferir no mapa). E até agora, as paleastras são: Formulários, Internet Móvel, JQUERY, implementação de Layout CSS, Python, Acessibilidade e Controle de Versão.

Enfim, mesmo se eu fosse de outra cidade eu juntava uma excursão, pegava um ônibus e algumas palestras para visitar a cidade e ver a palestra dos caras mais tarde. Vale a pena, já fiz muito isso. Se você quiser saber mais detalhes sobre os eventos, o @diegoeis está tirando todas as dúvidas sobre os eventos no twitter e eu também posso colocar mais informações aqui no meu blog, basta comentar suas dúvidas.

[Nota] Para quem mora fora de São Paulo e virá de ônibus, o ônibus te deixa dentro da estação de metrô (a rodoviária e o metrô são interligados) e o evento é uma rua atrás do mesmo. O metrô em São Paulo é um meio de transporte muito seguro. Então quase não há perigo para ir às palestras.

Eu assino o feed do We Love WordPress e mais alguns outros feeds voltados para design de sites em CSS. Hoje, quando fui checar meu e-mail fui ver alguns feeds e me deparei com o site do Henrique Pereira, um ótimo escritor que fez mostra várias novidades e testes de teorias como os microformats.

É bom ver alguém que conheço (pelo menos de leitura) num ranking internacional. Um tempo atrás a @s1mone falou que o site da agencia que ela trabalha também saiu em um rankin assim. O interessante (e bom, diga-se de passagem) é que a presença de sites nacionais é bastante intenso.

No A List Apart o Alex Bischoff apresentou uma biblioteca em javascript muito interessante que implementa aos elementos de uma página as classes referentes às pseudo-classes :fisrt-child, :last-child, :nth-child-#, :nth-child-odd, :nth-child-even e nly-child.

Esta biblioteca é muito interessante para criarmos layouts em CSS para browsers que não têm um suporte legal a essas pseudo-classes. Há uma lista que demonstra que essa falta de implementação não é somente no mau e velho IE. Iso é um ponto muito forte para esta biblioteca.

:first-child – Não implementado pelo IE 6
:last-child – Não implementado pelo IE 6, IE 7 e Opera 9.x
:nth-child(#) – Não implementado pelo IE 6, IE 7, Safari 2.x, Firefox 2.x, Firefox 3 beta e Opera 9.x
:nth-child(odd) – Não implementado pelo IE 6, IE 7, Safari 2.x, Firefox 2.x, Firefox 3 beta e Opera 9.x
:nth-child(even) – Não implementado pelo IE 6, IE 7, Safari 2.x, Firefox 2.x, Firefox 3 beta e Opera 9.x
nly-child – Não implementado pelo IE 6, IE 7 e Opera 9.x

Tá legal DG, mas para que servem essas pseudo-classes?

Ao invés de teorizar sobre como estes elementos vão se intrometer em nossas vidas, vou explicar com exemplos pois acho que assim fica mais fácil de entender. Vamos a um exemplo prático, faremos um belo menu horizontal onde colocamos uma borda à direita de todos os elementos, exeto do primeiro, senão a coisa vai ficar estranha com uma borda à direita do menu.

Este é o código HTML:

<ul class="menu">
    <li><a href="/link_item1.html">Item 1</a></li>
    <li><a href="/link_item2.html">Item 2</a></li>
    <li><a href="/link_item3.html">Item 3</a></li>
    <li><a href="/link_item4.html">Item 4</a></li>
    <li><a href="/link_item5.html">Item 5</a></li>
    <li><a href="/link_item6.html">Item 6</a></li>
</ul>

Para colocar alguma formatação sobre o menu como um todo chamamos o elemento ul com a classe .menu.

ul.menu {
  /* Aqui virá a formatação necessária */
}

Para cada elemento filho do ul, ou seja para cada item de lista (li) basta chamarmos os li precedidos do nosso ul.menu: Colocamos o display: inline para que estes itens fiquem um ao lado do outro e a borda que havia dito anteriormente.

ul.menu li {
  /* Aqui virá a formatação necessária */
  display: inline;
  border-left: 1px solid black;
}

Agora, queremos retirar a borda apenas do primeiro elemento, ou seja o primeiro li, para isso podemos usar a pseudo-classe :fisrt-child

ul.menu li:fisrt-child {
  /* Aqui virá a formatação necessária */
  border:0;
}

Simples, não?!

Para fazer isto no último elemento, basta usar a pseudo-classe :last-child. Para elementos impares :nth-child-odd e :nth-child-even para elementos pares. Para elementos únicos nly-child pode ser usado e ainda existe a pseudo-classe :nth-child-# que contém o número do elemento que você deseja. Assim, com estas pseud-classes você pode implementar uma série de aplicações como o de colocar cores alternadas em linhas de tabelas ou mesmo o destaque para elementos únicos.

Hmmm… e como o offspring me ajuda nisso?

Como a vida é uma caixinha de surpressas, nem todos os browser suportam tais pseudo-classes (até hos dias de hoje) temos que nos virar com soluções mais inteligentes, e é para isso que a biblioteca serve, ela adiciona classes referentes a estas pseudo-classes.

Após “rodar” a biblioteca nosso exemplo html ficaria assim:

<ul class="menu first-child nth-child-odd only-child nth-child-1 last-child">
    <li class="first-child nth-child-odd nth-child-1">
        <a href="/link_item1.html" class="first-child nth-child-odd only-child nth-child-1 last-child">Item 1</a>
    </li>
    <li class="nth-child-even nth-child-2">
        <a href="/link_item2.html" class="first-child nth-child-odd only-child nth-child-1 last-child">Item 2</a>
    </li>
    <li class="nth-child-odd nth-child-3">
        <a href="/link_item3.html" class="first-child nth-child-odd only-child nth-child-1 last-child">Item 3</a>
    </li>
    <li class="nth-child-even nth-child-4">
         <a href="/link_item4.html" class="first-child nth-child-odd only-child nth-child-1 last-child">Item 4</a>
    </li>
    <li class="nth-child-odd nth-child-5">
        <a href="/link_item5.html" class="first-child nth-child-odd only-child nth-child-1 last-child">Item 5</a>
    </li>
    <li class="nth-child-even nth-child-6 last-child">
        <a href="/link_item6.html" class="first-child nth-child-odd only-child nth-child-1 last-child">Item 6</a>
    </li>
</ul>

Assim basta acessarmos as nossas pseudo-classes como classes normais.

Maravilhoso, supimpa!

Sim, esta biblioteca nos pouco um trabalho muito grande. Maaaaaaas! Eu sou da opinião que o javascript não pode ser obstrusivo, eu gosto do javascript e até assino o rss do client-side mas acho que a melhor solução é o bom e velho método de escrever o que desejamos de um elemento. O offspring é legal, resolve muitos problemas mas, se o carinha que vai ver o site não estiver com o JavaScript habilitado (sei, são raros os casos, mas eu desabilito o meu algumas vezes para navegar sem frescuras)? O CSS vai quebrar junto. O offspring navega todo o site vendo elemento por elemento adicionando as classes necessárias. Precário, não acha?! E… seja sincero, você já precisou usar estas classes na página toda? Eu não!

Por que não usamos o velho médoto de nomear as classes necessárias? Nosso HTML ficaria mais interessante se fosse escrito assim:

<ul class="menu">
    <li class="primeiroItem"><a href="/link_item1.html">Item 1</a></li>
    <li><a href="/link_item2.html">Item 2</a></li>
    <li><a href="/link_item3.html">Item 3</a></li>
    <li><a href="/link_item4.html">Item 4</a></li>
    <li><a href="/link_item5.html">Item 5</a></li>
    <li><a href="/link_item6.html">Item 6</a></li>
</ul>

Resolveria nosso problema e não quebraria o CSS se o JavaScript estivesse desabilitado.

Ah, e o problema do par e impar, eu quero minha tabela cor sim/cor não!

Provavelmente sua tabela será gerada dinamicamente através de um script como PHP ou Python. Então use essa dinamicidade para gerar suas classes. Eu uso assim:

$parimpar = array ('par', 'impar');
for ($i = 1;$i<10;$i++)
  {
    echo "item: $i - " . $parimpar[$i%2];
  }

E isto resolve meus problemas, simples assim… Agora, se você já usa uma biblioteca poderosa como o jQuery ou o prototype e precisa desses elementos funcionando e não quer ter trabalho com a dinamicidade, aplique o CSS direto do JavaScript usando a própria biblioteca para que não hava quebra por causa do Js.

// Solução com o prototype
$$('table tr:nth-child(even)').setStyle({backgroundColor: '#900'});

// Solução com o jQuery
$('table tr:even').css ({backgroundColor: '#900'})

E com uma simples linha você tem o seu problema resolvido sem precisar queimar muita mufa. Sinceramente, não gostei da solução dada pelo A List Apart.

[Ps:] O jQuery tem 28 Kb e o offspring 14 Kb (5 Kb se comprimido), acho que não é uma perda muito grande (ganho de Kb) em vista da quanditade de funcionalidades adicionadas.