Auxiliar de Marca de Link no ASP.NET Core

  • Artigo

De Rick Anderson

O Auxiliar de Marca de Link gera um link para um arquivo CSS primário ou de fallback. Normalmente, o arquivo CSS primário está em uma CDN (Rede de Distribuição de Conteúdo).

Uma CDN:

  • Fornece várias vantagens de desempenho versus hospedar o ativo com o aplicativo Web.
  • Não recomendamos depender dela como a única fonte para o ativo. As CDNs nem sempre estão disponíveis, portanto, um fallback confiável deve ser usado. Normalmente, o fallback é o site que hospeda o aplicativo Web.

O Auxiliar de Marca de Link permite especificar uma CDN para o arquivo CSS e um fallback quando a CDN não estiver disponível. O Auxiliar de Marca de Link fornece a vantagem de desempenho de uma CDN com a robustez da hospedagem local.

A marcação Razor a seguir mostra o elemento head de um arquivo de layout criado com o modelo de aplicativo 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>

Veja a seguir o HTML renderizado do código anterior (em um ambiente que não seja de Desenvolvimento):

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

No código anterior, o Auxiliar de Marca de Link gerou o elemento <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> e o JavaScript a seguir, que é usado para verificar se o arquivo solicitado bootstrap.css está disponível na CDN. Nesse caso, o arquivo CSS estava disponível para que o Auxiliar de Marca gerasse o elemento <link /> com o arquivo CSS da CDN.

Consulte Auxiliar de Marca de Link para ver todos os atributos, propriedades e métodos do Auxiliar de Marca de Link.

href

Endereço preferencial do recurso vinculado. O endereço é passado para o HTML gerado em todos os casos.

asp-fallback-href

O URL de uma folha de estilos CSS para a qual fazer fallback caso o URL primário falhe.

asp-fallback-test-class

O nome da classe definido na folha de estilos a ser usada no teste de fallback. Para obter mais informações, consulte FallbackTestClass.

asp-fallback-test-property

O nome da propriedade CSS a ser usada no teste de fallback. Para obter mais informações, consulte FallbackTestProperty.

asp-fallback-test-value

O valor da propriedade CSS a ser usada no teste de fallback. Para obter mais informações, consulte FallbackTestValue.

Recursos adicionais