"content: attr" does not validate in W3C

Asked

Viewed 114 times

0

How to resolve this error on the line table td:before {content: attr(db); which makes it worthless in the 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>
  • Rose I understand now you left for this {content: "NOME: ";}, but understand this {content: "NOME: ";} is different from this {content: attr(db);}, it is entirely possible to validate the {content: attr(db);} in http://www.css-validator.org as I said in the reply, but if the alternative solved you ok. :)

  • I’m glad you liked the answers! The best way to thank those who helped you is to mark the best answer as accepted and vote for all who helped you. So you make sure that whoever wrote the answer gets something in return, in addition to making the site cleaner and more useful for everyone.

3 answers

5

I’m gonna go out on a limb and say there’s a mistake in Validator, for the documentations (W3C, CDN Mozila, CND Mozila, W3schools), give extensive examples of how to use the attr in content, and these examples do not validate, you can test. Then goes the hint comments the line /{content: attr(db);/ and validate, it will work (taking into account the validator error).

To do according to HTML 4 standards, the element td did not possess attribute db (see Documentation), then use the abbr (see Documentation) in place of db.

content: attr(abbr);

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

In short, comment the line validate and be happy, because neither the documentation of the organization that validates is valid :).

For HTML 5 use the tip from Afonso down below:

  • Ta right it was worth the hint.. I have already solved otherwise in the <td put a class="C1" and in the style . C1::before {content: "NAME: ";} made a modification and now this as I wanted a CSS level 3 ! without validation errors.

4

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

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

In addition, the abbr suggested in another answer is no longer part of the specification and should no longer be used. It is obsolete since HTML version 5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td).

  • The error is not in the db attribute, it is from the validator itself.

4

There really is a problem is time to validate by https://jigsaw.w3.org/css-validator it shows this error:

Value Error : content Parse Error attr(db)

As in the image:

jigsaw.w3.org/css-validator

The value attr in the content: was not supported until some time, but today is already part of CSS3, so it is a BUG https://github.com/w3c/css-validator/issues/24

However if you try to validate in http://www.css-validator.org/ it works normally (select in More Options > Profile : CSS level 3 option, because otherwise it will use version 2.1) it will validate normally, see the result:

css-validador.org

Considerations about the HTML

  • nay use abbr=, he is in disuse in Html5.
  • The attribute db is invalid.
  • Instead of db="" use the attribute data- which is specific to this type of task.

Now additional information:

  • Missing tags <body>, <head> and <title> if it does not validate

Validated HTML and CSS

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

Tips:

  • It’s really nice to validate CSS and HTML, but it’s not that important, there are things like this that work but don’t validate, so just prefer to care if CSS works in all the browsers you want, even if it doesn’t validate.
  • Many new features are appearing in the CSS, not all will be listed in the validator and these may appear false problems.

In short, try to validate whatever you can, but if something fails, don’t get so caught up in it, as long as it works on all the browsers your customers use (preferably the most modern ones), then everything will be fine.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.