W3C Validator 拒绝自定义图标，尽管有规范-解网

问：

编辑：在此发布后 https://github.com/w3c/css-validator/issues/380 该错误已修复 https://github.com/w3c/css-validator/commit/eca30bb7e985a9027e01d310b1b9e5588ae4b2b9

AT 计数器样式规则允许您创建自己的列表样式。只是，这似乎会导致 w3c css 验证器出现问题。这是合法的吗？浏览器很好地支持了这一点，如果它是合法的，它就会使计数器样式的属性变得毫无用处。

错误信息：

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

提前感谢您的回答。

您可以试穿 https://jigsaw.w3.org/css-validator/#validate_by_input

.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;
}

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

有关信息：Content 属性的 MDN 页面：

值 counter（）

CSS 计数器的值，通常是由和定义的计算生成的数字性能。可以使用 counter（）或 counters（）函数。

counter（）函数有两种形式：“counter（name）”或“counter（name， style）”。生成的文本是给定名称在给定范围内的最内层计数器伪元素。它的格式为指定的（默认为十进制）。

在 content 属性的 w3c 页面中：

可以使用两个不同的函数指定计数器：“counter（）”或“counters（）”。前者有两种形式： 'counter（name）' 或 'counter（name， style）'。生成的文本是此伪元素范围内给定名称的最内层计数器; 它以指示的样式（默认为“十进制”）进行格式化。这后一个函数也有两种形式：“counters（name， string）”或 'counters（name， string， style）'。生成的文本是在此伪元素的作用域中具有给定名称的所有计数器，从从最外层到最内层，由指定的字符串分隔。计数器以指示的样式（默认为“十进制”）呈现。请参阅关于自动计数器和编号的部分

CSS W3C 验证

W3C Validator 拒绝自定义图标，尽管有规范

w3c validator rejects custom icons despite specifications

评论