Create a <link /> Tag Helper with support for fallback sources

[DamianEdwards]

This is the CSS stylesheet equivalent of #1576

A LinkTagHelper that allows specification of a fallback stylesheet to load in the case the primary fails to load. The failure is determined by way of injecting a dummy <meta> tag with a specified class name (asp-fallback-test-class attribute) and then testing the computed style of that element to see if a specified CSS property (asp-fallback-test-property attribute) is equal to a specified value (asp-fallback-test-value).

Usage

<link href=""
      asp-fallback-href=""
      asp-fallback-test-class=""
      asp-fallback-test-property=""
      asp-fallback-test-value="" />

All the attributes are required to be present and non-null for the Tag Helper to operate. If any are missing, it will log a warning and no-op.

Arguments

Attribute Name	Type	Details
asp-fallback-href	string	The URL to fallback to if the primary one fails (as specified in the href attribute)
asp-fallback-test-class	string	The class name defined in the stylesheet to use for the fallback test
asp-fallback-test-property	string	The CSS property name to to use for the fallback test
asp-fallback-test-value	string	The CSS property value to to use for the fallback test

Example

Source CSHTML

 <link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
       asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
       asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />

Output HTML

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<meta name="x-stylesheet-fallback-test" class="hidden" />
<script>
    (function (a, b, c) {
        var d = document,
            s = d.getElementsByTagName("SCRIPT"),
            meta = s[s.length-1].previousSibling;
        (d.defaultView.getComputedStyle(meta)[a] === b ||
            d.write('\u003clink rel="stylesheet" href="' + c + '" /\u003e'));
    })("visibility", "hidden", "/lib/bootstrap/css/bootstrap.min.css");
</script>

[kylef000]

Sorry to comment on an old/closed issue. Was there ever any discussion for an option to test .css files that do not have singular classes?

Two examples:

• dataTables.bootstrap.css has at bare minimum two selectors chained together like table.dataTable { ... } but no standalone .dataTable class.

• Similarly with skin-red.css, there are only descendant selectors like .skin-red .main-header .navbar { ... } and again no standalone .skin-red class.

[DamianEdwards]

@kylef000 that's interesting, I'm not sure how one would even test for that in a generic way like we do using the injected <meta /> element.

[kylef000]

@DamianEdwards Ah, alright. I didn't see much in the way of questions regarding this in my cursory search on the matter, so it may not be something that is worth investing time into. Probably the best way around this is to fork, add a test class (like .skin-red-fallback-test { ... } ) within the individual file, then make a PR for whichever particular library one might be using.

Thank you for the response. Really appreciate your work on all things C#!