CSSはサーバーにあるのに、ブラウザに届かない

最近のキャッシュプラグインの多くには、「未使用CSSの削除」という機能があります。ページをスキャンし、どの要素にも使われていないセレクタをまとめて削除して、軽くしたスタイルシートをブラウザに送る仕組みです。

たいていの場合、これはありがたい機能です。問題は、その判定が静的なことです。

見落とされる3つの書き方

① ページビルダーの管理画面で付けたクラス。要素の「追加クラス」欄に入れた名前は、テンプレートの中に出どころが見つからないため、未使用と判定されます。

② :root にだけ宣言したデザイントークン。あとで使うつもりで定義した変数も、まだどこからも参照されていなければ、スキャナーから見ればデッドコードです。

③ スクリプトが実行時に付けるクラス。スキャンは実行より前に行われます。

手に入る証拠が、どれも「問題ない」と言っているからです。

サーバー上のファイルには、その宣言があります。結合後のファイルを検索しても、文字列は見つかります。開発者ツールのネットワークパネルでも、ファイルは正常に読み込まれ、ステータスコードは200です。

本当のことを言うのは getComputedStyle() だけです。ブラウザが実際に使っている値を返します。いまは検収のたびに必ずこれを確認し、「サーバー上のファイルに書いてある」ことを証拠にはしていません。前の2回がすべてグリーンだったのは、まさにそれが原因でした。

削除されてしまう種類の宣言は、プラグイン側からインラインで出力するように変えました。インラインのスタイルは削除処理を通りません。

これはツールを避けているのではなく、ひとつの事実を認めているだけです。読み込み順を保証する仕組みは、読み込まれること自体までは保証しない。