Bug : False error in the validator with @counter-style on content pseudo-element property.

KevinGIRAULT commented 1 year ago

The at-rule counter-style allows you to create your own list styles. But the validator does not support it.

Error message :

Sorry! We found the following errors (1)
URI : TextArea
38      Value Error : content icone is not a content value : counter(step,icone)

// CSS

 .works {
      font-size: 2.5rem;
      font-weight: bolder;
      padding: 4rem 2rem;
    }

    .works ol {
      counter-reset: step;
    }

    .works ol li {
      padding: 2.5rem 6.5rem 2.5rem 7.5rem;
      border-radius: 15px;
      font-weight: 500;
      font-size: medium;
      background-color: #F6F6F6;
      margin-top: 2rem;
      margin-left: 1rem;
      box-shadow: 2px 4px 14px -5px #888;
      position: relative;
    }

    .works ol li::before {
      content: counter(step);
      counter-increment: step;
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: -1rem;
      border-radius: 50%;
      background-color: #9356DC;
      padding: 5px 8px;
      color: white;
      font-size: 1.1rem;
    }

    .works ol li::after {
      content: counter(step, icone);
      counter-increment: icone;
      list-style: icone;
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: 3.5rem;
      color: #808080;
      font-size: 2rem;
    }

    .works ol li:hover {
      background-color: #f5edff;
    }

    @counter-style icone {
      system: additive;
      additive-symbols: "\f54e" 3, "\f0ca" 2, "\f3cd" 1;
    }

// HTML

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Works</title>

      <style>
      ol,
      ul,
      menu,
      li {
        list-style: none;
      }
    </style>

  </head>
    </head>

    <body>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
      <div class="works">
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </body>

    </html>

For information : the MDN page of Content property :

Values counter()

The value of a CSS counter, generally a number produced by computations defined by and properties. It can be displayed using either the counter() or counters() function.

The counter() function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified (decimal by default).

And in w3c page of content property :

Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering

ylafon commented 1 year ago

Thanks for the report, only default counter-styles were checked not user-defined ones.

KevinGIRAULT commented 1 year ago

Thank you :-)

w3c / css-validator

Bug : False error in the validator with @counter-style on content pseudo-element property. #380