Aprender CSS3?

Publicado em: 17/07/2006

Já é hora de aprender CSS3?

Nota: Este tutorial foi escrito em 2006. Hoje, 18 de outubro de 2009, já se pode considerar que é hora, sim, de começar seus estudos sobre CSS3.

NÃO! Não é! Esqueça!
Não perca seu tempo, a menos que você não tenha outra coisa a fazer, como por exemplo, aprender CSS1 ou CSS2.1 se já sabe tudo de CSS1. O estudo das Web Standards vem criando situações bastante curiosas. Tudo começou com a "febre semantiótica" e o famigerado minimalismo. Em meados do verão passado começaram a aparecer os primeiros sintomas da "ceceessetice 3" que ataca prioritariamente o "fazedor de sites" embora os desenvolvedores não estejam imunes à esta mais nova praga.

Algumas perguntas e afirmações típicas dos atacados pela doença:

• As CSS3 são a solução definitiva para todos os males do desenvolvimento.
• Quando poderei projetar CSS3?
• E para este problema, o que há nas CSS3?
• Não aguento mais esperar as CSS3.
• Informo que comecei a projetar meu primeiro layout CSS3.
• Está na hora de estudar CSS3.
• Escrevi um tutorial ensinando a escrever textos na vertical com CSS3.

Repito: Gaste seu tempo estudando CSS1 e esqueça CSS3 por enquanto, e talvez pelos próximos anos. Dois anos é um tempo razoável para aprender e dominar CSS1 e CSS2.1.

Finalidade deste tutorial

Escrevi este tutorial, primeiro para ressaltar que CSS3 não é uma realidade prática em curto prazo. E em segundo, para ilustrar a título de mera curiosidade o precário suporte para CSS3 (e não poderíamos esperar que fosse diferente) nos navegadores de última geração.
Você sabia que:
...o Grupo de Trabalho para CSS do W3C tem como mais alta prioridade os três itens abaixo listados:

1. CSS para dispositivos móveis 1.0.
2. Revisão das CSS2.1.
3. Seletores CSS3.

...o item que se encontra em fase mais avançada atualmente é o CSS para dispositivos móveis 1.0, uma especificação Candidata a Recomendação e que pode ainda reverter para uma fase anterior e mais, que tal Recomendação apenas define propriedades CSS já existentes a serem implementadas para aqueles dispositivos.

...os seletores CSS3 encontram-se em fase de última chamada para revisões (com prazo previsto para outubro próximo) para passar à próxima fase de Candidata a Recomendação e já passaram duas vezes por esta fase nos anos de 2001 e 2002 e voltaram a fase anterior e podem voltar outra vez.

...que os outros módulos de CSS3 estão classificados em prioridades mais baixas e a maioria deles encontra-se em fase de rascunho de trabalho.

Bem, se você não sabia, agora já sabe alguma coisa por trás das cortinas de CSS3. Caso você queira participar de revisões, postar comentários, fazer experiências e submeter sugestões como colaborador do W3C, através de listas patrocinadas pelo Grupo de Trabalho das CSS ou ainda apenas se informar como andam os trabalhos do Grupo, então vá em frente. Informe-se. Mas, se não é este o caso, não perca seu tempo em vão, estude CSS1.

O suporte para CSS3

Atualmente o suporte é precário para alguns poucos seletores CSS3, para declaração hsl de cores, e mais umas poucas propriedades, em alguns navegadores. O IE não suporta CSS3. O Ópera 9, o Netscape e o Mozilla, falham em alguns dois pouquíssimos suportados pelo Firefox que é o que suporta a maior quantidade dos alguns poucos. E por aí vai.
Na verdade, o frágil e precário suporte hoje existente foi implantado a título de experiência, eu diria como um bônus extra do fabricante do navegador, pois pode ocorrer até mesmo a mudança do que já está implantado, uma vez que ainda não há uma Recomendação definitiva.

Tire suas próprias conclusões.

Seletores CSS3

Abaixo uma listagem dos poucos seletores CSS3 com suporte conforme acima descrito:

