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

Created on 18 Nov 2014 · 3Comments · Source: aspnet/Mvc

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>

3 - Done enhancement feature-Tag-Helpers

Source

DamianEdwards

Most helpful comment

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.

kylef000 on 26 Oct 2017

👍3

All 3 comments

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.

kylef000 on 26 Oct 2017

👍3

@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.

DamianEdwards on 26 Oct 2017

@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#!

kylef000 on 27 Oct 2017

Was this page helpful?

0 / 5 - 0 ratings