Mas não é tempo de comemorar, ainda há muito trabalho a fazer. Há oito anos o Zeldman publicou seu célebre artigo To Hell With Bad Browsers, em que nos explicava porque devíamos abandonar o suporte aos navegadores 4.0. O ponto básico era não ter que fazer várias versões do mesmo site. Uma versão apenas, com bom layout CSS, podia funcionar para todo mundo, com todas as vantagens dos padrões web, mas não nos navegadores 4.0.

Bom, fazem oito anos. OITO LONGOS ANOS! Há oito anos que podemos escrever uma versão só de cada site, desde que saibamos escrever hacks de CSS e ajustes de float para o Internet Explorer 6. Há oito anos que estamos repetindo o fato de que o Internet Explorer 6 é a pedra que restou em nosso sapato. Há oito anos que sonhamos em não ter que escrever hacks.

A morte do Internet Explorer 6 significa apenas isso: poder usar PNG transparente e não ter que escrever hacks (ou não ter que escrever tantos hacks.)

A Microsoft passou oito anos sem atualizar seu navegador para nos dar exatamente o que? PNG transparente? Nesse período, Firefox, Opera, Safari e Konqueror estão trabalhando em coisas como controle de opacidade, CSS transform, bordas com imagem, sombras, media queries, colunas e os maravilhosos novos seletores do CSS3. Coisas maravilhosas que você já pode usar, mas a maioria de seus usuários não vai ver porque usa Internet Explorer.

A morte do Internet Explorer 6 nos leva apenas ao lugar onde deveríamos ter chegado há oito anos: sites sem hacks. A Microsoft ainda está algumas gerações atrasadas e, se queremos usar CSS 3 e HTML 5 um dia, é bom parar de comemorar e voltar ao trabalho. Há um mundo para mudar.

• Lançado Firefox 3.5
• A internet tem que avançar sem o IE6
• Porque só para o iPhone?
• Browsers – Guerra Fria
• IE8 – O sonho não acabou

Você já precisou de criar uma tabela zebrada? Eu já, muitas vezes. Provavelmente se você não sabe programar, você precisa chamar um programador para escrever duas ou três linhas de código Javascript ou até mesmo usando JQuery, para fazer a mágica para você. A idéia do CSS, é que nós, designers, possamos controlar a aparência dos elementos HTML. Isso inclui conseguirmos fazer uma maldita tabela zebrada também. Para isso e para outros problemas parecidos, podemos utilizar a pseudo-classe nth-child. Com esta pseudo-classe é possível selecionar um determinado elemento dentro de uma árvore de elementos. Por exemplo, podemos selecionar todas as linhas ímpares das tabela. Legal, hein?

Cálculo básico

O cálculo utilizado pelo nth-child é bastante simples. Você vai usar na maioria das vezes soma. Lembra? A fómula será a seguinte: an+b.

1
2
3

table tbody tr:nth-child(2n+1) {
  background:lightgray;
}

O funcionamento é o seguinte: o browser aplica o estilo a cada 2 tr.
O código abaixo, aplica o estilo a cada 3 tr. E assim por diante.

1
2
3

table tbody tr:nth-child(3n+1) {
  background:lightgray;
}

Você pode facilitar, utilizando as palavras odd ou even, para selecionar os elementos ímpares ou pares da árvore.

1
2
3

table tbody tr:nth-child(odd) {
  background:lightgray;
}

Caso você queira pegar 9º, 19º, 29º e assim por diante:

1
2
3

table tbody tr:nth-child(10n-1) {
  background:lightgray;
}

Se o valor de a (an+b) é igual 0, você não precisa colocar a fórmula, apenas o número referente a ordem do elemento. Exemplo:

1
2
3

table tbody tr:nth-child(1) {
  background:lightgray;
}

Neste código, o browser iá colorir o background apenas do primeiro tr.

Veja o exemplo.

A propriedade nth-child faz parte dos seletores do CSS 3 e já pode ser utilizado em browsers atuais.

Se você ainda não leu sobre seletores do CSS, leia estes artigos abaixo:

• Seletores encadeados e agrupados
• Seletores do CSS – Pseudo-classes
• Seletores Complexos do CSS

• CSS 3 Columns
• Introdução sobre Media Queries
• Introdução ao CSS Animation
• Seletores Complexos do CSS
• Image-Replacement x Imagens

column-count

A propriedade column-count define a quantidade de colunas terá o bloco de textos.

1
2
3

 /* Define a quantidade de colunas, a largura é definida uniformimente. */
-moz-column-count: 2;
-webkit-column-count: 2;

column-width

