ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

Retinaディスプレイに対応させたCSS Sprite

August 04 2012

コリスさんにおもしろい記事が載っていました。
Appleの最新機種に搭載されているRetinaディスプレイに対応させる為のCSS Spriteです。

Retinaディスプレイを考慮したCSSスプライトの実装方法

Macbook Proに搭載されたRetinaディスプレイの解像度は
2,880×1,800ピクセルもあるバケモノ。
しかし、それにわざわざ対応させるような事ってあんのかなあ、という疑問もありますが
なんとGoogle Chromeは新バージョンでこのRetinaディスプレイに対応。

「Chrome」ブラウザ新版が「Retina」ディスプレイの解像度に対応

標準ブラウザ以外で対応してくるんなら、Web制作側でも対応をしなけりゃならん事が
あるのかも知れません。

実際、iPhoneにはすでにRetinaが搭載されているので
スマートフォンサイト制作の際には、表示画像を実際の倍の大きさで制作する方法が
すでにあちこちで行われています。(そうしないと画像がぼやけてしまう)
それと同じようなものと考えればいいのかな。

CSSスプライト自体はナビゲーションバーの制作などでもよく使ってますが
Youtubeなんかはサイトのプレイヤーなどの画像を一枚で制作して、
backgroundプロパティをうまく使っています。

YoutubeのCSSスプライトの例

先に一枚画像を読み込んでしまうので、余分なトラフィックがかかるのを防いでるわけです。

一枚画像ですべての部品を表示させれるような制作をした事はありませんが
おもしろそうなのでちょっとやってみたいですね。

詳しくはこちらのDesign Walkerさんの記事が一番わかりやすいかと。
http://www.designwalker.com/2008/02/css-sprite.html

メンテナンスもそうだけど、座標を把握しておかないとエライ事になりそうやな・・・

とまあ、そんな心配よりまずはMacbook ProのRetinaの現物を見なければ(笑

なんやかんや言うてますけど、まだ実物を拝んだ事がおまへんねん。

 

| Posted in CSS | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 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