W3C CSS验证器误判自定义counter-style图标问题及修复说明

结论 #

这个报错是不合理的，且相关问题已在W3C CSS验证器中修复。

问题背景 #

使用@counter-style定义的自定义计数器样式，在content属性的counter()函数中调用时，被W3C CSS验证器判定为无效值，报错信息如下：

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>

合理性依据 #

根据CSS规范及MDN文档，counter()函数支持counter(name, style)的语法形式，其中style参数可以是自定义的@counter-style名称，因此该写法完全符合规范。

修复情况 #

相关问题已通过验证器的修复提交解决，对应的修复工作已完成。

内容的提问来源于stack exchange，提问作者kevgiraultdev