Asp-fallback-href always triggers

Question

I play with asp core and want a fallback to my local bootswatchSlate.css which is in the wwwroot folder only if I can't access bootstrap from a cdn:

Layout.cshtml

<link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="css/bootswatchSlate.css"
          asp-fallback-test-class="hidden"
          asp-fallback-test-property="visibility"
          asp-fallback-test-value="hidden"/>

I always get the bootswatchSlate.css although the cdn is live and I can reach it. Where is my problem?

Answer 1

The fallback is always being loaded because your test indicates that the css file was not loaded. I looked at the css and the .hidden class has the style display:none. I have found choosing the fallback test takes a little trial an error because many of the styles in the css file are transformed by the browser such as em values.

You should update your html to match the following:

<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      asp-fallback-href="css/bootswatchSlate.css"
      asp-fallback-test-class="hidden"
      asp-fallback-test-property="display"
      asp-fallback-test-value="none" />