【HTML】CSSの変更内容を確実に反映させる!

このエントリーをはてなブックマークに追加

 以前弊社ホームページの更新作業を行った際に、cssのキャッシュについて少々ハマったところがあったので、備忘録として残しておきます。
 問題となったケースは、以下のようなものでした。

○弊社ホームページで使用しているcssを変更し、レイアウトの修正を行ったが、その変更内容がホームページ側に反映されない(レイアウトが変わらない)。

 cssは確かに変更されているのに、なぜホームページに反映されないのか……調査の結果、原因はcssのキャッシュが残っていたためだとわかりました。なので以下のように修正して対応しました。
 修正を行うのは、各htmlファイルのcssを読み込む部分になります。

<link rel=”stylesheet” href=”css/hogehoge.css” type=”text/css” id=”hoge”>

 ここを、以下のように修正しました。

<link rel=”stylesheet” href=”css/hogehoge.css?20140527” type=”text/css” id=”hoge”>

 太字部分の内容を追加した形になります。”?”以降になんらかの文字列(クエリー文)を付与することで、同じcssファイルであっても別物として認識されるようになります。
 具体的には、『css/hogehoge.css』『css/hogehoge.css?20140527は、例え中身(hogehoge.css)が同一ファイルでも別物のcssと判定されるので、

(1)css変更後にクエリー文を追加しない場合:
 :ホームページを見に行く → ブラウザ:「『css/hogehoge.css』のキャッシュを保存するよ」
 :cssを変更する(クエリー文は追加しない)
 :もう一度ホームページを見に行っても、既に『css/hogehoge.css』のキャッシュが残っているので、変更前の内容が表示されてしまう(cssの変更が反映されない)

(2)css変更後にクエリー文を追加する場合:
 :ホームページを見に行く → ブラウザ:「『css/hogehoge.css』のキャッシュを保存するよ」
 :cssを変更し、クエリー文を追加して『css/hogehoge.css?20140527』に!
 :もう一度ホームページを見に行く → ブラウザ:「『css/hogehoge.css』というキャッシュは保存してるけど、『css/hogehoge.css?20140527』というキャッシュは保存してないから、サーバーに取りに行くよ」
 :変更したcssの情報が読み込まれ、ホームページに反映される!

 といった具合で、ページ読み込みと併せてcssが再取得されます。つまり今回のクエリー文は、「ここの文字列が変わってたらcssも変わってるってことにして、とりあえず新しく取りに行ってね」とブラウザに命令するもの、と言えるでしょうか。今回は、cssの最終更新日付を付与しました。
 いずれまたcssを更新することになった場合は、クエリー文を『css/hogehoge.css?20140701』などのように、再度別の文字列に変更するようにすれば、

ブラウザ:「『css/hogehoge.css』と『css/hogehoge.css?20140527』というキャッシュは保存してるけど、『css/hogehoge.css?20140701』というキャッシュは保存してないから、サーバーに取りに行くよ」

 となって、また変更を反映させることができます。
 問題は、上のクエリー文はcssではなくhtml側で行うものなので、cssの内容を変更した際には、必ずhtml側も修正する必要がある点でしょうか。修正を忘れると、キャッシュが残っているので(1)と同様の流れになってしまい、変更が反映されないということに……。
 いかにも修正忘れや修正漏れの凡ミスが起こりそうなので、念入りに注意する必要がありますね(-_-;)