Com a propriedade column-width definimos a largura destas colunas.

1
2
3

/* Define qual a largura mínima para as colunas. Se as colunas forem expremidas, fazendo com que a largura delas fique menor que este valor, elas se transformam em 1 coluna automaticamente */
-moz-column-width: 400px; 
-webkit-column-width: 400px;

Fiz alguns testes aqui e há uma diferença entre o Firefox 3.5 e o Safari 4 (Public Beta).
O column-width define a largura mínima das colunas. Na documentação do W3C é a seguinte: imagine que você tenha uma área disponível para as colunas de 100px. Ou seja, você tem um div com 100px de largura (width). E você define que as larguras destas colunas (column-width) sejam de 45px. Logo, haverá 10px de sobra, e as colunas irão automaticamente ter 50px de largura, preenchendo este espaço disponível. É esse o comportamento que o Firefox adota.

Já no Safari, acontece o seguinte: se você define um column-width, as colunas obedecem esse valor e não preenchem o espaço disponível, como acontece na explicação do W3C e como acontece também no Firefox. Dessa forma faz mais sentido para mim.

Como a propriedade não está 100% aprovada ainda, há tempo para que isso seja modificado novamente. Talvez a mudança da nomenclatura da classe para column-min-width ou algo parecida venha a calhar, assim, ficamos com os dois resultados citados, que são bem úteis para nós de qualquer maneira.

column-gap

A propriedade column-gap cria um espaço entre as colunas, um gap.

1
2
3

 /* Define o espaço entre as colunas. */
-moz-column-gap: 50px;
-webkit-column-gap: 50px;

Veja um exemplo destas propriedades aqui..

Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades não funcionam oficialmente em nenhum browser. Mas já podem ser usados em browsers como Firefox e Safari. Fique à vontade para testar e comentar aqui os resultados!

• nth-child
• Introdução sobre Media Queries
• Image-Replacement x Imagens
• Introdução ao CSS Animation
• Hierarquia de arquivos do Wordpress

• Digest 05/09: Javascript, JQuery
• Digest 05/09: Técnicas de CSS
• Digest 04/09: CSS, HTML e Layout
• nth-child
• CSS 3 Columns

As Media Types definem para qual tipo de media o CSS será direcionado.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML é formatado em cada dispositivo é diferente. Logo, o código CSS será diferente para cada um destes dispositivos.
Por exemplo, se você visita um site por um computador, ele não terá a mesma caso você o visite por um dispositivo móvel.
São dispositivos diferentes, com formas totalmente diferentes de navegação.
O exemplo acima é o mais comum. Mesmo assim, existem outras medias que podemos controlar, como por exemplo, impressão.
Abaixo segue uma lista das medias:

all

Para todos os dispositivos.

braille

Para dispositivos táteis.

embossed

Para dispositivos que “imprimem” em braille.

handheld

Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.

print

Para impressão em papel.

projection

Para aprensetações, como PowerPoint.

screen

Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.

speech

Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.

tty

Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.

tv

Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

Todos os nomes das medias são case-sensitive.

A utilização dessas medias são feitas como o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Exemplo</title>
 
	<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />	
 
</head>
 
<body>
 
 
</body>
</html>

Note a tag LINK. Estou linkando um arquivo de CSS, com o nome de estilo.css. Esse código CSS está destinado para funcionar em dispositivos de media HANDHELD, ou seja, aparelhos móveis, celulares com tela pequena ou aparelhos parecidos. Esse CSS não será aplicado por exemplo, quando o usuário visitar o site utilizando um desktop, por exemplo. Para tanto, teríamos que utilizar media SCREEN.

1

<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />

O Problema

Cada vez mais surgem dispositivos de diversos tamanhos com hardwares bem parecidos com os desktops. Isso faz com que a navegação destes aparelhos tenha uma experiência muito próxima de desktop. Um exemplo atual é o iPhone. Sua tela tem boa qualidade e seu navegador renderiza as páginas como um navegador normal de desktop. Logo, não tem motivo para prepararmos um layout e um CSS com media type HANDHELD para o iPhone. Apesar de ele ser um handheld, ele não trabalha como um. Contudo, ele também não trabalha como um desktop. Mesmo a renderização do MobileSafari sendo identica a de um desktop, o comportamento do usuário e a forma de navegação é diferente. Logo temos um meio termo. Não podemos disponibilizar um CSS para HANDHELD, nem um CSS totalmente SCREEN.

A Solução – Media Queries

As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado.

1

<link rel="stylesheet" href="estilo.css" media="screen and (color)" />

Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color.
Logo, este CSS não será aplicado em aparelhos Monocromáticos. Simples, ahn?

