ASP.NET Core 6中asp-fallback如何适配伪选择器场景Bootstrap Icons

原生支持性结论 #

ASP.NET Core 6 内置的<link>标签辅助程序asp-fallback特性原生不支持伪元素/伪选择器场景的资源检测。

该特性生成的回退检测脚本逻辑非常固定：

1. 动态创建一个隐藏的测试DOM元素
2. 给元素绑定配置中指定的测试CSS类
3. 直接读取该元素本身的计算样式，和配置的预期属性值做比对
4. 如果属性值不匹配，判定CDN资源加载失败，插入本地回退CSS链接

整个检测流程没有调用getComputedStyle的第二个伪元素参数，完全不会读取::before/::after这类伪元素的样式属性。很多开发者接入Bootstrap Icons、Font Awesome类图标库时回退失效，本质是错误地把检测目标设成了伪元素专属的content属性，原生脚本读不到该值就会永远判定CSS加载成功，自然无法触发回退逻辑。

可行实现方案 #

方案1：适配原生检测逻辑（推荐，无需自定义脚本） #

绝大多数图标库（包括Bootstrap Icons）并非所有核心规则都写在伪选择器上，只要选对普通元素上的检测属性，原生asp-fallback就能正常工作，不需要额外写脚本。

以Bootstrap Icons为例，它的字体声明是直接绑定在普通元素的.bi类上的，和伪元素无关，正确配置如下：

<link rel="stylesheet" 
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
      asp-fallback-href="~/lib/bootstrap-icons/font/bootstrap-icons.min.css"
      asp-fallback-test-class="bi"
      asp-fallback-test-property="font-family"
      asp-fallback-test-value="bootstrap-icons"
      asp-fallback-test-value-ignore-case="true"
      crossorigin="anonymous"
      integrity="替换为你使用版本对应的正确哈希值" />

这个配置检测的是.bi元素本身的font-family属性，只要Bootstrap Icons的CSS加载成功，该值就一定匹配，加载失败则会自动回退到本地资源。

方案2：自定义伪元素检测逻辑（适用于仅用伪元素做标识的资源） #

如果你使用的CSS资源确实没有任何绑定在普通DOM元素上的可检测样式，所有唯一标识都在伪元素规则上，可以放弃原生检测脚本，自己写轻量检测逻辑，代码直接紧跟在CDN资源标签后写入即可，避免页面渲染时图标闪烁：

<link rel="stylesheet" href="替换为你的CDN资源地址" />
<script>
(function() {
    // 创建隐藏测试元素
    const testEl = document.createElement('span');
    testEl.className = '替换为目标CSS的基础类名';
    testEl.style.cssText = 'position:absolute;visibility:hidden;top:-9999px;';
    document.body.appendChild(testEl);

    // 读取::before伪元素的计算样式
    const pseudoStyle = window.getComputedStyle(testEl, '::before');
    // 替换为你的资源加载成功判定规则，比如校验font-family、content属性
    const isLoaded = pseudoStyle.fontFamily.includes('替换为目标字体/资源标识') && pseudoStyle.content !== 'none';
    
    document.body.removeChild(testEl);
    if (!isLoaded) {
        const localCss = document.createElement('link');
        localCss.rel = 'stylesheet';
        localCss.href = '@Url.Content("替换为你的本地CSS资源路径")';
        document.head.appendChild(localCss);
    }
})();
</script>

这段逻辑和原生检测逻辑执行时机一致，体积仅几百字节，不会影响页面加载性能，也不会出现样式闪烁问题。

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