带有伪选择器（和引导图标）的 ASP.NET Core asp 后备标记帮助器

Question

我正在使用 ASP.NET Core 6，带有

asp-fallback

标签助手的

<link>

功能（我知道如何使用它，而且它对我来说效果很好）。

我还使用 Bootstrap Icons library。我无法让它与后备一起使用，因为它仅使用伪选择器（example）。

有没有办法将后备机制与伪选择器一起使用？如果不行的话有什么解决办法吗？

Answer 1

LinkTagHelper

后备机制不支持伪选择器。 repo 存在跟踪问题，因此也许会在 v7 中修复。

在那之前我正在使用WORKAROUND。我扩展了框架的后备代码来考虑伪选择器。

将其添加到 DOM：

@{
  var testClass          = "bi";
  var testPseudoSelector = "::before";
  var testProperty       = "font-family";
  var testValue          = "bootstrap-icons !important";
  var hrefFallback       = "/bootstrap-icons.css";
}
<meta name="x-stylesheet-fallback-test" content="" class="@testClass" />
<script>
  var scriptTag  = document.getElementsByTagName('SCRIPT');                      // this tag is "last" when browser gets here
  var metaTag    = scriptTag[scriptTag.length - 1].previousElementSibling;       // ...so meta tag immediately before is the one we want
  var metaStyles = document.defaultView && document.defaultView.getComputedStyle
    ? document.defaultView.getComputedStyle(metaTag, '@testPseudoSelector')      // here is the magic
    : metaTag.currentStyle;
  if (metaStyles && metaStyles['@testProperty'] !== '@testValue')
    document.write('<link rel="stylesheet" href="' + '@hrefFallback' + '" crossorigin="anonymous" />');
</script>

这与标签助手的作用非常相似，除了它还考虑使用

::before

override

的 getComputedStyle(element, pseudoSelector) 伪选择器。

我只需要一个库（bootstrap-icons）的这种解决方法，但如果您发现重复使用它，您可以将其重构为自定义标签助手，例如

PseudoSelectorAwareLinkTagHelper

。

Answer 2

有一个编译时工具，可以使用后备测试脚本构建部分 Razor 视图。

以下是其工作原理的简要概述：

您定义一个

LibDef.json

文件，其中包含客户端库列表，如下所示：

# this is only a fragment of the file; the documentation has a full sample
{
  "library": "bootstrap-icons",
  "version": "1.11.3",
  "provider": "cdnjs",
  "files": [
    {
      "file": "font/bootstrap-icons.min.css",
      "component":"_BootstrapIcons",
      "test-class":"bi",
      "test-property":"font-family",
      "test-element":":before",
      "test-value":"bootstrap-icons"
    },
    "font/fonts/bootstrap-icons.woff",
    "font/fonts/bootstrap-icons.woff2"
  ]
},
# Other libraries go here

将上面的 nuget 包和工具添加到您的项目中，然后构建。

定义

test-element

后，工具会生成

_BootstrapIcons.cshtml

部分剃刀视图，并将其放入

Pages/Shared

中。部分视图将如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
    integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
/>
<meta name="x-stylesheet-fallback-test" content="" class="bi" /><script>
    !function(e,t,l,i,n){var u,f=document,g=f.getElementsByTagName("SCRIPT"),g=g[g.length-1].previousElementSibling,n=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(g,n):g.currentStyle;if(n&&n[e]!==t)for(u=0;u<l.length;u++)f.write('<link href="'+l[u]+'" '+i+"/>")}("font-family","bootstrap-icons",["/assets/vendor/bootstrap-icons/font/bootstrap-icons.min.css"]," rel=\u0022stylesheet\u0022 crossorigin=\u0022anonymous\u0022 referrerpolicy=\u0022no-referrer\u0022",":before");
</script>

否则，该工具会生成常规 ASP.NET 后备：

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
    asp-fallback-href="/assets/vendor/bootstrap/css/bootstrap.min.css"
    asp-suppress-fallback-integrity="true"
    asp-fallback-test-class="visually-hidden"
    asp-fallback-test-property="position"
    asp-fallback-test-value="absolute"
    integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
/>

全面披露： 在我的 ASP.NET Pull 请求修复此问题被拒绝且没有任何解释后，我编写了上面链接的工具。