Qualquer designer CSS que se preze conhece a propriedades de numeração das listas (tags <li>), poucos mas sabem que os mesmos tipos de numerações podem ser adicionadas a qualquer conjunto de elementos, inclusive adicionando estilos personalizados aos contadores.

Veja o exemplo a seguir:

A lista acima, foi criada utilizando apenas elementos div, e os seguintes estilos:

div.list {
    counter-reset: my-list;     /* inicializa o contador */
}
div.list div {
    counter-increment: my-list; /* incrementa */
}
div.list div:before {
    content: counter(my-list) ". "; /* imprime */
}

A propriedade counter-reset inicializa a contagem com o identificador my-list a cada vez que um elemento <div> com a classe list é exibido. Já a propriedade counter-increment, incrementa este contador a cada elemento <div> “filho” do primeiro.

A partir daí, podemos utilizar os pseudo-elements :before, ou :after, para adicionar o valor do contador na propriedade content, utilizando a função counter(). A propriedade content, pode também receber qualquer string adicional, permitindo o uso de separadores diversos do contador para o conteúdo do elemento.

O fragmento HTML utilizado no exemplo acima está a seguir:

<div class="list">
    <div>foo bar</div>
    <div>foo bar</div>
    <div>foo bar</div>
</div>

As propriedades counter-reset e counter-increment aceitam também um segundo valor, numérico, usado, respectivamente, para definir o início da contagem (padrão 0) e o valor de incremento (padrão 1).

Veja o mesmo exemplo, iniciando o contador com -4, com incremento de 2:

div.list {
    counter-reset: my-list -4;  /* inicializa o contador */
}
div.list div {
    counter-increment: my-list 2;   /* incrementa */
}

A função counter() também aceita um segundo parâmetro, definindo o tipo de contador utilizado. Todos os tipos usados na propriedade list-style-type dos elementos <ul>, <ol> e <li> são suportados.

Para finalizar, vamos alterar os estilos e separadores dos nossos contadores, utilizando também um tipo diferente:

div.list div:before {
    content: "[" counter(my-list, lower-alpha) "]";
    font-family: monospace;
    padding: 0 10px 0 0;
    font-weight: bold;
    color: red;
}

…e o resultado:

Embora eu tenha utilizados elementos <div> nos meus exemplos, contadores podem ser adicionados a qualquer lista de elementos, incluindo as linhas ou colunas de uma tabela, por exemplo.

Todas as propriedades acima fazem parte das recomendações da W3C para CSS nível 2, que podem ser encontradas em http://www.w3.org/TR/CSS2/generate.html, e são suportadas pelos navegadores Firefox 3.0, MSIE 8, Google Chrome 2.0, Safari 3.0 e Opera 9.0, ou superiores.

Fonte: http://www.w3.org/TR/CSS2/generate.html

O AcidTests trata-se de um projeto do webstandards.org para testar o comportamento e eficiência dos navegadores frente aos padrões web.

O primeiro Acid (Acid1) testava os navegadores quanto a apresentação e exibição de páginas HTML 4.0 e CSS 1, o Acid2, criado em 2005, queria fazer os navegadores “sorrirem” testando as capacidades deste de exibirem imagens PNG e CSS2.

Agora, o Acid3 vai além, exigindo dos navegadores renderização de imagens SVG animadas e Javascript.

Eis a lista de especificações testadas:

• DOM2 Core
• DOM2 Events
• DOM2 HTML
• DOM2 Range
• DOM2 Style (getComputedStyle, …)
• DOM2 Traversal (NodeIterator, TreeWalker)
• DOM2 Views (defaultView)
• ECMAScript
• HTML4 (<object>, <iframe>, …)
• HTTP (Content-Type, 404, …)
• Media Queries
• Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
• XHTML 1.0
• CSS2 (@font-face)
• CSS2.1 (’inline-block’, ‘pre-wrap’, parsing…)
• CSS3 Color (rgba(), hsla(), …)
• CSS3 UI (’cursor’)
• data: URIs
• SVG (SVG Animation, SVG Fonts, …)

Segundo o desenvolvedor Ian Hickson, a internet não se resume mais a apenas designs HTML/CSS, assim é importante testar também as capacidades dos navegadores de DOM e Javascript.

O autor do Site DrunkenFist.Com fez uma série de teste e divulgou os resultados. Vou postá-los aqui tb:

• Camino 1.51 Mac OS 10.5 [49/100]
• Firefox 2 Mac OS 10.5 [50/100]
• Firefox 3 Mac OS 10.5 [53/100]
• Internet Explorer 6 Windows XP [11/100]
• Internet Explorer 7 Windows Vista [12/100]
• Internet Explorer 7 Windows XP [12/100]
• Firefox 2 Windows XP [50/100]
• Firefox 3 Windows XP [59/100]
• Safari 3 Mac OS 10.5 [39/100]
• Safari 3 Mac OS 10.5 Latest [87/100] (incrível!)
  
• Opera 9.24 Windows Vista [46/100]
• Konqueror built from SVN 2008.03.06 [63/100]
• IE8 Beta [17/100]
• Opera 9.5 [61/100]
• Firefox 3 Beta 4 on Windows XP [67/100]

Fontes: http://info.abril.com.br/blog/juliano/20080306_listar.shtml, http://www.drunkenfist.com/304/2008/03/04/acid3-test-released-
i-took-some-screen-captures-lots-of-fail/, http://www.webstandards.org/action/acid3/

Link com ajudaA ajuda de contexto vai aqui,
aparecendo somente quando o
usuário passa o mouse sobre o link

Existem várias bibliotecas JavaScript para utilizar este efeito, como a Overlib e também script.aculo.us, que tem um efeito parecido. Utilizando Js você tem efeitos mais interessantes, com a ajuda seguindo o mouse, etc, mas se precisar apenas de uma ajuda de contexto simples e leve, podemos fazê-lo apenas com CSS.

O conteito é bem simples…
Crie uma âncora <a>, com um span <span> dentro dela, que não é exibido (display:none), no estado Hover da âncora, o <span> terá ‘display:block’.

Como “um código vale mais que mil palavras”, aqui vai um exemplo:

/* Este é o estilo da âncora e span para o efeito */
 
a.help
{
    text-decoration:underline;
} 
 
a.help span
{
    position:absolute; /* para não alterar o
                         posicionamento da ancora */
    display:none;
} 
 
a.help:hover
{
    background-color:black; /* devido a um bug
                         no ie6 você deve alterar o
                         fundo (na verdade pode usar
                         a mesma cor, mas deve declará-la
                         aqui) do link ao passar o
                         mouse (???),
                         caso contrário o <span> não
                         aparecerá no ie6 */
} 
 
a.help:hover span
{
    display:block; /* por último, o <span>,
                        dentro do </span></span>,
                        fica com 'display:block' ao
                        passar do mouse */
 
     /* os demais estilos deste elemento não são
    necessários, apenas para melhorar o visual
    e você pode alterá-los a vontade*/
    margin-top: 0px;
    margin-left: 10px;
    border:1px solid white;
    background-color:#ffa303;
    color:white;
    text-decoration:none;
    font-size:12px;
}

Após definir o estilo, o código HTML para usá-lo é ainda mais simples:

<a href="#" class="help">
    Link com ajuda
    <span>
        A ajuda de contexto vai aqui,
 
        aparecendo somente quando o
 
        usuário passa o mouse sobre o link
    </span>
</a>