0

Como resolver esse erro na linha table td:before {content: attr(db); que faz com o que não valide no W3C?

<!DOCTYPE html>
<style type="text/css">
table {width:100%; border-collapse: collapse;}
table tr {border: 1px solid #000; padding: 5px;}
table th, table td {padding: 10px;text-align: center;}

@media screen and (max-width: 35.5em) {
table {border: 0;}
table thead {display: none;}
table tr {margin-bottom: 10px;display: block;border-bottom: 1px solid #000;}
table td {display: block; text-align: right; border-bottom: 1px solid #000;}
table td:last-child {border-bottom: 0;}
table td:before {content: attr(db);float: left;font-weight: bold;}}
</style>

<table>
<thead>
<tr>
<th>Nome</th>
<th>Data de Nasc.</th>
<th>Salário</th>
<th>Cargo</th></tr></thead>
<tbody>
<tr>
<td db="Nome">Adão</td>
<td db="Data de Nasc.">01/01/1980</td>
<td db="Salário">R$ 1.250,00</td>
<td db="Cargo">Auxiliar de produção</td></tr>
<tr>
<td db="Nome">Eva</td>
<td db="data de Nasc.">01/01/1980</td>
<td db="Salário">R$ 2.500,00</td>
<td db="Cargo">Gerente</td></tr></tbody></table>
2
  • Rose eu entendi agora você trocou por isto {content: "NOME: ";}, mas entenda isto {content: "NOME: ";} é diferente disto {content: attr(db);}, é totalmente possivel validar o {content: attr(db);} em css-validator.org como eu disse na resposta, mas se o alternativo lhe resolveu ok. :)
    – Syzoth
    Commented 9/03/2016 às 14:45
  • Que bom que você gostou das respostas! A melhor forma de agradecer quem te ajudou é assinalando a melhor resposta como aceita e votando em todas que te ajudaram. Assim você garante que quem escreveu a resposta receba algo em troca, além de tornar o site mais limpo e útil pra todo mundo.
    – Jorge B.
    Commented 12/05/2016 às 15:22

3 Respostas 3

5

Vou arriscar a dizer que há um erro no Validador, pois as documentações (W3C, CDN Mozila, CND Mozila, W3Schools), dão vastos exemplos de como usar o attr em content, e estes exemplos não validam, pode testar. Então vai a dica comenta a linha /{content: attr(db);/ e valida, vai dar certo (levando em consideração o erro do validador).

Para fazer de acordo com os padrões HTML 4, o elemento td não possuí atributo db (vide Documentação), utilize então o abbr (vide Documentação) no lugar do db.

content: attr(abbr);

<td abbr="Nome">Adão</td>

Em resumo, comente a linha valide e seja feliz, pois nem a documentação da organização que valida está válida :).

Para HTML 5 use a dica do Afonso abaixo:

1
  • Ta certo valeu a dica.. já consegui resolver de outra maneira no <td coloquei um class="c1" e no style .c1::before {content: "NOME: ";} fiz uma modificações e agora esta como eu queria um CSS nível 3 ! sem erros de validação.
    – User2208
    Commented 24/02/2016 às 15:29
4

Realmente existe um problema é na hora de validar pelo https://jigsaw.w3.org/css-validator ele mostra este erro:

Value Error : content Parse Error attr(db)

Como na imagem:

jigsaw.w3.org/css-validator

O valor attr no content: não era suportado até algum tempo, mas hoje já é parte do CSS3, então se trata de um BUG https://github.com/w3c/css-validator/issues/24

No entanto se tentar validar em http://www.css-validator.org/ ele funciona normalmente (selecione em More Options > Profile : a opção CSS level 3, porque senão ele vai usar a versão 2.1) ele irá validar normalmente, veja o resultado:

css-validador.org

Considerações sobre o HTML

  • não use abbr=, ele está em desuso no html5.
  • O atributo db é invalido.
  • Ao invés de db="" use o atributo data- que é especifico pra este tipo de tarefa.

Agora informações adicionais:

  • Falta as tags <body>, <head> e <title> se não ele não valida

HTML e CSS validos

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo</title>
        <style type="text/css">
        table {width:100%; border-collapse: collapse;}
        table tr {border: 1px solid #000; padding: 5px;}
        table th, table td {padding: 10px;text-align: center;}

        @media screen and (max-width: 35.5em) {
            table {border: 0;}
            table thead {display: none;}
            table tr {margin-bottom: 10px;display: block;border-bottom: 1px solid #000;}
            table td {display: block; text-align: right; border-bottom: 1px solid #000;}
            table td:last-child {border-bottom: 0;}
            table td:before {content: attr(data-db);float: left;font-weight: bold;}
        }
        </style>
    </head>
<body>
<table>
<thead>
    <tr>
        <th>Nome</th>
        <th>Data de Nasc.</th>
        <th>Salário</th>
        <th>Cargo</th>
    </tr>
</thead>
<tbody>
<tr>
    <td data-db="Nome">Adão</td>
    <td data-db="Data de Nasc.">01/01/1980</td>
    <td data-db="Salário">R$ 1.250,00</td>
    <td data-db="Cargo">Auxiliar de produção</td>
</tr>
<tr>
    <td data-db="Nome">Eva</td>
    <td data-db="data de Nasc.">01/01/1980</td>
    <td data-db="Salário">R$ 2.500,00</td>
    <td data-db="Cargo">Gerente</td></tr></tbody>
</table>
</body>
</html>

Validado 100% em:

Dicas:

  • Realmente é bom validar o CSS e o HTML, mas não é tão importante assim, tem coisas como esta que funcionam mas não validam, então prefira apenas se importar se o CSS funciona em todos navegadores que deseja, mesmo que não valide.
  • Estão aparecendo muitas novas funcionalidade no CSS, nem tudo estará listado no validador e podem aparecer estes falsos problemas.

Resumindo, tente validar o que der, mas se algo falhar não se prenda tanto a isto, desde que funcione em todos navegadores que seus clientes usam (de preferencia os mais modernos) então estará tudo bem.

4

O erro do validador é justamente com o atributo db, porém não existe nenhum erro nesse código CSS.

A ressalva está, justamente, nos atributos db e abbr. O atributo db não existe, e para esses casos o padrão orienta que se use o prefixo data-, ou seja, o atributo deveria ser escrito como data-db. Através deste prefixo podemos escrever qualquer atributo que não esteja na especificação do HTML.

Além disso, o abbr sugerido em outra resposta não faz mais parte da especificação e não deve mais ser utilizado. Está obsoleto desde a versão 5 do HTML (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td).

1
  • O erro não é no atributo db, é do validador mesmo. Commented 14/03/2016 às 1:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .