- 1. 概要
- 2. CSS ファイルの指定の後ろにクエリを加える
1. 概要
CSS をべた書きするにしろ、SCSS を記述するにしろ、最終的にできあがって、ブラウザに読み込ませるファイルは、基本的には .css なわけです。
.css の内容は、基本的には、ブラウザはキャッシュに保持しており、.css を更新した場合は、キャッシュをクリアして再読み込みさせなければならない。
これを頻繁に行う。まぁ、わたしの場合、.scss を変更して .css を更新後、ブラウザでキャッシュをクリアしてリロードしておるわけです。
外からアクセスする方は、更新をご存知ないわけですから、いつ、.css の更新が反映されるかは、神のみぞ知る・・・ということになるのですが。
やっぱり、これは、不都合が多いわけです。
.css が更新されたら、そこは、すぐに反映したい・・・と。
調べたら、簡単に実現する方法があるのですね。ああ・・・ちょっと調べればよかったものを、なんて相変わらずのお馬鹿なんだ、わたし。
本項は、「WEB サイトの更新時、CSS のキャッシュを自動で読み直す方法」を参考にさせていただきました。
2. CSS ファイルの指定の後ろにクエリを加える
なんだか、表題だけ読むとわかりにくいですが・・・。
通常、.css ファイルの読み込みを、.html 内に記述するには、ヘッダタグ内に
<link rel="stylesheet" href="/パス/ファイル名.css">
と書くわけですが・・・。
ファイル名を変えれば、ブラウザは、当然、.css をリロードするわけです。
ファイル名を変えずとも・・・。
<link rel="stylesheet" href="/パス/ファイル名.css?バージョン番号">
と書けば、バージョン番号が変われば、ブラウザは、違うファイルとみなして、.css のリロードを行ってくれるそうな。
まぁ、いちいちバージョン番号を書くのは、馬鹿正直で、その労力は計り知れない・・・。
例えば、.css の更新日時を、バージョン番号化して「YYYYMMHHMSDDSS」的な表現にしてやればいいわけです。
ここのサイトでは、そもそも .css ファイルの読み込みの部分は、php 化しているので、php で、.css ファイルの日付をとって、後ろにつけてやればいいわけです。
すなわち
$css = '/パス/ファイル名.css';
$fullpath = '/プリフィックス'.$css;
$datetime = date("YmdHis", filemtime($fullpath));
$sentence = '<link rel="stylesheet" href="'.$css.'?ver='.$datetime.'">';
てなことを書いて、「$sentence」の部分を、ヘッダに埋め込んでやれば・・・。
ということで、少し、シアワセになりました。
|
