Firefox 3で対応したCSS新機能 - David Baron文書

    後藤大地  [2008/06/30]

    先日リリースされたFirefox 3.0は順調にダウンロード数を伸ばしているようだ。執筆現在で2,600万ダウンロードに達しようとしており、Net Applicationsの報告によれば24日の時点ですでに世界で3%をこえるシェアを獲得している。Firefoxの採用率が高いヨーロッパでは5%をこえている。今後も順次シェアを伸ばし、主要ブラウザとしての位置を獲得することになりそうだ。

    Firefox 3.0ではCSS 2.0および2.1がサポートされているほか、現在策定が進められているCSS3の機能も一部対応している。Firefox 3で導入されたCSSの新機能や改善点はCSS improvements in Firefox 3にまとまっているが、David Baron氏がまとめたSome new CSS features in Firefox 3がサンプルも含めてよくまとまっているので紹介しておきたい。

    David Baron氏はMozillaでFirefoxの開発に関与しているデベロッパ。W3CのCSSワーキンググループで作業するなど、FirefoxとCSSに関して知識が深い。同氏がSome new CSS features in Firefox 3で特に紹介しているCSSの新機能は次のとおり。

    • inline-blockおよびinline-table
    • font-size-adjust
    • rgba()およびhsla()カラー
    • width、min-width、max-widthで指定できる新しい値 -moz-max-content、-moz-min-content、-moz-fit-content、-moz-available
    • white-space: pre-wrap

    inline-blockおよびinline-tableは将来的にクロスブラウザ向けのWebサイトを作成する際に多様されることになる便利な機能として使われることになりそうだ。font-size-adjustは日本語にはほとんど関係がない。英語のように大文字と小文字が混在する言語でフォントサイズの調整をするために活用できる。

    Firefox 3.0 rgba()の使用例その1 - Some new CSS features in Firefox 3より抜粋

    Firefox 3.0 rgba()の使用例その2 - Some new CSS features in Firefox 3より抜粋

    rgba()およびhsla()はCSS3で導入される機能。従来はopacity: 0.5のように指定していたものをrgba(0, 255, 0, 0.5)のようにRed-Green-Blue-AlphaやHue-Saturation-Lightness-Alphaで指定できる。これまでよりも豊かなカラー表現がまとめて指定できるようになる。Some new CSS features in Firefox 3はサンプルと説明の双方が簡潔にまとまっている。Firefox 3.0で新しく対応されたCSS機能の概要を知る上で有益なドキュメントだ。WebデザイナやWebデベロッパは一読しておきたい。

    関連記事

    関連サイト

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン