CSSのキャッシュへの対処方法【現役エンジニアが解説】
今回は、CSSのキャッシュへの対処方法について、3つのパターンに分け、簡単に解説していきます。
更新されない場合はキャッシュ削除
CSSを変更したにも関わらず、更新されない場合があります。
これは、古いCSSがブラウザにキャッシュされているために発生します。
この場合は、ブラウザからキャッシュを削除することで新しいCSSが読み込まれます。
CSSを外部ファイルにしないことで回避
CSSをHTML内に書くことによってキャッシュ問題は回避可能です。
ただし、HTML内でキャッシュを保持しないmetaタグを書く必要があります。
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="expires" content="0">
<style>
/* ここにスタイルを全て書く */
</style>
</head>
上記のコードでは、HTML内でキャッシュ不保持の宣言をし、HTML内にCSSを書いています。
CSSを外部ファイルにする場合は日時等を付ける
CSSファイルのURLの末尾に日時等を付けると毎回新しく読み込まれます。
<link type="text/css" rel="stylesheet" href="hoge.css?20210113100000">
毎回日時を変えるためには、PHP等で動的に日時を出力するようにすると良いでしょう。
<link type="text/css" rel="stylesheet" href="hoge.css?<?php echo date(YmdHis); ?>">
上記のコードでは、CSSの外部ファイルのURLの末尾にPHPで年月日時分秒のパラメータを付けています。