【Labs】キャッシュを無効化せずにCSSの変更を反映させる方法

こんにちは（・∀・）

年の瀬も押し迫りました今日この頃、みなさんいかがお過ごしでしょうか。本日の投稿が年内最後の投稿となります。

今日は表題の通り、キャッシュを無効化せずにCSSの変更を反映させる方法についてご紹介します。

ファイル名にクエリの付加

ブラウザがキャッシュを読みこまないようにして修正したCSSファイルの変更を反映させるには、CSSファイルの名前の後ろ、例えばstyle.cssだったら拡張子の.cssの後ろにクエリを加える方法が一般的なのかと思います。

style.css?1225201710112260

実際のファイル名に?以下の数値を付加する訳ではなく、HTML上だけになります。

ちょっとわかりづらいかもしれませんが、実際のstyle.cssのファイル名はそのままでHTMLのlink要素のファイル名の部分だけを変更するのです。

HTMLはstyle.cssとstyle.css?xxxxは同じファイルと見做しますが、ブラウザは別ファイルと認識してキャッシュを読み込まないようになります。

<link rel="stylesheet" href="style.css?12252017100000">

拡張子の後ろの数字の部分を変更することでブラウザには新しいファイルだということを認識させることができるのでスーパーリロードをすることなく変更を反映させることができます。

この方法で一々スーパーリロードをする煩わしさから解放されますが、新たに一々HTML上のlink要素のファイル名を変更しなくてはいけないという作業が発生します。

なのでこのHTML上のファイル名を変更する方法をPHPで自動化します。

PHPでファイル名にクエリの自動付加

PHP

<?php echo date("YmdHis"); ?>

link要素のファイル名の最後に次のコードを付け足します。

?<?php echo date("YmdHis"); ?>

こんな感じになります。

<link rel="stylesheet" href="style.css?<?php echo date("YmdHis"); ?>">

これでCSSファイルをFTPでアップするたびにクエリに設定した日付が変わるので、ブラウザはファイルが新しくなったと認識してキャッシュを読み込まないようになります。

ちなみにtimezoneを設定しないと正しい日時が付加されません。

<?php date_default_timezone_set('Asia/Tokyo'); ?>

気になる方はlink要素の前に記述しておきましょう。気にならなければ敢えて記述する必要はありません。なくても問題ありません。

動作の確認はしてませんので保証できませんが、JavaScriptのjsファイルでも使えるのではないかと思います。

以上で本年最後の投稿となります。来年もよろしくお願い申し上げます。
Webデザインラボ管理人