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のファイル名に付け加えます。
これによって、アクセスするたびに毎回新しい数値が入り、ブラウザは新しいファイルだと認識して、キャッシュではなく新たなファイルとして読み込んでくれます。
ただ、キャッシュが使われないので、毎回最初から読み込むことになり
速度に若干影響するかもしれません。
今のところ、私の制作物ではほとんど影響ありませんが。
キャッシュ問題に悩む方、是非ご利用ください^^