The Link Tag Helper

As we discussed in the previous article, static content such as JavaScript and CSS has typically been served from the same server as the rest of the website. However, as we also discussed in the previous articles, there are several good reasons to rely on a CDN instead for at least some of the static content, e.g. major JavaScript libraries and the CSS they rely on. If you want to know more about the reasons, go back and read the previous article.

So, when including JavaScript from a CDN, you can use the Script Tag Helper, as we saw in the last article, and for CSS files, you can use the Link Tag Helper. If you're somewhat new to HTML, you might wonder why they can't use the same Tag Helper, but the reason is simply that they rely on different HTML tags: Scripts are included with the SCRIPT tag, while CSS and related files are included with the LINK tag.

The fallback-href attribute

The HTML LINK tag uses the href attribute to dictate which file to include, so as an addition to that, the Link Tag Helper offers the fallback-href attribute, which will be the path used if the CDN version, which should be provided in the href attribute, fails for some reason. Here's an example:

<link rel="stylesheet"
	  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"	  
	  asp-fallback-href="~/Content/bootstrap.min.css" />

In this case, the CSS for Bootstrap (a popular web framework) will be loaded from the cdnjs (a very popular CDN) location, but if that doesn't work, a local version will be requested from the local "Content" folder instead. However, detecting that the CDN has failed to deliver the required CSS file can be difficult, but the Link Tag Helper can help you with this.

The fallback-test-* attributes

Loading CSS from a CDN might fail silently, meaning that your page will look wrong because of the missing CSS. However, when using the Link Tag Helper, you can provide one or several attributes for testing whether the desired CSS was loaded properly - if not, the value of the fallback-href attribute will be used.

The attributes to be used are called fallback-test-class, fallback-test-property and fallback-test-value. If you're not fluent in CSS, this might seem complicated, but it basically means that a specific value, for a specific property belonging to a specific CSS class should be tested - if the test fails, the backup source, as specified by the fallback-href attribute, will be used instead.

In the case of Bootstrap, you can currently expect a CSS class called sr-only to exist (it's used for screen readers). It will set the position property to absolute, as you can see if you open up the Bootstrap CSS file:

.sr-only {
  position: absolute;
  ....
}

These three data points can be used to detect whether the Bootstrap CSS has been loaded properly or not, like this:

<link rel="stylesheet"
		  href="https://cdnjs.cloudflare.com/ajx/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" 
		  asp-fallback-href="~/Content/bootstrap.min.css"
		  asp-fallback-test-class="sr-only"
		  asp-fallback-test-property="position"
		  asp-fallback-test-value="absolute"
		  />

You will notice that the Tag Helper transforms this into some extra HTML/JavaScript, to allow for the fallback tests. It will look something like this:

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
	<meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
	<script>
	!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("position","absolute",["/Content/bootstrap.min.css"], "rel=\u0022stylesheet\u0022 ");
	</script>

Summary

Using the Link and Script Tag Helpers, you can easily include JavaScript and CSS files from a CDN, while providing local fallback sources, as seen in this article as well as the previous article.