ブラウザがCSSキャッシュしてしまうのを止める方法

CSSに限らないのですが、こんな感じでブラウザはダウンロードしたコンテンツをキャッシュする機能を持っています。

200 OK とか言ってますが、サーバに何らかのリクエストを投げることすらしていないわけですね。

これが過剰に効いてしまうと、HTML/CSSを修正したのにCSSだけキャッシュが使われてしまって思いっきり画面が崩れてしまう…なんてことが起こり得ます。

これを解消する方法としてよく紹介されているのが、

<link rel="stylesheet" href="hoge.css?ver=20200724">

こんな感じでCSSのURLに適当なクエリストリングをつけ、変更のたびにパラメータを変えていくというもの。

しかしこの方法ですと、単にCSSを差し替えたいだけでもHTML側を修正しなくてはならず、HTMLをプログラムで生成しているような場合には「プログラムのリリース」が必要になってしまいます。
サーバ上でCSSファイルのタイムスタンプを取得してパラメータにする…　というのも見つけたのですが、これではアクセスがあるたびに（ちょっととはいえ）ファイルI/Oが発生してしまうので、システムにあまり優しくなさそうです。

で、今更ながら調べていたところ、
HTTP responeヘッダのCache-Controlを使えばキャッシュ期間が指定できること、
および、Apacheの場合はmod_expiresを使えばCache-Controlを返せるようになることがわかりました。

実際にやってみた

apacheのconfファイル。試しに1秒でキャッシュが切れるようにしてみます。

LoadModule expires_module modules/mod_expires.so

...

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 second"
</ifModule>

Cache-Control ヘッダが返るようになりました。

ちゃんとサーバにアクセスした上で、304を受け取っています。