【HTML】見る側のブラウザのキャッシュのCSSや画像を更新する方法

Pocket

更新したはずなのに!

HTMLの更新完了! お客様、ご確認ください、というシーンで

お客様「変わってないようだけど?」

ブラウザに残ったキャッシュの可能性がありますのでキャッシュの削除を・・
削除方法は・・ブラウザは何をお使いでしょう?というようなやりとりがまれにあるかと思います

原因は?

見る側のパソコンのブラウザに残っていた古いデータ(キャッシュ)が
更新後の初回アクセス時に使われてしまい、
ページが予期せぬ表示になってしまうあの現象です。

どうしたらいいの?

つまり見る側のパソコンのブラウザに
「このCSS、今回は新しく読み込んでくださいね」と、どう教えるかですが、
てっとりばやく簡単な方法として

例えば、今までこう書いて読み込んでいたCSSだとしたら、

<link rel=”stylesheet” href=”/css/default.css” />

キャッシュ更新したい時はこう変えます

<link rel=”stylesheet” href=”/css/default.css?20150802″ />

その読み込むCSSのパスの最後に「?」をつけまして、
でたらめな文字をクエリとして渡すと、

ブラウザ「このCSSは、今までと違うこの値によって、違うデータに変化するかもしれない」

と認識して新しく読み込んでくれます。

上記の例の「default.css?20150802」は年月日ですが、
「?」の後は、URLとして意味を持たない文字列なら何でもいいです。

レイアウトを大きく変えるときなどちょっと加えておくと、
大きなタイムロスと信頼感へのダメージを未然に防げますので、
おまじないのように入れておくといいと思います!