色指定に透明度を加えたRGBaがCSSで使える

最近まで知らなかったのですが、CSSで色指定に透明度を設定できるのだそうです。

ざっくり説明すると、RGBaは三原色（RGB）に透過度（alpha）を加えて指定します。

div {
	background-color: rgba(0, 0, 0, 0.5);
}

三原色はRGBと同じく0～255の整数もしくは0～100%で指定します。
透過度は0（透明）から1.0（不透明）までの間で指定します。

色が指定できるプロパティで使えるようです。

div {
	border: 1px solid rgba(0, 0, 0, 0.5);
	color: rgba(0, 0, 0, 0.5);
}

対応ブラウザ

ざっくり説明すると、Firefox3、Safari3、Opera10、Chromeが対応しています。
IE8が対応しているという情報をいくつか見かけましたが、手元のIE8では確認できませんでした。

CSS-TricksのRGBa Browser Supportでは対応状況が纏められています。

未対応ブラウザ

Firefox2など対応ブラウザのバージョンに満たない物はRGBaに対応していません。

未対応のブラウザは透過度に関係なくプロパティ自体処理されないので、場合によっては色がデフォルトに戻ったり無くなったりします。
未対応ブラウザを考慮する場合、RGBaが構文エラーとならないブラウザでは次のような書き方で対応できます。

div {
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.5);
}

RGBaが理解できない場合は先に指定された値へ戻る仕組みです。

ただし、IE6とIE7はこの書き方でも対応できません。
IE6とIE7も考慮する場合はハックを使って対応できます。

div {
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.5);
	*background-color: rgb(0, 0, 0);
}

ハック以外でもJavascriptや条件付コメントで対応できます。

<style type="text/css">
div {
	color: rgb(0, 0, 0);
	color: rgba(0, 0, 0, 0.5);
}
</style>
<!--[if IE]>
<style type="text/css">
div {
	color: rgb(0, 0, 0);
}
</style>
<![endif]-->

この他に、ショートハンドを使った方法がCSS-TricksのIE Background RGB Bugで紹介されています。

div {
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5);
}

ショートハンドなので他のbackground-*プロパティが初期値になる事、colorなどショートハンドが使えないプロパティがある事を忘れてはいけません。

きっかけ

きっかけはVicunaのスキンに同梱されていたPreviewの表示でした。

右上に表示されるDEBUG MODEの表示が異なるブラウザがあると気づきdebug.cssを覗けば、そこにRGBaがありました。

div.debug-tool div.class,
div.debug-tool div.pages {
	margin-bottom: 3px;
	padding: 5px 0 3px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background-color: rgba(0,0,0,0.9);
	*background-color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

このままだとIE8やFirefox2では背景色がなくなってしまいます。

div.debug-tool div.class,
div.debug-tool div.pages {
	margin-bottom: 3px;
	padding: 5px 0 3px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.9);
	*background-color: rgb(0,0,0);
	font-family: Arial, Helvetica, sans-serif;
}

これでまた少しだけましになりました。
（結局、RGBaが動作するようになるわけではないのですから）