ブラウザでcssをキャッシュさせない方法

web制作をしてると、必ずこのようなやり取りがあります。
(吹き出しを使うのがめんどくさいので、ご了承くださいw)

 

私「修正しました。ご確認ください。」

お客様「変わってませんけど。」

私「キャッシュが残ってるのでは?スーパーリロードしてください。」

お客様「あ、変わりました。」 

 

何度このやり取りを繰り返せばいいの~~~!
と制作者なら誰でも1度は思ったことがあるはず。

そんなとき、私が大尊敬するコーディングの先生中田亨さんが教えてくれました。

cssをキャッシュさせない技を!!

 

cssをキャッシュさせないscript

javascriptを使います。

scriptのタグは、htmlの中のどこに書いてもOKです。

一般的に、先に読み込んでおきたい処理のときはheadの中に入れ
動きや効果を出すための処理の時はbodyの最後に入れるようにします。

今回の場合、スタイルシートを読み込ませる時の処理になるのでheadの中に書きます。

 

<script>
var ts = (new Date()).getTime();
document.write('<link rel="stylesheet" href="〇〇〇〇.css?t=' + ts + '">');
</script>

 

〇〇〇〇.cssは、キャッシュさせたくないスタイルシートのファイル名です。

new Date()).getTime()でアクセスしたときの日時をcssのファイル名に付け加えます。
これによって、アクセスするたびに毎回新しい数値が入り、ブラウザは新しいファイルだと認識して、キャッシュではなく新たなファイルとして読み込んでくれます。

 

ただ、キャッシュが使われないので、毎回最初から読み込むことになり
速度に若干影響するかもしれません。
今のところ、私の制作物ではほとんど影響ありませんが。

 

キャッシュ問題に悩む方、是非ご利用ください^^

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

4 + 9 =