RGBaを使ったプログレッシブ・エンハンスメントと注意点

カテゴリ:IEのCSSの問題を回避する技 2010年1月27日 14:16

いきなりはてブで vantguarde さんに突っ込まれました・・。今回の件はプログレッシブ・エンハンスメントではないですね。フォールバック、というらしいです。
プログレッシブ・エンハンスメントは、「なくても内容が破綻しない」というときのことですね。今回は "代替" を用意してるので違う、と。てか、こうなるとすでにタイトルが破綻してる気が・・w とりあえず積極的に新しい技術を使っていこう、という気持ちは変わらないので、このままにしておきます、ってことでいちおう注意。
ちなみに CSSのプログレッシブエンハンスメントの例 にちょっと詳しく書いてありました。

ちょっと面白い記事を見つけたので紹介です。(元記事: IE Background RGB Bug

概要はというと、単一セレクタによる指定で RGBa に対応していない IE6, 7 に対処しつつ、対応しているブラウザには RGBa を適用させる、というときの注意点です。

RGBa を使う

RGBa は、IE6, 7 は対応していません。なので、もしそのまま指定すると当然、IE6, 7 では背景色がない状態になってしまいます。
背景色がなくても問題ないこともありますが、例えばベースのテキストカラーが白(黒背景)で、見出しだけ白っぽい背景にした、などという場合、当然その見出しに載せるテキストカラーは黒に近い色になると思います。

そんなとき、もし背景色が表示されないとなるとテキストが見づらいばかりか、最悪の場合見れない、などということにもなりかねませんよね。
なので、RGBa に対応していない IE6, 7 であっても適切に文字が見えるようにしなければなりません。

CSS ハックを利用して、IE6, 7 だけに改めて背景の色を指定する、ということも考えられますがやや冗長になってしまいます。そこで、ひとつのセレクタ内で完結する記述方法が下記です。

CSS ソース01

こうして並べて記述することで、IE6, 7 とモダンブラウザ双方とも背景色が表示されるようになります。

注意点

しかし、元記事でも触れていますが、この方法、ショートハンド(backgroundのみのもの)で指定しないと IE6, 7 では反映しないようです。なので、下記のように書いてしまうと IE6, 7 では背景色が表示されません。

CSS ソース02

プログレッシブ・エンハンスメントという考え方

最近では、モダンブラウザで使える機能は積極的に使い、IE6(場合によっては IE7)などの対応していないブラウザに対しては同じような表示になるよ代替を用意する、という "プログレッシブ・エンハンスメント" という考え方が徐々に広まってきています。
RGBa はとても使いやすい機能なので、積極的に使っていきたいですね。

ちなみに、IE6, 7 では RGBa に対応していない、と書きましたが、filter をうまく使うと RGBa のようなことを実現することは可能です。以前、IE6, IE7でもRGBaを使う という記事を書いたので、よかったら参考にしてみてください。

この記事のカテゴリー一覧を見る⇒IEのCSSの問題を回避する技

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/173