htmlのheadから画像を一つ読み込もうとしてlinkタグで詰まったので備忘。
参照: w3cschools
よくスタイルシートの読み込みとかでやるのが
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
でここで画像読み込んだりしようとした時に、relに何を指定すればいいんだろうって思った。
まずlinkタグとは、「当の文書と他の文書との関係性を設定しておく」メタデータを扱うもの。スタイルシートとかは「文書をどう呈示するかを述べる」に当たるものを表している。
linkタグで使える属性のうちいくつか列挙。
- href: ハイパーリンクのアドレス（他のリソースへのリンクであり、ダウンロードなどをできるようにする）を与える
- crossorigin: CROS周りのための属性。外部リソースリンクを意図し、非同一生成元の要請をどう取り扱うかを与える。値としてはanonymous || "": 'same-origin'とし、use-credentials : 'include'とする。あんまりここはよくわからず。。
- rel: 文書と行先リソースとの関係性を与える。
- icon: ドキュメント表示用アイコン。複数用意した時にmedia, sizes, typeなどから適切なものを使っていくれるらしい。
- stylesheet: 読んで通りのスタイルシートとして読み込む。
- preload: ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。フォントや画像など、 CSS の中から指しているリソースなどを先にすることでその後のレンダリングで必要な時にすぐ利用できるようになる。その場合中身については'as'を用いるらしい。asで使えるのはfont, image, script, style, audio...など。
- そのほかいろいろ。w3c, mozilla
- media: 使用するメディアによってスタイルシートを変えたい時とかに変える。widthとかも指定できるっぽい。
- print: 印刷とか？
- screen: computer screens, tablets, smart-phones etc.
- speech: screenreaders that "reads" the page out loud.
- all: 全部
とかとかがあるらしい。
今回はpreloadを使いたくて最低限調べたけれど、prerendererみたいなやつもいるっぽいので
そこの差分は今度調査しないと。