El Tag Helper para Enlaces

Como se discutió en el artículo previo, el contenido estático como JavaScript y CSS ha sido alojado en el mismo servidor como el resto del sitio web. Sin embargo, también discutimos en artículos anteriores, que existen varias buenas razones para depender de un CDN para, al menos, parte del contenido estático, p.ej. las librerías principales de JavaScript y CSS. Si quieres saber mas sobre las razones, deberás leer el artículo anterior.

Entonces, cuando se incluye un JavaScript desde un CDN, puedes usar un "Tag Helper" para Script, como vimos en el último artículo, para archivos CSS, puedes usar el "Tag Helper" para enlaces. Si de alguna manera eres nuevo en HTML, debes estar preguntándote ¿Por que no usar el mismo "Tag Helper"?, la razón es que ellos dependen de diferentes etiquetas HTML: Los Scripts se incluyen con la etiqueta SCRIPT, mientras que un archivo CSS y archivos relacionados son incluidos con la etiqueta LINK.

El atributo fallback-href

la etiqueta HTML LINK usa el atributo href para dictar que archivo se debe incluir, como una adición a eso, el "Tag Helper" para enlaces ofrece el atributo fallback-href, que será la ruta a usar en caso de que la version CDN, la que debe ser proporcionada por el atributo href, falle por alguna razón. Aquí un ejemplo:

<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" />

En este caso, el archivo CSS para Bootstrap (un framework web muy popular) será cargado desde cdnjs (un CDN muy popular), pero si eso no funciona, una versión local será cargada desde la carpeta "Content". Sin embargo, detectar que el CDN ha fallado en entregar el archivo CSS puede ser difícil, pero el "Tag Helper" para enlaces puede ayudar con esto.

Los atributos fallback-test-*

Cagar un archivo CSS desde un CDN puede fallar silenciosamente, significa que tu página se vera mal por causa de la falta de código. Sin embargo, cuando se usa un "tag Helper" para enlaces, puedes entregar uno o varios atributos para comprobar si el CSS deseado fue cargado apropiadamente - si no, el valor del atributo fallback-href será usado.

Los atributos que se utilizarán se llaman fallback-test-class, fallback-test-property y fallback-test-value. Si no eres fluido en CSS, esto puede parecer complicado, pero básicamente significa que un valor específico, para una propiedad especifica, que pertenece a una clase especifica de CSS debería ser comprobada - si la prueba falla, la fuente de respaldo, como se especifica en el atributo fallback-href, será usado.

En el caso de Bootstrap, puedes esperar que exista una clase llamada sr-only (es usada por lectores de pantalla). pondrá la propiedad position a absolute, lo podrás ver si abres el archivo CSS Bootstrap.

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

Estos tres puntos de datos pueden ser usados para detectar si el CSS Bootstrap ha sido cargado apropiadamente o no, como sigue:

<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"
		  />

Te darás cuenta que el "Tag Helper" convierte esto en algún código HTML/JavaScript adicional, para permitir las pruebas de reserva. Se vera similar a lo que sigue:

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

Sumario

Usando "Tag Helpers" para script y enlaces, puedes fácilmente incluir archivos JavaScript y CSS desde un CDN, mientras que provees de fuentes de reservas locales por si se presenta alguna falla, como se vio en éste artículo y en el anterior.