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

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

 

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

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

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

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

 

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

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

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

 

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

javascriptを使います。

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

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

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

 

 

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

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

 

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

 

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

コメントを残す

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

ABOUTこの記事をかいた人

りりちこです。福岡在住2児の母です♪ web制作をしてます。またwebデザインで仕事をしたい方のサポートもしてます。 目まぐるしく変化していくWebの世界で生き残っていくために、日々インプットアウトプットを繰り返しています。