タグ一覧

Tags

CSS内に記述したパスにCache Busting対応する

たとえば、以下のようなソースコードがあったとき、

.image {
  background-image: url(/image/to/path/example.jpg);
}

@font-face {
	font-family: "acms-fonts";
	src: url(../fonts//acms-fonts.eot);
	src: url(../fonts//acms-fonts.eot) format("embedded-opentype"), url(../fonts//acms-fonts.ttf) format("truetype"), url(../fonts//acms-fonts.woff) format("woff"), url(../fonts//acms-fonts.svg) format("svg");
}

以下のように変換してほしい。

.image {
  background-image: url(/image/to/path/example.jpg?version=20171017);
}

@font-face {
	font-family: "acms-fonts";
	src: url(../fonts//acms-fonts.eot?version=20171017);
	src: url(../fonts//acms-fonts.eot?version=20171017) format("embedded-opentype"), url(../fonts//acms-fonts.ttf?version=20171017) format("truetype"), url(../fonts//acms-fonts.woff?version=20171017) format("woff"), url(../fonts//acms-fonts.svg?version=20171017) format("svg");
}

パス指定の末尾に「?version=20171017」とついています。

なんでかというと、ウェブサイトをリニューアルしてCSSをアップデートしたとき、以前と同じファイル名を読み込んでいると、画像の内容は変わっているはずなのにキャッシュが変わっていてリニューアル前の画像を読み込みに行ってしまうことがあるからです。

これを解決するために、CSS内でURLをしている箇所の末尾にクエリをつけてあげると、キャッシュが解除され、あたらしい画像を読み込んでくれるようになります。そして対応することを英語ではCache Bustingと呼んでいます。

この記事では調べた方法をご紹介しています。

目次

Sassで対応する方法


See the Pen Automating Cache Busting by SCSS by Kasumi Morita (@mkasumi) on CodePen.

unique_id()という関数が用意されているみたいです。 Mixin版ではなぜか出力したCSSに「"(ダブルクオート)」がついてしまったので、unquote()関数も使用。

LESSで対応する方法


See the Pen Automating Cache Busting with LESS by Kasumi Morita (@mkasumi) on CodePen.

JSで日付が出力できるみたいです。もうLessは使ってないけれど、久しぶりに「Lessすごい!」ってなった瞬間でした。

gulpのプラグインで対応する方法

結局gulpのプラグインで対応しました。CSSプリプロセッサー側で対応しようとすると、パスを含むCSSを書くたびにCache Busting対策の記述を書かなければいけないし、もしツール(例えばSCSSからPostCSS)に変わった時にもう一度方法を探さなければいけないことを考えると、gulpで対応する方がいいかなと思ったからです。

以下のプラグインを使っています。

ついでに

PostCSSだったらプラグインあるっぽい。


関連タグ

この記事をシェアする

著者

デザイナー

森田かすみ

マークアップエンジニアからWebプロダクトのデザイナーへ転身し、現在はUI/UXデザインを勉強中。
ストレス発散方法はかっぱのイラストを描くこと。

おすすめ記事

この記事のハッシュタグ から関連する記事を表示しています。

他の方法で記事を探す

2024年3月

年間カレンダーへ
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31