Propriedade content do css com attr e tabela responsive

Propriedade content do css com attr e tabela responsive

Estava pesquisando uma solução maneira de tabela responsive para um cliente e descobri uma função muito bacana do css. Se trata do uso de atributos da tag do html na propriedade content do CSS.

O uso seria algo assim:

a{
    content: attr(title);
}

Num contexto mais prático:

No HTML:

<a href="http://www.aleatorica.com" title="Aleatorica"></a>

Que fica em branco no navegador, já que não tem conteúdo, com o CSS:

a:before{
    content: attr(title)
}

Vai gerar um bom: Aleatorica

O navegador insere o atributo title do tag como texto do link. Veja JSFiddle.

Claro que esse exemplo é muito pouco semântico.

Na solução de tabela responsive, nos formatos pequenos, o autor joga cada coluna para a linha de baixo. O problema é que as linhas ficam sem título. Por isso a solução é usar o recurso attr() com os novos atributos semânticos data- do HTML5 para dar rótulos às celulas da tabela, algo como:

<td data-label="Ano">1999</a>

Então com o CSS media queries, você pode requisitar que nos formato pequeno, a célula td também exiba o que está dentro do data-label.

A solução de Tabela Responsive vem desse autor: Responsive Data Tables | CSS-Tricks, mas só a publicação do post usa uma solução não semântica. Mas lendo os comentários, especificamente  o comentário de Chris Coyer, que por sua vez faz referência a outra pessoa, achamos o recurso ideal.

Curioso que as publicações são de 2011, mas nunca havia visto esse recurso de attr() em nenhum outro lugar.

O que é ainda mais interessante são as possibilidades do atributo.

Usando LESS, você pode criar uma classe com variáveis como: .roundcorner(@pixels) e usando como roundcorner(2px), roundcorner(10px). Porém quando você usa o LESS dessa maneira, ele consome muito recurso do cliente para compilar o CSS toda vez que ele entra na página, então eu nunca uso isso. Lembrando que o jeito ideal de usar LESS não é esse mesmo. Se você não conhece LESS, faremos um post sobre isso mais para frente.

Voltando ao assunto. Com esse attr() do css, daria para fazer o recuso do LESS acima, mas de forma nativa:

.roundcorner{
    border-radius: attr(data-radius);
}

Então é seria gerar HTML do tipo:

<div class="roundcorner" data-radius="2px"></div>

e

<div class="roundcorner" data-radius="10px"></div>

Demais!

Mas não.

Por enquanto esse recurso não funciona. Só funciona quando usado na propriedade content do CSS.

Felizmente, pesquisando sobre o atributo attr() no MDN, descobri que o uso da função em outras propriedades além de content estão sendo experimentadas.

Espero funcione e logo. O lado ruim é que irá bagunçar completamente o código de maus programadores, mas paciência.

Deixe uma resposta

O seu endereço de e-mail não será publicado.