ブラウザとサーバーによる CSS ファイルのキャッシュを防ぐにはどうすればよいですか?

ブラウザとサーバーによる CSS ファイルのキャッシュの防止

Web サイトを開発するとき、すぐに反映されない CSS の変更にイライラすることがよくあります。ブラウザで。これは、ブラウザとサーバーの両方によるキャッシュが原因であると考えられます。

Apache は CSS ファイルをキャッシュしますか?

はい、Apache はデフォルトでリソースをキャッシュします。 Apache サーバーが CSS ファイルをキャッシュしているかどうかを確認するには、.htaccess ファイルに次の行を追加してデバッグを有効にします:

LogFormat "%r %s %b %H" debuglog
CustomLog "| tail -f /dev/stderr -" debuglog

ページをリロードし、デバッグ ログで次の行を確認します:

GET /css/main.css 200 7122 0

最後の数字「0」は、ファイルがキャッシュから提供されたことを示します。

キャッシュの防止

次の方法があります。 CSS ファイルのキャッシュを防止します:

1.ファイル名にクエリ文字列を追加する

CSS ファイル名の末尾にランダムなクエリ文字列を追加して、キャッシュされたバージョンを使用する代わりにブラウザにファイルを強制的にダウンロードさせることができます。例:

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

2. Cache-Control ヘッダーを使用する

ブラウザがファイルをキャッシュする期間を指定する「Cache-Control」ヘッダーを HTTP 応答に追加できます。例:

header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");

3. Apache で mod_headers を使用する

Apache サーバーの場合、mod_headers モジュールを使用してキャッシュを防止できます。 .htaccess ファイルに次の行を追加します:

Header set Cache-Control "max-age=0, s-maxage=0, must-revalidate"

4.バージョン番号を使用して CSS を呼び出す

多くの Web サイトで使用される一般的なアプローチは、バージョン番号を使用して CSS を呼び出すことです。 CSS を更新すると、バージョン番号が大きくなり、ブラウザに新しいファイルが強制的に読み込まれます。例:

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

CSS を更新するときは、「v=1」を「v=2」に変更します。

これらのメソッドを 1 つ以上実装することで、次のことを保証できます。 CSS の変更は、実稼働サーバーであってもブラウザにすぐに反映されます。

以上がブラウザとサーバーによる CSS ファイルのキャッシュを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。