さらばmozとoのdevice-pixel-ratio

そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。
これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。

これまではこんな感じ。

@media (-webkit-min-device-pixel-ratio: 2),
    (min--moz-device-pixel-ratio: 2),
    (-o-min-device-pixel-ratio: 2/1) {
        .foo {
            background-image: url(image-2x.png);
        }
    }
}

device-pixel-ratioはもともとWebKitの拡張だったもの。それをMozillaとOperaも取り入れたのだけど、ベンダー接頭辞の面倒さに加えてmin-/max-のつき方、値の書き方がばらばらというカオスになっていた。どちらも各々のパーサに都合のよい、もしくは「適切」だと考えた構文を実装した結果なのだろうけど、センスよい感じではない。

そんな時代も終わり。resolutionとdppxでこんなにすっきり。

@media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 2dppx) {
        ...
    }
}

-webkit-device-pixel-ratio: 2とresolution: 2dppxだけ。すっきり。

というわけでみんな書きかえとこう。Firefoxはもう17が出るし、Opera Mobileも12.1が出てからひと月以上経つ。古いバージョンを気にする必要はそんなないでしょうう。device-pixel-ratioを使うコードなんてほとんどスマートフォンが対象だろうし、そこでのFirefoxとOperaのシェアとかコンテンツ側の対応状況を想像するに…うん、いいでしょうよ。

「device-pixel-ratioを標準化すればよかったんじゃ」っていう素朴な疑問については、CSS WG Blogのポストを。回答になってるかは怪しいけれど。

resolutionは10月にWebKitでも実装された（dppxは6月に実装）のだけれど、Mac portでもChromium portでも有効にはなってなさげ。

他にもいろいろ思い出してきたけど面倒なので書くのはやめておく。