メディアクエリーの最終草案が公開
CSS WGより、メディアクエリー (Media Queries)の最終草案が公開されました。
メディアクエリーとは
メディアクエリーは、link要素のmedia属性やCSSの@mediaを拡張したもので、デバイスの条件を指定しスタイルシートを適用可能にする技術です。
たとえば、「幅が1280pxなディスプレイ」と「幅が1600pxなディスプレイ」で、異なるスタイルを割り当てることができます。
/* 一般的なスクリーン */
@media screen and (device-width: 1280px) {
.main {
width: 600px;
}
.sub {
/* 何もせずフッターにする */
}
}
/* 幅の広いスクリーンでは2カラムに */
@media screen and (device-width: 1600px) {
.main {
width: 800px;
float: left;
}
.sub {
width: 250px;
float:right;
}
}「device-width」はデバイスの幅を表します。このような情報は「媒体特性 (media features)」と呼ばれ、メディアクエリーでは幅や高さ、カラーインデックスなど計13の媒体特性が定義されています。
各ブラウザーのサポート状況
メディアクエリーの実装状況ですが、正式版としてリリースされたものの中では、Operaが最も進んでいます。Operaはモバイル機器など、デスクトップコンピューター以外のデバイスにもブラウザーを提供しているため、メディアクエリーの実装も積極的に行っていたようです。このため、たとえばWiiのインターネットチャンネルでもメディアクエリーを利用することが可能です。
続いて、Safari (WebKit)です。iPhoneの登場もあり、Safariは3よりメディアクエリーに対応しています。しかし、現段階では動的な変更（ウインドウ幅を変えた、など）に対応していないため、すこし使い勝手がよくありません。現在開発版として提供されているSafari 4では、メディアクエリーの動的変更に対応しているため、来年あたりにはより良いサポート状況になっていると思われます。
Firefoxですが、来年公開予定のバージョン3.1での対応を表明しています。しかし、先日公開されたFirefox 3.1 Beta 1でサポートがされ始めているようです。
Internet Explorerについては、最新版のIE8でも対応していませんが、IE9以降でのサポートに期待したいところです。
メディアクエリーの今後と日本語訳
メディアクエリーは昨年6月に勧告候補となったものの、その時点でSafariやFirefoxでの実装がスタートしていませんでした。その後実装が進み、得られたフィードバックを反映させた結果、今回は再び最終草案として公開されています。しかし、3つのブラウザーベンダーが実装に動いていることから、勧告もそう遠くはないと考えています。
さて、勧告候補版は日本語訳を公開していたこともあり、新しい草案についても日本語訳を用意しました。
また、実装状況を調べるため、ほんの少しですがテストを作成しました。メディアクエリーがどのようなものなのかをつかむ手助けになれば幸いです。