Asistente de etiquetas de vínculo en ASP.NET Core

  • Artículo

Por Rick Anderson

El asistente de etiquetas de vínculo genera un vínculo a un archivo CSS principal o de reserva. Normalmente, el archivo CSS principal se encuentra en una red Content Delivery Network (CDN).

Una CDN:

  • Proporciona varias ventajas de rendimiento frente al hospedaje del recurso con la aplicación web.
  • No se debe confiar en ella como el único origen para el recurso. Las redes CDN no siempre están disponibles, por lo que se debe usar una reserva confiable. Normalmente, la reserva es el sitio que hospeda la aplicación web.

El asistente de etiquetas de vínculo permite especificar una red CDN para el archivo CSS y una reserva cuando dicha red no está disponible. El asistente de etiquetas de vínculo proporciona la ventaja de rendimiento de una red CDN con la solidez del hospedaje local.

El siguiente marcado Razor muestra el elemento head de un archivo de diseño creado con la plantilla de aplicación web ASP.NET Core:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebLinkTH</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" 
              href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" 
              asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>

Lo siguiente es código HTML representado del código anterior (en un entorno que no es de desarrollo):

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home page - WebLinkTH</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"
          crossorigin="anonymous" integrity="sha256-eS<snip>BE=" />
    <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", ["\/lib\/bootstrap\/dist\/css\/bootstrap.css"],
                "rel=\u0022stylesheet\u0022 crossorigin=\u0022anonymous\u0022 integrity=\abc<snip>BE=\u0022 ");
    </script>

    <link rel="stylesheet" href="/css/site.css" />
</head>

En el código anterior, el asistente de etiquetas de vínculo generó el elemento <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> y el siguiente código JavaScript que se usa para comprobar que el archivo solicitado bootstrap.css está disponible en la red CDN. En este caso, el archivo CSS estaba disponible, por lo que el asistente de etiquetas generó el elemento <link /> con el archivo CSS de la red CDN.

Consulte Asistente de etiquetas de vínculo para todos los atributos, propiedades y métodos del asistente de etiquetas de vínculo.

href

Dirección preferida del recurso vinculado. La dirección se pasa al código HTML generado en todos los casos.

asp-fallback-href

La dirección URL de una hoja de estilos CSS en la que se va a realizar la reserva en caso de error en la dirección URL principal.

asp-fallback-test-class

El nombre de clase definido en la hoja de estilos que se va a usar para la prueba de reserva. Para obtener más información, vea FallbackTestClass.

asp-fallback-test-property

El nombre de la propiedad de CSS que se va a usar para la prueba de reserva. Para obtener más información, vea FallbackTestProperty.

asp-fallback-test-value

El valor de la propiedad de CSS que se va a usar para la prueba de reserva. Para obtener más información, vea FallbackTestValue.

Recursos adicionales