1. E[atributo*="string"]
2. E[atributo$="string"]
3. E[atributo^="string"]
4. E~F
5. :root
6. :last-child
7. :only-child
8. :not ( )
9. :empty
10. :target
11. :enabled
12. :disabled
13. :checked

Demonstração

A seguir, conforme frisei acima, desenvolvi explicações e alguns exemplos usando propriedades CSS3.
Para cada uma das propriedades mostro a sintaxe geral da regra de estilização, descrevo sua finalidade e a seguir mostro um ou dois exemplos de aplicação da regra.

Importante: Para cada um dos exemplos, o valor da propriedade é a cor de fundo e a cor do texto contido no elemento estilizado.
Então, se o navegador que você está utilizando suporta a propriedade CSS3 a cor de fundo será verde escura e o texto será em em branco.
Se o navegador que você está utilizando não suporta a propriedade CSS3 a cor de fundo será vermelha e o texto será em em branco.

Para as propriedades escolhidas, todos os exemplos mostrarão falha (fundo vermelho) nos IEs, sucesso (fundo verde) no Firefox, somente os seletores de string e o seletor E~F no Ópera, falha/sucesso no Netscape e para os demais, comprove você mesmo.

O seletor de atributo E[atributo^="string"]

O seletor de atributo E[atributo^="string"] casa com o elemento E, que tenha o nome de atributo começando com string.
A sintaxe geral da regra CSS para este seletor é:
E[atributo^="string"] {propriedade: valor;} onde E é um seletor.

Exemplo

Os parágrafos a seguir que tenham o atributo title cujo nome inicia com ba terão o fundo na cor verde:

