Contadores e auto-numeração em CSS2

Tags: , — December 7, 2009 @ 6:58 pm

Estive pesquisando hoje algumas técnicas novas de CSS, e me deparei com um recurso muito interessante, que nunca utilizei, e nunca reparei que fosse usado em lugar algum antes. Trata-se da possibilidade de utilizar CSS para adicionar contadores e auto-numeração para qualquer elemento HTML.

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:

counter-1

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 */
}

Contador com início e incremento alterados

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:

Contadores estilizados

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

Acid Test – Testando a eficiência dos Web Browsers

Tags: , , , , — March 11, 2008 @ 4:48 pm

Nós, desenvolvedores e designers web, muitas vezes praguejamos contra certos navegadores web (alguém aí disse ie6?) por não exibirem corretamente nossas páginas, mas dificilmente pensamos no outro lado. A vida também não é muito fácil para quem desenvolve esses navegadores.

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:

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/

Ajuda de Contexto com CSS

Tags: , , — August 13, 2007 @ 1:52 pm

Quando construímos sistemas ou administração de sites é muito útil adicionar ajuda de contexto em alguns items (ao passar o mouse sobre um item um pequeno texto explicativo é exibido), mais ou menos assim:

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>