CSSファイルを更新した時にキャッシュのCSSファイルが読み込まれ更新が反映されない場合、ユーザーが自主的にキャッシュのクリアを行うのに期待するしかないのか。

Question

参考サイト

上記のサイトではCSSファイルを更新した時にGoogle Chromeだと更新したCSSファイルが読み込まれ無いため、キャッシュのクリアを行わなければならないと説明されております。

これだと、cssが問題でレイアウトの崩れが発生した際に修正しても、Google Chromeのユーザーが自主的にキャッシュをクリアするか分からないので、そのままレイアウトが崩れた状態で表示されると思いますがなにか対処方法はないのでしょうか。

Answer 1

http://example.com/css/style.css?ver=4.2のようにクエストリング（でしたっけ？）をつけて、スタイルシートを更新するごとにバージョンをあげていけばいいのでは？

Comments

[退会済みユーザー]

ご回答ありがとうございます。

なるほどです。クエリストリングそんな方法があったとは。

Answer 2

既に回答されているクエリ ストリングを使う、ファイル名自体を変える、の他に、HTTP ヘッダーを制御できるなら Cache-Control ヘッダーや Expires ヘッダーを使ってブラウザーのキャッシュ動作を制御する方法も考えられます。

参考 : ブラウザのキャッシュコントロールを正しく理解する

Comments

[退会済みユーザー]

ご回答ありがとうございます。

そんな方法もあるんですね。勉強になります。

Answer 3

ブラウザがキャッシュするという動作は、Chrome に限ったことではなく、CSS に限ったことでもありません。

IE, Firefox, Opera, Safari などでもキャッシュします。CSS 以外にも html ページ本体、画像、スクリプトもキャッシュされます。（応答ヘッダの指定などでキャッシュしない設定になってない限り）

Web ページを作っていて、html ページ本体、CSS、画像、スクリプトを変更したのにブラウザに表示される画面に変更が反映されない場合、まずキャッシュを疑って、全てのキャッシュを削除することを考えてください。

Comments

[退会済みユーザー]

css、chromeに限ったことではないのですね。web制作側としてはユーザーがキャッシュを自主的に消すのを期待するしかないって感じでしょうか。

[退会済みユーザー]

例えば外部 CSS ファイルを html ソース本体で link href="xxx.css" ... というように指定して取得しているのであれば、修正後のファイルはファイル名を変更すれば（xxx2.css とかに）修正後のファイルを取得します。（取得してまたキャッシュに入れますが）

[退会済みユーザー]

ご回答ありがとうございます。

なるほどです。後mizさんからご回答頂いたクエリストリングですね。