【CSS】WEBサイトの更新時、自動的にCSSキャッシュを読み込む方法

Posted on by

WEBサイトのページを修正する際、CSSの変更は頻繁に行われることがあります。
しかし、その際によく起こる問題があります。

  • クライアントから修正の依頼を受け、内容を変更
  • 修正を行い、仮公開してクライアントに報告
  • クライアントから「何も変わっていない」との指摘
  • 実際にはCSSキャッシュが原因で、修正前のスタイルが表示されていた

このようなケースです。クライアントに「スーパーリロード」を行ってもらうことで解決できますが、
できれば自動でCSSが更新される方が望ましいです。

<link rel="stylesheet" href="./css/cm_pc.css?<?php echo date('Ymd-Hi'); ?>" type="text/css">

これにより、ファイルを更新しても、1分ごとにCSSを自動的に再読み込みすることができます。
この例では1分ごとに読み直されますが、必要に応じて時間（H）や分（i）を調整して読み直しの間隔を変更できます。
逆に、基本的に変更しないCSSについては、クエリを指定しないだけで良いため、使い勝手は非常に良いと言えます。

欠点は、キャッシュの機能が影響を受けることですが、現在の状況ではCSSファイルのサイズが比較的小さいため、それほど気にする必要はないでしょう。

<link rel="stylesheet" href="./css/cm_pc.css?<?php include(TEMPLATEPATH . '/include/css_update.php'); ?>" type="text/css">

上記の「cm_pc.css?」の部分の前にincludeすることで、css_update.phpの中のコードが挿入され、この数字が変更されている場合はCSSが再度読み込まれる仕組みです。

全てのページで同じ方法を適用することで、1つのインクルードファイルを修正するだけで、サイト全体のページに新しいCSSが適用されることになります。

デメリットは、手動で修正しなければならない点かもしれません。
一方で、キャッシュ機能は適切に機能するようになります。