web関連

【HTML】body内で外部cssを読み込む方法

2019/07/24

2019/07/25

【HTML】body内で外部cssを読み込む方法

body内で外部cssって読め込めるのか気になって調べた時の備忘録

HTML5.2からbody内にlinkを埋め込めるみたい

2017年12月頃に発表されたHTML5.2からbody内で外部css読み込めるようになったみたい

<body>
…
<!-- ↓body内に書ける -->
<link href="style.css" rel="stylesheet">
…
</body>

こういう風にbody内で外部cssを読み込めるようになった

外部css以外にlink要素を使って読み込めるものが他にもあるみたい
このサイトでbody-okって書いてあるlink要素のリンク種別?はbody内で使えるみたい

あと、style要素なんかもHTML5.2からbody内にかけるようになったみたい

<body>
…
<!-- ↓body内に書ける -->
<style>
	body{
		…
	}
</style>
…
</body>

body内で外部css何かが読み込めるようになったけど、極力使わない方がいいみたい
というのもcssファイルは読み込みが始まるとそのcssファイルが読み終わるまでHTMLコードの読み込みが中断してしまうからcssが当たってないhtmlページが表示される可能性があるっぽい

defer/asyncみたいなのがlink要素にあればいいのにね

だから、とりあえずは従来通りhead内に書いておくのが無難かも

HTML5.2以前にbody内に書く場合はjavascriptを使用していたみたい
一応調べたのでせっかくだから書いておく↓

 

javascriptを用いてbody内に外部cssファイルを読み込む

javascriptで外部cssを読み込む場合はこんな感じで書けばいいみたい

<body>
…
<script type="text/javascript">
  var link = document.createElement('link');
  link.href = 'css/style.css';
  link.rel = 'stylesheet';
  link.type = 'text/css';
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(link);
</script>
</body>

参考

これで外部cssを読み込ませることもできる

 

styleなんかはcssをとりあえず当てときたいとき普通に使ってたけど、HTML5.2からだったんだね
全然知らんかった、ほかにもdialog要素とか面白そうなタグ使えるようになってるから後で調べよ