[link rel=]でCSSとかJSファイルの後ろについている”?”の意味

webサイトのソース見ていると、外部からCSSファイルを読み込む部分で、以下のようにファイル名の後にパラメータを付けているケースがあります。

<link rel=”stylesheet” type=”text/css” href=”/css/main.css?20210831

この意味は何でしょうか??

これはCSSクエリと呼ばれるテクニックで、ブラウザキャッシュをコントロールするものです。

 

サイト修正してブラウザで確認するときに、替えたはずの部分が変わってないことがあると思います。

この原因はキャッシュ機能です。表示速度を上げるための技術ですね。でも、サイト修正時にはそのせいで「更新されていない」という状況が起きてしまいます。

ブラウザでスーパーリロードすれば良いのですが、クライアントに確認してもらう時は毎回伝えるのも面倒です。

そこでこのCSSクエリが使えます。

 

cssを読み込む部分でクエリを付与することで、ブラウザはキャッシュ機能を使わずに必ずCSSを読み込みます。(ブラウザに新しいファイルと認識させることにになります)

?以下は適当な文字列で良いですが、わかりやすくするためには日付か日時が良いかもしれません。

実際のCSSファイル名は変更しなくても大丈夫です。

 

クライアントに確認してもらうときに便利な機能です。