HTML
CSS
firefox

FireFoxでちらつき(FOUC)が起こる

要約

  • 原因: bodyでcss読み込みを行ったため
  • 対策: 色々あるが今回はheadにcssを移動して解決

背景

UIを今風に実装したかった。

  • UIのパーツ毎にテンプレートファイル(html)を分ける
  • 同じ粒度でCSSファイルを分ける
  • 各テンプレートファイルにlinkタグを埋め込む
  • 結果としてbodyでCSSが五月雨式に読み込まれる
  • これぞHTTP/2の為せる業

↓こういうのがたくさんあるイメージ

parts1.html
<link rel=stylesheet href="parts1.css"> /* パーツ毎にcss読み込み */
<div class="parts1">
...
</div>

メリット

  • 必要最小限のcssを読み込める
  • linkタグの管理が楽

症状と原因

bodyでcssを読み込むような実装をしてみたところ、FireFoxでちらつきが発生。

原因は、CSSが当たる前のDOMや画像が一瞬表示されていたため。

これはFOUC(Flash of Unstyled Content)と呼ばれている。

FireFoxは他のブラウザと異なり、bodyに挿入されたlinkタグを非同期で読み込む仕様らしい。

対策

幾つかの方法がある

(a) おまじない

以下のように空のscriptタグを読み込ませることでブロッキングできる。

parts1.html
<link rel=stylesheet href="parts1.css">
<script> </script>/* おまじない */
<div class="hoge">
...
</div>

(b) JS頼み

スタイルシートの読み込みが完了するまで要素を隠す処理をJSで書く。

全てをJSで解決する今風なやり方。

(c) bodyで読み込むのは諦める

headでcssを読み込んだ場合は同期的に読み込まれるので、ちらつきは起こらない。

JSを殆ど使用しないアプリを使っていたため、JSを書きたくなかった。今回はこの方法を取った。

参考文献

The future of loading CSS
https://jakearchibald.com/2016/link-in-body/

Bodyに<link rel=stylesheet>を入れてCSSをロードする未来
https://qiita.com/memolog/items/846a0bec2515cdcd721b