如何通过@supports检测浏览器对::marker伪元素content属性的支持？

完全可以通过@supports直接检测::marker伪元素的content属性支持性，无需依赖内核特征的间接判断。

完整兼容代码 #

优先写兜底降级逻辑，支持特性的浏览器自动覆盖使用最优方案，兼容性更强：

/* 基础样式 + 降级逻辑，所有浏览器默认生效 */
.rule-list ol {
    counter-reset: rules;
    --indent: 1.5em;
    padding-left: var(--indent);
}
.rule-list li {
    counter-increment: rules;
    font-weight: bold;
    list-style: none;
    position: relative;
}
.rule-list li li {
    font-weight: initial;
}
.rule-list li::before {
    content: counters(rules, '.') '. ';
    color: #E77B95;
    font-weight: bold;
    position: absolute;
    left: 0;
    transform: translateX(calc(-1 * var(--indent)));
}

/* 支持::marker设置content的浏览器自动切换原生方案 */
@supports selector(::marker) and (::marker { content: ""; }) {
    .rule-list li {
        list-style: unset;
        position: static;
    }
    .rule-list li::before {
        content: none;
    }
    .rule-list li::marker {
        content: counters(rules, '.') '. ';
        font-weight: bold;
        color: #E77B95;
    }
}

方案说明 #

• 检测逻辑和浏览器内核完全解耦，后续WebKit修复::marker的content属性支持后，新版浏览器会自动切换到更符合无障碍规范的原生实现，无需修改代码。
• 降级方案改用绝对定位+CSS变量控制缩进，替换原有的负margin方案，嵌套任意层级都能保证序号和原生marker位置对齐，不会出现错位问题。
• 降级逻辑写在最外层作为兜底，即使遇到完全不支持@supports selector()语法的老旧浏览器，也能正常展示自定义编号。

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