You're lovin' it.

no-cacheでもCSSが反映されない時にお尻にクエリを記述

こちらの記事でブラウザキャッシュを無効にする方法を書かせていただきましたが「それでもcssが反映されないんだけど」とストレスを抱えている方向けハウツーです。

CSSを読み込む記述のお尻にクエリを追加

変更前例

<link rel="stylesheet" href="style.css">

変更後例

<link rel="stylesheet" href="style.css?20220826raqoon">

ご覧のように「〇〇〇〇.css」のお尻に「?」半角ハテナを付けて、その後は英数字を任意に記述してください。

それだけで別物として扱われるのでキャッシュの影響がなくなります。

まとめ

上記は簡単な方法で、お尻に追加する部分をPHPで自動生成することも可能です。ちなみにWordPressでは自動で付与されています。

この記事でキャッシュストレスを感じている人が一人でも減りますように…