TL;DR:
- A
<meta>
tag is added to the DOM that has a CSS class of sr-only
.
- Additional JavaScript is written to the DOM, which:
- Locates said
<meta>
element.
- Checks whether said element has a CSS property
position
that is set to absolute
.
- If no such property value is set, an additional
<link>
element is written to the DOM with a href
of ~/lib/bootstrap/dist/css/bootstrap.min.css
.
The LinkTagHelper
class that runs against your <link>
elements inserts a <meta>
element in the output HTML that is given a CSS class of sr-only
. The element ends up looking like this:
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
The code that generates the element looks like this (source):
builder
.AppendHtml("<meta name="x-stylesheet-fallback-test" content="" class="")
.Append(FallbackTestClass)
.AppendHtml("" />");
Unsurprisingly, the value for FallbackTestClass
is obtained from the <link>
's asp-fallback-test-class
attribute.
Right after this element is inserted, a corresponding <script>
block is also inserted (source). The code for that starts off like this:
// Build the <script /> tag that checks the effective style of <meta /> tag above and renders the extra
// <link /> tag to load the fallback stylesheet if the test CSS property value is found to be false,
// indicating that the primary stylesheet failed to load.
// GetEmbeddedJavaScript returns JavaScript to which we add '"{0}","{1}",{2});'
builder
.AppendHtml("<script>")
.AppendHtml(JavaScriptResources.GetEmbeddedJavaScript(FallbackJavaScriptResourceName))
.AppendHtml(""")
.AppendHtml(JavaScriptEncoder.Encode(FallbackTestProperty))
.AppendHtml("","")
.AppendHtml(JavaScriptEncoder.Encode(FallbackTestValue))
.AppendHtml("",");
There are a few things of interest here:
- The last line of the comment, which refers to placeholders
{0}
, {1}
and {2}
.
FallbackJavaScriptResourceName
, which represents a JavaScript resource that is output into the HTML.
FallbackTestProperty
and FallbackTestValue
, which are obtained from the attributes asp-fallback-test-property
and asp-fallback-test-value
respectively.
So, let's have a look at that JavaScript resource (source), which boils down to a function with the following signature:
function loadFallbackStylesheet(cssTestPropertyName, cssTestPropertyValue, fallbackHrefs, extraAttributes)
Combining this with the last line of the comment I called out earlier and the values of asp-fallback-test-property
and asp-fallback-test-value
, we can reason that this is invoked like so:
loadFallbackStylesheet('position', 'absolute', ...)
I won't dig into the fallbackHrefs
and extraAttributes
parameters as that should be somewhat obvious and easy to explore on your own.
The implementation of loadFallbackStylesheet
does not do a great deal - I encourage you to explore the full implementation on your own. Here's the actual check from the source:
if (metaStyle && metaStyle[cssTestPropertyName] !== cssTestPropertyValue) {
for (i = 0; i < fallbackHrefs.length; i++) {
doc.write('<link href="' + fallbackHrefs[i] + '" ' + extraAttributes + '/>');
}
}
The script obtains the relevant <meta>
element (it's assumed to be directly above the <script>
itself) and simply checks that it has a property of position
that is set to absolute
. If it does not, additional <link>
elements are written to the output for each fallback URL.