WordPressにはTwenty FourteenだのTwenty Thirteenだのと言った、年変わりのデフォルトテーマがついてきます。それなりにオシャレで、それなりに凝った機能のテーマなので、それなりに人気があります。(まあ、デフォルトだからだろうけど) 調べ物していると、これらをベースに弄ったブログをたくさん見かけるので、あなたも一度は見たことがあるんじゃないかと思います。
今回はそんなWordpressのデフォルトテーマの中でアイコンフォントとして利用されているGenericonsの最新バージョンのCSSが変だって話です。
Genericonsって何だ
Some rights reserved by mkhmarketing
前置きとして、Genericonsについて触れておきます。GenericonsとはWordpress.comを運営しているAUTOMATTICが作っているフリーな(自由な)ブログの為のアイコンフォントです。
Genericons
— a free, GPL, flexible icon font for blogs!
サードパーティウェブサイトのアイコンとか含んでいるけどGPLで大丈夫なんでしょうか。怪しい感じもしなくはないですね＞＜
ところで、アイコンフォントとはウェブサイトによく使われるチョットしたアイコン等を文字のフォントとして表したもので、画像に比べて取り扱いやすく、サイズも小さい便利なフォントのことです。ブラウザのウェブフォントサポートの拡大にともなって近年いろんなアイコンフォントが作られていますね。
webkitでGenericons.svgがダウンロードされるんだが
さて、本題のgenericonsのcssの件です。Genericons 3.1のCSSはこんな感じになっています。注目すべきは24行目から29行目です。
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: “Genericons”;
src: url(“./Genericons.svg#Genericons”) format(“svg”);
}
}
@font-faceで12行目から22行目にGenericonsは既に指定されているはずです。なんでメディアクエリで上書きしてるんだろ？
ちなみに「-webkit-min-device-pixel-ratio:0」はwebkit（と、たぶんBlinkも)にのみ適用させるCSSハックだそうです。
レンダリングエンジンの「WebKit」を利用しているWebブラウザ、例えば、SafariやGoogle Chromeに適用します。使用方法は、Safari、Google Chromeに適用させたいセレクタを「@media screen and (-webkit-min-device-pixel-ratio:0){}」で囲むだけです。
上書きしているので、当然、最初に指定した方の@font-faceは無視されるはずです。故にfont-family:”Genericons”のsrcはurl(“./Genericons.svg#Genericons”) format(“svg”)が適用されます。OMG 🙁
おじいちゃん、Genericonsはさっき指定したでしょ！
で、上書きされた「Genericons.svg」がGoogle Chromeで指定されると何が問題なのでしょうか。
このスクリーンショットはGenericons付属のexample.htmlをChromeで見たものですが、既に説明したようにGenericons.svgが読み込まれているのがわかります。
しかし、Genericonsのcssでは16行目でwoffがbase64でエンコードされて埋め込まれています。もちろんChromeはwoffをサポートしているので、わざわざGenericons.svgという本来必要ないデータを追加でダウンロードすることになります。
30KBにも満たない些細なことですが、ウェブページを素早く表示させるためにリクエストは1つでも減らしておきたいですよね。
普通にWordpress動かしてたら今のところ関係ないけどね
Genericonsのsvg上書きは3.1からで、現在のwordpressのデフォルトテーマはGenericons 3.0.3なので、「今のところ」関係ない話です。しかし、将来wordpressがアップデートされた際にGenericonsもアップデートされる日が来るでしょうね。（ちなみに、jetpackを使ってる人はすでにgenericons 3.1を使っているっぽいです）
わざわざ上書きしているので何か意味があってやっているのかもしれませんが、genericonsがアップデートされたら、気になる人はメディアクエリ部分をコメントアウトしてもいいかもしれませんね。