HTML - CSS - キャッシュをクリアせずに再読み込みさせる

 
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」の部分を、ヘッダに埋め込んでやれば・・・。  ということで、少し、シアワセになりました。
 
 
カウンタバックグラウンド