【CSS】WEBサイトの更新時、自動的にCSSキャッシュを読み込む方法
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が適用されることになります。
デメリットは、手動で修正しなければならない点かもしれません。
一方で、キャッシュ機能は適切に機能するようになります。
PCサイズのコーディングにおけるmax-widthの重要性
1月 8, 2025CSSのz-indexプロパティ:要素の重なり順を自在に制御
12月 8, 2024CSSのcursorプロパティ:カーソルの形状をカスタマイズする方法
12月 8, 2024