html - .NET LinkTagHelper - 如何在没有显式 css 类选择器的情况下将它用于 CSS CDN 文件？

Question

我有一个 .NET Core 2.1 应用程序，我在其中通过“LinkTagHelper”.NET 帮助程序从 CDN 中提取一些资源。

我从一个明显的例子(效果很好)开始，就像这样:

    <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
      asp-fallback-href="~/lib/dist/css/bootstrap.min.css"
      asp-fallback-test-class="sr-only"
      asp-fallback-test-property="position"
      asp-fallback-test-value="absolute" />

现在一切都很好，回退工作(如果需要)CSS“sr-only”类被测试存在和正确性。

我也在尝试对他们 CDN 上的这个 CSS 文件做同样的事情:

    <link rel="stylesheet"
      href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"
      integrity="sha384-EkHEUZ6lErauT712zSr0DZ2uuCmi3DoQj6ecNdHQXpMpFNGAQ48WjfXCE5n20W+R"
      crossorigin="anonymous"
      asp-fallback-href="~/lib/dist/css/dataTables.bootstrap4.min.css"
      asp-fallback-test-class=".dataTable"
      asp-fallback-test-property="clear"
      asp-fallback-test-value="both" />

现在在上面的例子中，测试 css 类、属性和值选项是错误的——它们不起作用，所以回退总是被加载。我想知道是不是因为在dataTables css文件(here is the un-minified version)中，没有指定“class only”选择器，它们都是type + class。

所以，我怀疑我不能在这里做我想做的事，因为我不能选择合适的 CSS 选择器在 LinkTagHelper 中使用!如果总是回退，那我还不如没有 CDN。

我是否使用了 LinkTagHelper 错误，或者没有正确考虑这个问题？

(我知道我总是可以从我的站点加载它，而不必为这些恶作剧而烦恼，但是......如果我正在为一个图书馆做 CDN，最好保持一致)。

Answer 1

Now in that example above, the test css class, property and value options in place are wrong - they do not work, so the fallback is always loaded. I wonder if it's because in the dataTables css file (here is the un-minified version), there is no "class only" selector specified, they are all type + class.

So, I suspect that I can't do what I want here because I can't choose an appropriate CSS selector to use in the LinkTagHelper! If it's always going to fall back, then I may as well not have the CDN.

我继续查看 source code以查看使用助手时实际发生的情况。

如果你跟随源代码，你会看到助手基本上是在添加

1. 带有原始 CSS 文件的 link 标签
2. 一个 meta 标记，其类属性设置为 asp-fallback-test-class 属性中指定的值
3. 最后，它添加了一个脚本，该脚本将验证元元素的 asp-fallback-test-property 样式值是否与 asp-fallback-test-value 相同或不是。如果值不同，它会向 asp-fallback-href 中指定的 CSS 文件添加另一个 link。

对于您的情况，css 文件在 CSS 中包含带有一些标签 (table.dataTable) 的所有选择器，因此根据我的理解，很难确定 CSS 文件是否已加载，并且始终会导致回退 CSS 文件。

您可以通过 here 关注原始功能请求.

Am I using LinkTagHelper wrong, or otherwise not thinking about this properly? As per my understanding you are not, it just that your case is an edge case, if you will.

最后，您问题中的 asp-fallback-test-class=".dataTable" 只是一个小改动，应该是 asp-fallback-test-class="dataTable"(没有 .)。