是否可以使用@supports 测试对 ::marker 内容的支持？答案

【问题标题】：Is it possible to test for support for ::marker content using @supports?是否可以使用@supports 测试对 ::marker 内容的支持？
【发布时间】：2021-11-09 18:28:20
【问题描述】：

我想创建一个具有特定编号系统的嵌套有序列表，如下所示：

https://www.stairball.club/stairball-rules/

这是我正在使用的相关 CSS：

/* Numbering for nested rule lists */
.rule-list ol {
    counter-reset: rules;
}
.rule-list li {
    counter-increment: rules;
    font-weight: bold;
}
.rule-list li li {
    font-weight: initial;
}

.rule-list li::marker {
    content: counters(rules, '.') '. ';
    font-weight: bold;
}
/* Don't apply to Webkit which doesn't support ::marker content */
@supports (-webkit-hyphens: auto) {
    .rule-list li {
        list-style: none;
    }
    .rule-list li::before {
        content: counters(rules, '.') '. ';
        color: #E77B95;
        font-weight: bold;
        margin-left: -2em;
    }
}

我的代码基于这篇可爱的文章Styling Ordered Lists with CSS Counters。

在 Chrome 和 Firefox 中用我想使用的编号系统替换 li 标记很简单，但 Safari 拒绝替换：https://github.com/mdn/content/issues/984

Safari/WebKit supports the ::marker pseudo-element，但不是 content 属性。所以我需要回退到使用 ::before 伪元素，但这显然是bad for accessibility，而且它看起来也很糟糕，因为我无法正确缩进。数字不会出现在标记出现的地方，它们出现在文本本身中。我目前给它们一个负边距以将数字向左移动，但这在第一级嵌套之外还不够。

现在我正在测试浏览器是否是带有@supports 的WebKit，通过检查浏览器是否支持-webkit-hyphens，我知道只有WebKit 支持。然而，这并不理想，因为如果 WebKit 将来修复了对 content 属性的支持，新的 WebKit 浏览器将不会自动开始使用我的首选代码。我将无法区分旧的损坏的 WebKit 和新的固定 WebKit。另外，如果还有其他像WebKit这样的愚蠢浏览器，我将无法检测到它们的损坏。

有没有办法使用 ::marker 伪元素来测试选择器下对 content 属性的支持？

【问题讨论】：

标签： css webkit

【解决方案1】：

不，它不是，方法是为旧浏览器提供标记和后备它......如果它不是那么漂亮怎么办。

【讨论】：