Operadores Lógicos

Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores são: not, and e only.

O not irá fazer uma sentença de negação. Por exemplo:

1

<link rel="stylesheet" href="estilo.css" media="all and (not color)" />

Sentenção verdadeira para dispositivos monocromáticos.

O only irá esconder os estilos de browsers que não reconhecem media queries. Antes da sentença, você coloca o only:

1

<link rel="stylesheet" href="estilo.css" media="only screen and (color)" />

É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or.

1

<link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />

Media features

Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Veja o exemplo:

1

<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />

Estou especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px.

Há uma lista de características que você pode utilizar aqui para selecionar os dispositivos que você quiser.

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

As media queries também são case-sensitive.

Não são todos os browsers que suportam media queries. Hoje em dia, isso é muito utilizado para separar o CSS para iPhone. O MobileSafari reconhece essas media queries, o que possibilita que você faça uma versão do CSS para iPhone. Mesmo assim, muitos por aí preferem fazer uma versão do site inteiro para estes dispositivos. Como já conversamos, isso depende das suas necessidades, público e tamanho do site.

Direto da fonte

• Media Types
• CSS Aural
• Media Queries

• nth-child
• CSS 3 Columns
• Introdução ao CSS Animation
• Seletores Complexos do CSS
• Porque só para o iPhone?

Elementos de Áudio e Vídeo do HTML5

A adoção de algumas características do HTML5 está se tornando cada vez mais frequente nos novos browsers. Isso é bom porque não precisaremos esperar tanto para que todos os browsers tenham suporte a grande parte das características do HTML5, Javascript e CSS3.

No Firefox 3.5, é nativo o suporte aos elementos de áudio e vídeo do HTML 5. Isso inclui suporte para encodes de vídeo Ogg Theora e Vorbis para áudio. O código para incluir um vídeo é basicamente este:

1
2
3

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>  
Atenção: Seu browser não suporta esse formato.
</video>

A mensagem que está entre a tag VIDEO é mostrada caso o browser não reconheça o formato de vídeo.
Caso o browser não abra o formato de vídeo OGG, você pode indicar para que ele abra um outro formato automaticamente, veja o código:

1
2
3
4
5

<video autoplay>  
  <source src="video.ogg" type="video/ogg">  
  <source src="video.mov">  
  Atenção: Seu browser não suporta esse formato.
</video>

@font-face – Suporte a fontes externas

A propriedade @font-face serve para que apliquemos fontes aos sites que não sejam default no computador do visitante. Ele era apenas suportado em browsers com motores Webkit, agora o Firefox trouxe essa possibilidade, aumentando o número de usuários que suportam essa característica.

A sintaxe:

1
2
3
4
5
6

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
 
body { font-family: "Bitstream Vera Serif Bold", serif }

Você define primeiramente a fonte que irá ser utilizada, indicando seu source para que o browser possa localizá-la e assim fazer o download para ser aplicada. Feito isso, você pode utilizá-la nos elementos normalmente, como você faz com as fontes default.

Já falamos sobre propriedade @font-face aqui.

Opacity

Agora não precisamos mais utilizar o prefixo -moz- antes da propriedade OPACITY. Antes utilizávamos para testes apenas. Agora o pessoal do Firefox tirou esse prefixo para favorecer a propriedade OPACITY, sem prefixo. Eu nunca gostei destes prefixos, mesmo assim, essas coisas evitam erros de funcionalidades entre os browsers, já que um pode interpretar de forma diferente propriedades que ainda não foram realmente lançadas.

A propriedade opacity modifica a opacidade dos elementos, onde o valor 0 é totalmente transparente, e 1 é totalmente visível.

1
2
3
4
5

div {
   opacity: 0.3;
   border: 3px solid black;
   background: orange;
}

E um bando de outras atualizações

E há uma série de outras atualizações interessantes para os desenvolvedores, veja uma lista completa aqui.

Daqui pra frente os browsers irão forçar ainda mais a evolução do desenvolvimento web em todos os sentidos. Eles estão cada vez mais implementando coisas novas, que se dependessem do mercado, iriam começar a serem utilizadas daqui a alguns anos. Graças a esta concorrência entre os navegadores, essas novas novidades estão sendo suportadas cada vez mais cedo e podemos começar a utilizar para melhorar os projetos a partir de agora.

Baixe o Firefox 3.5 aqui.

• Graceful degradation é tudo sobre Acessibilidade
• Porque só para o iPhone?
• O Chrome não quer dizer muita coisa
• IE8 – O sonho não acabou
• Browser Targeting Version

