July 7th,2020
＃
“as”属性について
“as”属性は“rel”属性の値に“preload”もしくは“modulepreload”、“prefetch”を指定された“link”要素によって先行して読み込まれる外部リソースの利用先を指定します。
“as”属性は“rel”属性の値に“preload”が指定されている場合は必須属性です。
“as”属性は読み込み順序の正しい順位付けやリクエストのマッチング、正しいコンテンツセキュリティポリシーの適用、正しい“Accept”HTTPヘッダーの設定のために必要です。
＃
指定できる値
| 属性値 | 説明 |
|---|---|
| audio | “audio”要素で埋め込まれる音声ファイル |
| video | “video”要素で埋め込まれる動画ファイル |
| track | “track”要素で埋め込まれる動画ファイル |
| script | “script”要素などで埋め込まれる外部スクリプト |
| style | “link”要素で読み込まれるスタイルシート |
| font | “@font-face”ルールで読み込まれるフォントファイル |
| image | “picture”要素や“img”要素で埋め込まれる画像ファイル |
| embed | “embed”要素で埋め込めれるリソース |
| object | “object”要素で埋め込めれるリソース |
| document | “frame”要素や“iframe”要素で埋め込まれるHTML文書 |
| リクエストデスティネーション | “Fetch”仕様書に定義されたキーワード |
| fetch | フェッチまたはXHR要求でアクセスされるリソース |
指定できる値は“Fetch”仕様書に定義されたリクエストデスティネーションのキーワードと“fetch”です。
“rel”属性の値が“modulepreload”の場合、指定できる値は“audioworklet”、“paintworklet”、“script”、“serviceworker”、“sharedworker”です。
値がないか不正な場合、“rel”属性の値が“modulepreload”の場合は“script”とみなされますが、“rel”属性の値が“preload”の場合はエラーとなります。
＃
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="preload" as="font" href="fonts/sample-font.woff" crossorigin>
<link rel="preload" as="script" href="script/sample-script.js">
<link rel="preload" as="image" href="img/coverpicture.png">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="script/sample-script.js"></script>
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
