"content: attr" does not validate in W3C

Question

"content: attr" does not validate in W3C

Navigation

#1 by (5 votes)
#2 by (4 votes)
#3 by (4 votes)

0

How to resolve this error on the table td:before {content: attr(db); line that does not validate on 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>

html css w3c-validador

asked by anonymous 24.02.2016 / 14:04

3 answers

Repeat Loop in C Query in table with self-relationship

score 5 · Answer 1

I'll risk saying that there is an Validator error, because the documentation ( W3C , Mozilla CDN , CND Mozilla , W3Schools ), give you lots of examples of how to use attr in content , and these examples do not validate, can test. Then the tip comments on the line / content: attr (db); / and valid, will work (taking into account the error of the validator).

To do according to HTML 4 standards, the td element does not have db attribute ( see Documentation ), then use abbr ( vide Documentation ) instead of db .

content: attr(abbr);

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

In summary, comment the line valid and be happy, because even the documentation of the organization that validates is valid:).

For HTML 5 use the Afonso hint below:

score 4 · Answer 2

There really is a problem when it's time to validate by link it shows this error:

Value Error: content Parse Error attr (db)

As in the image:

Thevalueattrincontent:wasnotsupporteduntilsometime,buttodayitisalreadypartofCSS3,soitisaBUG link

However, if you try to validate in link it works normally (select More Options > Profile: the CSS level 3 option, otherwise it will use version 2.1) it will validate normally, see the result:

HTMLConsiderations

nouseabbr=,itisdeprecatedinhtml5.
Thedbattributeisinvalid.
Insteadofdb="" use the data- attribute that is specific for this type of task.

Now additional information:

The <body> , <head> , and <title> tags are missing if it does not validate

HTML and CSS valid

<!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>

Validated 100% on:

link
link

Tips:

It's really good to validate CSS and HTML, but it's not that important, there are things like this that work but do not validate, so you'd rather just care if CSS works on all browsers you want, even if it does not validate.
Many new features are appearing in CSS, not everything will be listed in the validator and these fake issues may appear.

In short, try to validate what you give, but if something fails do not stick to it as long as it works on all browsers your clients use (preferably the most modern ones) then everything will be fine.

score 4 · Answer 3

The validator error is just with the db attribute, but there is no error in this code CSS .

The caveat is, precisely, in the attributes db and abbr . The db attribute does not exist, and for these cases the pattern directs you to use the data- prefix, that is, the attribute should be written as data-db . Through this prefix we can write any attribute that is not in the HTML specification.

In addition, the abbr suggested in another answer is no longer part of the specification and should no longer be used. It has been obsolete since HTML version 5 ( link ).