ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

ホーム > コミュニティ > PC、インターネット > CSSテクニック > トピック一覧 > ブラウザのキャッシュ対策

CSSテクニックコミュのブラウザのキャッシュ対策

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

コミュ内全体

サイトを公開後、どうしても外部CSSの構造を修正しなくてはならなくなった時って、みなさんどうしてます?

既にサイトを訪れたユーザーのブラウザにキャッシュが残ってるのでユーザー側で「ブラウザのキャッシュを空にする」を実行しない限り、変更前のCSSが適用されてしまいますよね。これにはいつも悩まされてます。何かいい解決方法ってあるのでしょうか?

※ちなみに僕は、強制的に新しいCSSを読ませるために外部CSSのファイル名を少しずつ変えたりしています。

コメント(23)

file1.css と file2.css を用意しておいて、
file1.css には
@import url(file2.css?001)
とだけ書いておく、というのはどうでしょう。
?001ってどういう意味があるんですか?
metaタグでPragmaやCache-Controlを仕掛けるのでは不十分ですか?
ブラウザのキャッシュをコントロールできるとは
知りませんでした…。
↓参照
http://www.bayashi.net/st/pdmemo/browsercache.html

これをheadに入れておけば上手くいくような気がするので、
早速試してみます。

hirokiさん、かずあきさん
お答えありがとうございました。
>>2
urlの?以降は環境変数として鯖に渡されるモノ、と大雑把に解釈してください。要はファイル名とは無関係なユニークな部分を作り出すためのモノです。
キャッシュに残るファイルは大抵、http://mixe.jp/hoge.gif のようなカタチになるので、更新されたときに?以降の文字列を変更すれば、キャッシュに残るファイル名も変わる、ということです。

背景画像やロールオーバする際の先読み画像、スタイルシートなどメタではコントロールしきれないキャッシュをなんとかするときによく使うハックです。
>>5
なるほど、そういうことだったんですね…(納得)
かなり実用的なハック技ですね。
ありがたく使わせて頂きます!
>>6
実際に仕事で試してみたのですが、バッチリでした!
?以降の文字を変更すれば、強制的にCSSを読み込ませることが可能です。更新の都度、インポート用のCSSを加工するだけでOK。ドリームウィーバーMX2004ではそれをプレビューできないので、更新直前に加工するといいようです。
素敵な方法ですね!
MTなんかの場合、
<link rel="stylesheet" href="/style.css" type="text/css" />
など、CSSへのパスを含んだ一文をモジュールとして登録しておけば、@importを使わない読み込み方法であっても全ページ簡単に対応できますね!

