Firefox 3.5のCSS対応：Webフォント、メディアクエリ、セレクタ

エ・ビスコム・テック・ラボ
2009-07-09 21:33:01
Firefox 3.5がリリースされ、HTML 5やCSS 3への対応が一段と進んだ。そこで、今回から3回にわたって、Firefox 3.5が対応したCSSの新機能についてまとめていく。今回はWebフォント、メディアクエリ、セレクタの機能を見ていきたい。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

:before、:afterにCSS 2.1準拠で対応

　Firefox 3.5は、セレクタの:beforeと:afterにCSS 2.1に準拠した形で対応し、positionやfloatプロパティなどの指定が機能するようになった。

　たとえば、次のサンプルでは

でマークアップした見出しの前に:beforeを利用して連番を挿入し、挿入した番号に対してfloat:leftと指定している。これにより、番号の右側には見出しと文章が回り込んで表示される。なお、3.5より古いバージョンでは見出しの1行が横に並ぶだけで文章は回り込んで表示されなかった。

Firefox 3.5の表示 Firefox 3.5の表示
Firefox 3の表示 Firefox 3の表示 
h2:before       {
        content: counter(section);
float:left;
font-size: 1.25em;
color:white;
background-color: limegreen;
padding: 0.5em 1em 5em;
margin: 0 5px 0 0;
        }

h2      {
        counter-increment: section;
clear: both;
        }
※ブラウザで表示を確認する

参照記事

　次回は、文字などに影を付けるtext-shadow、1枚の画像から枠を作るborder-imageプロパティなどを見ていきたい。

  • 新着記事
  • 特集
  • ブログ