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

エ・ビスコム・テック・ラボ
2009-07-09 21:33:01
  • このエントリーをはてなブックマークに追加

: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プロパティなどを見ていきたい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]