ホームページ > ウェブフロントエンド > CSSチュートリアル > ブラウザとサーバーによる CSS ファイルのキャッシュを防ぐにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-10-24 08:25:30
オリジナル
901 人が閲覧しました

How Can I Prevent Browser and Server Caching of CSS Files?

ブラウザとサーバーによる 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 サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート