ASP.NET Core のリンク タグ ヘルパー

作成者: Rick Anderson

リンク タグ ヘルパーによって、プライマリまたはフォール バック CSS ファイルへのリンクが生成されます。 通常、プライマリ CSS ファイルは Content Delivery Network (CDN) 上にあります。

CDN:

  • アセットを Web アプリでホストするよりも、いくつかのパフォーマンス上の利点があります。
  • アセットのただ 1 つのソースとして依存することはできません。 CDNs は常に使用できるとは限らないため、信頼できるフォールバックを使用する必要があります。 通常、フォールバックは Web アプリをホストしているサイトです。

リンク タグ ヘルパーを使用すると、CSS ファイルの CDN と、CDN が使用できない場合のフォールバックを指定できます。 リンク タグ ヘルパーによって、ローカル ホスティングの堅牢性が CDN のパフォーマンスの利点にもたらされます。

次の Razor マークアップでは、ASP.NET Core Web アプリ テンプレートを使用して作成されたレイアウト ファイルの head 要素を示します。

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

次に示すのは、前のコードからレンダリングされた HTML です (非開発環境)。

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

前のコードでは、リンク タグ ヘルパーによって <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> 要素が生成され、要求された bootstrap.css ファイルが CDN 上にあることを確認するために使用される次の JavaScript も生成されました。 このケースでは、CSS ファイルは存在しており、タグ ヘルパーによって CDN CSS ファイルを含む <link /> 要素が生成されました。

リンク タグ ヘルパーのすべての属性、プロパティ、メソッドについては、「リンク タグ ヘルパー」を参照してください。

href

リンクされたリソースの優先アドレス。 このアドレスは、生成された HTML に常に渡されます。

asp-fallback-href

プライマリ URL が失敗した場合にフォールバックする CSS スタイルシートの URL。

asp-fallback-test-class

フォールバック テストで使用するためにスタイルシートに定義されているクラス名。 詳細については、FallbackTestClassを参照してください。

asp-fallback-test-property

フォールバック テストで使用する CSS プロパティ名。 詳細については、FallbackTestPropertyを参照してください。

asp-fallback-test-value

フォールバック テストで使用する CSS プロパティ値。 詳細については、FallbackTestValueを参照してください。

その他のリソース