キャッシュ削除のお願いをなくそう！CSSが更新されない問題を解決

とある案件でこんなやりとりをしたことがあるんじゃないでしょうか。

cssが更新されない原因のひとつはキャッシュです。

ですが、そもそもキャッシュの削除はクライアントさんにお願いするべきではありません。

キャッシュの削除を知らない方もたくさんいますし、スマホでは簡単に出来ず相手側への手間にもなってしまいます。制作側では当たり前の操作ですが、見る側からすると当たり前ではないんですね。

CSSが更新されない時に起こるそんな問題を解決します。

CSSのキャッシュを削除する方法

CSSを読み込んでいる記述にクエリ(パラメータ)を付けるだけです。

記述例

<link rel="stylesheet" type="text/css" href="css/style.css?ver=1.0.1"/>

「?ver=1.0.1」の部分をクエリと言います。「?03301545」など数字でも大丈夫です。

「?〇〇〇〇」の形(例ではバージョン情報)でCSSにクエリを付与することで、

(記述前)style.css と(記述後)style.css?ver=1.0.1 は別物として扱われます。

再度style.cssを更新した時はstyle.css?ver=1.0.2 と変更していきます。これでキャッシュ削除の作業は不要になります。

キャッシュを自動で更新する方法

CSSにクエリを付与するのは手動でも簡単ですが、PHPを使って自動にすればもっと楽になります。

記述例

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

前項で記述した「?〇〇〇〇」の部分を「<?php echo date(‘YmdHis’); ?>」にするだけです。

自動で日時を取得する

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

このPHPで「Y：年数」「m：月」「d：日」「H：時間」「i：分」「s：秒」を取得しています。

この場合1秒単位でCSSを読み直します。sやiを消せば読み直す時間を調整できます。

実際書き換えたページのソース

<link rel="stylesheet" type="text/css" href="css/style.css?2103300455"/>

「?〇〇〇〇」の部分が2021年3月30日4時55分になっています。(「s：秒」の部分は細かいため消しました)

自動で更新することができましたが、常に日時を取得することでキャッシュの意味がなくなるためもう少し書き換えていきます。

更新した時点の日時を取得する

記述例

<link rel="stylesheet" type="text/css" href="css/style.css?<?php echo date("ymdHi",filemtime("css/style.css")); ?>"/>

「,filemtime(“css/style.css”)」の部分をPHPの記述に追加しました。

　<?php echo filemtime(); ?>

先程は日時を自動で取得しただけですが、このPHPでCSSファイルの最終更新日時を取得します。

実際に試したソースコードを見てみると気づくのですが、日時が実際の時間とずれているかと思います。

日付を日本時間にする

CSSファイルの最終更新日時を日本時間にします。

記述例

<link rel="stylesheet" type="text/css" href="css/style.css?<?php date_default_timezone_set('Asia/Tokyo'); echo date("ymdHi",filemtime("css/style.css")); ?>"/>

「date_default_timezone_set(‘Asia/Tokyo’);」の部分をPHPの記述に追加しました。

　<?php date_default_timezone_set(); ?>

このPHPで様々な地域のタイムゾーンを指定することができます。

まとめ

以上のようにCSSのキャッシュ削除は簡単にできます。

クライアントさんにお願いすることを無くし、制作者側で効率的に行いましょう！