SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

Craig Buckler氏がSitePointにおいてHow to Use Operating System Styles in CSSのタイトルのもと、CSS 2.1のあまり知られていない機能のひとつとして、OSテーマのフォントとカラーを使う方法を紹介している。よりOSに統合されたページを作成する場合に便利な方法だと説明がある。

なおこれらプロパティを指定するにあたって、CSS3では別のプロパティが導入され紹介されているプロパティは非推奨に変更されていること、ターゲットとしてブラウザ・OSの組み合わせでの試験を実施してまずは確かめてみた方がいいことなどが注意点としてあげられている。またシステムのテーマカラーに依存するため、親和性はよくなるかもしれないが、Webデザイナが意図したデザインとはかけ離れる可能性があることも留意しておく必要がある。

ここではWindows 7 RC、Mac OS X LeopardにおいてFirefox、Chrome、IE、Safariを使ってシステムフォントとシステムカラーを表示させた例を掲載する。OSのみならぶブラウザの違いでも使われるシステムフォントやシステムカラーが変わることを確認できる。

System fonts - Windows 7 RC / Firefox 3.6 Alpha 1

System fonts - Windows 7 RC / Chrome 3.0.195.6

System fonts - Windows 7 RC / IE8 8.0.7100.0

System fonts - Mac OS X Leopard / Safari 4.0.2 (5530.19)

System colors - Windows 7 RC / Firefox 3.6 Alpha 1	System colors - Windows 7 RC / Chrome 3.0.195.6

System colors - Windows 7 RC / IE8 8.0.7100.0	System colors - Mac OS X Leopard / Safari 4.0.2 (5530.19)