予断ですがMACのブラウザは設定をどんなにがんばってもキャッシュを引きずることが多いですね。
キャッシュクリア後ブラウザを完全に再起動しないとダメだったり。
Macで確認をするときに「うわ!崩れてるー!」と思ったら「キャッシュでした(´∀`*)ホッ」ってオチが多いです。
>>8
MacIE はキャッシュの容量を0MBにすることで、多少ご機嫌を取ることができます。
背景画像とか外部のCSSやスクリプトのファイルの場合、そのファイルのurlを直撃してリロードすることで対処するのが手っ取り早いです。
>>MACのブラウザは設定をどんなにがんばってもキャッシュを
>>引きずることが多いですね
なるほど。ずっとMacベースで作業してたので、
全環境そうなんだと思い込んでました・・・。
>tuneさん
WinIEを対象の大枠として考えるのであれば、あまりキャッシュに神経質にならなくとも大丈夫だと思いますよ。
もちろんhirokiさんの教えてくださったテクニックを導入すれば万全な対応ができるとは思いますが。
http://〜?日付日時秒
とかは Flashで外部ムービーを読み込むのにも使われる技ですね。ローカルで確認できないのが難点ですが。^^;
(httpdをローカルで走らせれば可能)
>>8
かわち丸さんに質問です。

>>MACのブラウザは設定をどんなにがんばってもキャッシュを引きずることが多いですね。
>>キャッシュクリア後ブラウザを完全に再起動しないとダメだったり。
とありましたが、キャッシュクリアをして再起動しても、前のキャッシュが残っているようなこと、経験ありますか?

実は先日、私の友人でそれに近いことがありました。
私自身はWinなので、Macがそういう動作を起こしえるものなのかどうか、検討もつかないのですが・・・
> ローカルで確認できないのが難点

マックなら、web共有を起動してhttpでプレビューするように
するといいかもしれません。実動作とほぼ同じなので。
ウィンドーズでもapacheがバイナリ配布されているので、
セッティングさえすればそれに近い状態は作れますよ。

OS9でも一応webサーバらしきモノがあります。web共有って
名前で。ただしむちゃくちゃ動作が緩慢です。
>やっちゃんさん

キャッシュクリアをした後、一度終了してまた起動すれば、僕の経験上では前のキャッシュを引きずったりはしませんでした。

ここで「一度終了」というのはウインドウを閉じただけではだめで、完全に終了させるというか。ドック(っていうんでしたっけ?画面下のアイコントレイ)に黒矢印の残っている状態ではダメということです。。

これは推測なんですが。
MacIEの場合キャッシュのクリアボタンを押した段階ではうんともすんともHDが動かないのですが、その後ブラウザを終了したときにガリガリと音がします。(なにやらファイルを消しているような音?(^-^;))

たぶんキャッシュのクリアはブラウザ終了時に同時に行われているんでしょうね。Safariの場合はわかりません。。

やっちゃんさんのご友人の方が上記の手順を踏まれたのかどうかわかりませんが、もしかしたらキャッシュクリアしてブラウザを完全に終了させても過去のデータを引きずることもあるのかもしれません。まだ僕の経験ではないですが。

僕はマックのことはぜんぜん詳しくないので、ヘビーなMacユーザーの方の意見を聞きたいところです(^-^;)
かわち丸さんご指名だったので
ちょっと黙秘してましたw
Macなら分かるほうなので、
ちょっと意見をば…

IEの場合だと、
[環境設定]>>[詳細設定]>>[キャッシュを空にする]を実行後、
[表示]>>[最新情報に更新]
…をすればキャッシュは消えてます。
経験上、これ以上引きずることはないですね。
SafariもFirefoxも同様です。

いつもこの一連の動作をやるのが面倒なので
このスレを立てたのでした…←おかげさまで解消!
>tuneさん

そういうことだったんですかぁ。
毎回ブラウザ再起動させててかなり面倒だったので、

>[表示]>>[最新情報に更新]
これやればいいんですね!

ありがとうございましたー!
かわち丸さん、tuneさん、レスをありがとうございます。

キャッシュを引きずることはない、ということは、
友人が、キャッシュクリアの設定を間違えたりしていたのかもしれないですね。

tuneさんの教えてくれた方法、友人にも念のため連絡しておこうと思います。
大変参考になりました。
また何かありましたら、よろしくお願いします<(_ _)>
>ヨシさん

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
これってブラウザによっては効かないとかいう情報も昔聞いた覚えがあります。MacIEとかの場合どうなんでしょうね。

ただ、「キャッシュさせない」ってのもユーザーにとってはどうなんでしょうね。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
…については、3:〜5:のレスで検証済みですね。
※4:のリンク先も参照

特に今回は、「キャッシュさせない」ということよりも
「CSSファイルをキャッシュさせない」という趣旨なので
5:のハックが最良かと思います。
>ただ、「キャッシュさせない」ってのも
>ユーザーにとってはどうなんでしょうね。

キャッシュにはキャッシュで良い部分。つまり、再来訪時の画面表示スピードが早くなるってメリットがある訳で、これを制作サイドの都合で使用不可にするのってなんか違うかなーと思います。
僕の調査では、METAの"no-cache"を使ってるCSSレイアウトのサイトって皆無でした…。つまり、ほとんどの皆さんは何か別のノウハウがあるか、無関心かのどちらかなのですね。
単に、「キャッシュさせる、させない」の話になるとCSSレイアウトかどうかは少し別の問題になりそうな気もしますが、

有名どころでは、
http://www.webstandardsawards.com/
ここは"no-cache"使っているんですよね。

ここのサイトの場合はレイアウト自体を更新のたびに変えているわけでなさそうなので、CSSのキャッシュをコントロールしようとした意図ではなさそうですが。

ところでmetaに記した"no-cache"がHTMLはともかく、外部CSSファイルのキャッシュにまで影響するのか怪しいなぁと思ったんですがどうなんでしょうね。

ログインすると、残り1件のコメントが見れるよ

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング

mixiチケット決済