PHPを使わずにCSSのキャッシュを無効化する方法

開発中はCSSファイルのキャッシュを無効化しておきたい。

特にiOSのブラウザでは、PCのスーパーキャッシュクリア「Cmd + Shift + R」が使えないので、キャッシュが残ると非常に不便だ。

今回、サーバーの仕様によりPHPを使えない環境で、JSを使ってCSSのキャッシュを無効化したので、その方法をメモしておく。

<script>
    var ts = (new Date()).getTime();
    document.write('<link rel="stylesheet" href="./css/styles.css?ver='+ts+'">');
</script>

CSSを読み込むHTMLファイル内に上記のJavaScriptを追記する。

JSでCSS読み込みタグを追加しているので、既存のlinkタグはコメントアウトしておこう。

これでアクセスするたびに現在時刻をリンクURLにパラメーターとして付加するので、常に最新版のCSSファイルが読み込まれる。