CSS Animation permite que modifiquemos propriedades do CSS e tenhamos o resultado ali, na hora.
Para isso, usaremos uma propriedade chamada transition. Essa propriedade é divida em 3 propriedades: transition-property que é a propriedade que deverá ser animada, transition-duration é quanto tempo a transição irá durar, e transition-timing-function é o tipo de transição.

Imagine o seguinte código:

1
2
3
4
5
6
7
8
9
10

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
}
 
div:hover {
   background:red;
}

O código acima faz com que quando o usuário passe o mouse em cima do DIV, o background mude de cor.

Vamos adicionar a propriedade transition agora. Note o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
 
   -webkit-transition: background 1s linear;
 
}
 
div:hover {
   background:red;
}

O CSS Animation entrará em ação com a propriedade transition.
Note que a propriedade tem o prefixo do Webkit, indicando que isso só funciona em browsers com este motor.

A propriedade transition tem 3 valores: o primeiro valor é a propriedade que você quer alterar. O segundo valor é o tempo que essa animação durará. O terceiro valor é tipo de transição.

Você pode fazer várias transições em, separando os valores por vírgulas. Veja o exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
 
   -webkit-transition: background 1s linear, width 1s linear;
 
}
 
div:hover {
   background:red;
   width: 400px;
}

Neste caso, iremos animar a largura do DIV e ao mesmo tempo, mudaremos a cor de background.

Exemplo de CSS Animation

CSS Transform

Tudo isso fica mais interessante se utilizarmos algumas propriedades do CSS Transform.
O CSS Transform é uma das características do CSS que tranformam a forma original dos elementos do HTML. Por exemplo, inclinação. Veja abaixo:

1
2
3
4
5
6
7
8
9
10

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
   -webkit-transition: background 1s linear, width 1s linear;
 
   -webkit-transform: rotate(3deg);
 
}

No código acima, utilizei a propriedade transform com o valor rotate. Este valor rotaciona o elemento em sentido horário para um determinado grau. No caso acima, ele está inclinando o elemento com o valor de 3 graus.

Podemos fazer uma animação interessante utilizando o transform: rotate. Teste o código CSS abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
   -webkit-transform: rotate(0deg);
   -webkit-transition: background 1s linear, width 0.5s linear, -webkit-transform 1s linear;
}
 
div:hover {
   background: red;
   width: 400px;
   -webkit-transform: rotate(360deg);
}

O código acima fará com que o elemento gire 360 graus.

Testei no iPhone

Fiz um teste rápido no iPhone. No iPhone, a função de HOVER é acionada quando o elemento é clicado. As animações funcionam perfeitamente, com exceção do giro de 360 graus que pára no meio e o elemento volta a posição normal.

Quem tiver algum celular Nokia com browser baseado em Webkit, faça uns testes e comenta com a galera os resultados.

Ainda é um rascunho no W3C

Tudo isso ainda é um rascunho lá no W3C. Mas a Apple já propôs sua idéia de como poderia ser o funcionamento do CSS Transformations aqui:
Apple’s Proposal for CSS Transformations.

O interessante é que os browsers hoje em dia estão andando com as próprias pernas. Na verdade não apenas os browsers, mas todos os desenvolvedores. Ninguém está esperando o W3C para implementar e inventar coisas. Todos estão ajudando a pensar como pode ser o desenvolvimento web de amanhã. O trabalho do W3C está se resumindo em estudar, incluir e modificar as idéias da comunidade e de suas equipes – que por sinal, estão em mais espertas e rápidas agora.

A documentação do rascunho do W3C está disponível aqui:
http://www.w3.org/TR/css3-animations/

Há bastante coisa para se ler aqui:

• Webkit Blog: CSS Animation
• Webkit Blog: CSS Transforms
• CSS: Transition Timing Functions

• Image-Replacement x Imagens
• Centralizando um objeto na Horizontal e Vertical com CSS
• nth-child
• CSS 3 Columns
• Introdução sobre Media Queries

• Digest 05/09: Javascript, JQuery
• Digest 04/09: Javascript, JQuery e Ajax
• Navegando com a jQuery
• jQuery é bom para designers
• Digest 06/09: Técnicas de CSS

• Navegando com a jQuery
• Digest 06/09: Javascript, JQuery
• nth-child
• CSS 3 Columns
• Digest 06/09: Técnicas de CSS

• Digest 06/09: Técnicas de CSS
• Digest 05/09: Javascript, JQuery
• Digest 04/09: CSS, HTML e Layout
• nth-child
• CSS 3 Columns