こんにちは、Mkunです。
ブログを書いていてWordPressのテーマのカスタマイズ等もすることがあると思いますが思ったように反映されない時ってありませんか？
ブラウザの更新ボタンを押しているのにちっとも更新されない。特にSafariは他のブラウザに比べて頑なにCSSを読みに行ってくれません。
実はすべてのブラウザには更新よりももっと強い『スーパーリロード』なんてものを最近になって(昨日)知ったのでシェアしたいと思います。
スーパーリロードとは
通常、ページの再読み込みは『更新ボタン』『再読み込み』『リロード』など、矢印がぐるりとまわった図柄のボタンを押すと思います。
htmlに書かれたものはこの更新ボタンでほぼほぼ編集内容は反映されます。
CSSやJavaScriptでもhtml上に直接書かれていれば反映されるのが、別ファイルにリンクなどして書かれたもの(CSSファイル.cssや画像ファイル.png.jpg)は基本的には更新ボタンだけでは読みに行ってはくれません。
ブラウザにキャッシュといって更新頻度が低いファイル(特にCSSは複数のページで共有する性質のため)はアクセスの度に毎回サーバーから読み込んでいてはサーバも大忙しですし、ブラウザとしても表示が遅くなってしまうのでこのような機能があります。
通信が大昔とは違い高速ですが、それに伴って画像ファイルも大きく、高画質で利用され、CSSファイルはレスポンシブ化といってPC用とスマホ用に書き分けられたりして、実はページ上で見えていない情報の方が見えているものより膨大です。
そこで能動的にページに関連するファイル群も読み込みする機能が別に用意さてています。(されている様なのですっ。)
一般的にスーパーリロード、強制再読み込み、フルリロードなどと呼ばれています。
そんな機能があるともつゆ知らず、私は毎回キャッシュを空にしに行ってました。
ブラウザによって操作方法が違う
『スーパーリロード』は一般名称であり、そういった機能の定義はありません。強制読み込みするファイルなどはブラウザによって挙動はさまざまです。
Google ChromeやFirefox、Safariなど一般的なブラウザはshiftキーを押しながらいつもの再読み込み(リロード)ボタンを押せば実行できます。
私のようにスーパーリロードを知らずに、キャッシュを空にする方法しか知らない方が少しでも減るようにと記事にしてみました。(CSSいじるような人で知らない人はいないだろ〜な。。)
この記事が役に立ったよ！って人がいたらコメントください(笑)
