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

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

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

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

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

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

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

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

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

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

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

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

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