p[title^="ba" {background: #060;}

<p>Parágrafo sem cor de fundo verde</p>
<p title="exala">Parágrafo sem cor de fundo verde</p>
<p title="bala">Parágrafo com cor de fundo verde</p>
<p>Parágrafo sem cor de fundo verde</p>
<p title="babalu">Parágrafo com cor de fundo verde</p>
<p title="cabala">Parágrafo sem cor de fundo verde</p>

Renderização:

A pseudo classe :last-child

A pseudo classe :last-child casa com o último elemento, filho de um elemento container.
A sintaxe geral da regra CSS para esta pseudo classe é:
E:last-child {propriedade: valor;} onde E é um seletor.

Exemplo 1

O último item de uma lista com fundo na cor verde:

ol.teste-um li:last-child {background: #060;}

<ol class="teste-um">
<li>Item da lista</li>
<li>Item da lista</li>						
<li>Item da lista</li>						
<li>O fundo deste item deverá ser na cor verde</li>
</ol>

Renderização:

1. Item da lista
2. Item da lista
3. Item da lista
4. O fundo deste item deverá ser na cor verde

Exemplo 2

A última coluna de uma tabela com fundo na cor verde:

table.teste-dois tr td:last-child {background: #060;}

<table class="teste-dois" border="1">
  <tr>
    <td>Célula 1.1</td>
    <td>Célula 1.2</td>
    <td>Célula verde</td>
  </tr>
  <tr>
    <td>Célula 2.1</td>
    <td>Célula 2.2</td>
    <td>Célula verde</td>
  </tr>

  <tr>
    <td>Célula 3.1</td>
    <td>Célula 3.2</td>
    <td>Célula verde</td>
  </tr>
</table>

Renderização:

Célula 1.1	Célula 1.2	Célula verde
Célula 2.1	Célula 2.2	Célula verde
Célula 3.1	Célula 3.2	Célula verde

A pseudo classe :only-child

A pseudo classe :only-child casa com o filho único de um container.
A sintaxe geral da regra CSS para esta pseudo classe é:
E:only-child {propriedade: valor;} onde E é o único filho de um container.

Exemplo

Um elemento p filho único de um DIV e a seguir outro elemento p filho único de um blockquote, terão fundo verde:

p:only-child {background: #060;}

<div>
Um texto contido no div
<p>Este parágrafo é o único filho de um div e deverá ter fundo na cor verde</p>
e a seguir mais texto contido no div.
</div>

<p>Agora um parágrafo fora de div</p>

<blockquote>
<p>E agora um parágrafo filho único de blockquote e deverá ter fundo na cor verde.</p>
</blockquote>

Renderização:

Agora um parágrafo fora de div

E agora um parágrafo filho único de blockquote e deverá ter fundo na cor verde.

A pseudo negação :not()

A pseudo negação :not() nega o casamento com um elemento.
A sintaxe geral da regra CSS para esta pseudo negação é:
C :not(E) {propriedade: valor;} onde E é o elemento contido em C. Aqui a regra CSS será aplicada a todos os elementos contidos em C menos aos elementos E.

Exemplo 1

Queremos excluir os elementos span contidos dentro de um DIV e os demais terão fundo verde:

div.teste-quatro :not(span) {background: #060;}

<div class="teste-quatro">
<span>Um texto contido no div e dentro de SPAN não tem fundo na cor verde</span>
<p>
Este parágrafo é filho de um div e deverá ter fundo na cor verde
e</p> <span>aqui, dentro de SPAN, não tem fundo na cor verde</span>.
<blockquote>
<p>E agora um blockquote dentro do div e deverá ter fundo na cor verde.</p>
</blockquote>
</div>

Renderização:

Exemplo 2

Todas as colunas de uma tabela menos a última, com fundo na cor verde:

table.teste-cinco tr td:not(:last-child) {background: #060;}

<table class="teste-cinco" border="1">
  <tr>
    <td>Célula verde</td>
    <td>Célula verde</td>
    <td>Célula 1.3</td>
  </tr>
  <tr>
  <tr>
    <td>Célula verde</td>
    <td>Célula verde</td>
    <td>Célula 2.3</td>
  </tr>
  <tr>
    <td>Célula verde</td>
    <td>Célula verde</td>
    <td>Célula 3.3</td>
  </tr>
</table>

Renderização:

Célula verde	Célula verde	Célula 1.3
Célula verde	Célula verde	Célula 2.3
Célula verde	Célula verde	Célula 3.3

Nota: A pseudo negação está prevista para ser usada com pseudo classes, com seletores de atributo, com seletores simples, e praticamente será possível nagar qualquer condição. Mostrei apenas dois exemplos a título de ilustração conforme é o objetivo deste tutorial.

A pseudo classe :empty

A pseudo classe :empty casa com um elemento vazio.
A sintaxe geral da regra CSS para esta pseudo classe é:
E:empty {propriedade: valor;} onde E é um elemento vazio.

Exemplo

Um parágrafo vazio terá fundo verde:
Nota: para fins de visualização do fundo teremos que definir uma altura para o parágrafo.

div.teste-seis p:empty {background: #060;height:40px;}

<div class="teste-seis">
<p>Este parágrafo não está vazio e não deverá ter fundo na cor verde, 
mas o parágrafo seguinte está vazio e deverá ter fundo na cor verde.</p>
<p></p>
</div>

Renderização:

Bônus extra: Módulo de cores para CSS3

Os valores HSL e HSLA para cores

Atualmente você define cores em CSS usando valores hexadecimal, rgb, palavra chave ou baseado no Sistema Operacional do usuário. As CSS3 contemplam outras formas de definir cores entre elas usando o código hsl e hsla.

HSL é a sigla para Hue Saturation Lightness (matiz, saturação, luminosidade).
HSLA é a sigla para Hue Saturation Lightness Alpha (matiz, saturação, luminosidade, transparência alfa).
A sintaxe geral da regra CSS para definir cores segundo o código hsl é:
E {color: hsl(H, S%, L%);} onde E é o seletor, H é um valor angular (0 a 360 e seus múltiplos - na roda de cores), S% é a percentagem de saturação e L% é a percentagem de luminosidade.
No sistema hsla E {color: hsla(H, S%, L%, A);} acresenta-se uma trasparência alfa (A variando de 0 a 1) à cor definida.

Exemplo

Uma div de 400x100px terá fundo verde:

div.teste-sete {width:400px; height:100px; background: hsl(120, 100%, 13%);}

<div class="teste-sete">
DIV com cor de fundo verde, definida no sistema hsl
</div>

Renderização:

Nota: Nenhum navegador atualmente suporta o sistema HSLA de transparência alfa para cores.

Palavras finais