2011/02/03

隠れていたCSS3「Current Color」

皆さんは、CSS3を最近は勉強していますか?CSS3には様々なモジュールがあって、全部を把握するのは非常に大変です。今日は隠れたトリビア的なCSS3です。CSS Color Module Level 3 には「:currentcolor」なるものがあります。単純にいうと inheritみたいなものです。該当の要素に適用されていた色を継承させて適用できます。


ソース
下記がソースになります。 p要素の子要素としてem要素があります。普通だったら背景色を指定する際 em要素に 背景色を「#ccc」とかで指定しますよね。currentcolor を指定すると、なんと背景色がそのまま 文字の色を継承してします。


<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="utf-8" />
 <title></title>
 
 <style>
 
 p{ color : green; }
 em { background : currentcolor; }
 
 </style>
</head>
<body>

<p>文字の色だけ<em>緑</em>で指定。でも背景色もcurrentcolorで緑に。</p>
 
</body>
</html>

プロパティ
borders, box shadows, outlines, backgrounds のプロパティへ適用ができます。

対応ブラウザ
Firefox 3.5+, Chrome 1+, と Safari 4+。残念ながら IE9は未だに対応していません。

まだまだ、使い方は全く未知ですが研究すれば便利で役立つ使い方があるかもしれません。



Bookmark and Share