freefielder.jp

PC版へ 2011年01月07日

さてさてInternet Explorer 9、機能の目玉はなんといっても「CSS3対応」だと思うのですが、どんな具合なのかベータ版で試してみる。

個人的によく使うプロパティに box-shadow があります。オブジェクトに影を付けて立体的に見せるやつ。イメージ画像は↓こちら。
で、Firefox / Safari / Google Chrome / Opera の各ブラウザで box-shadow の効果を実現するためには、例えば以下のようなスタイルシートの記述になります。


IE8 以前のバージョンは box-shadow を解さないので、代わりにIE独自の filter プロパティを使って同じような効果を表現してみたりします。


実際にサンプルページをいろいろなブラウザで見くらべてみてください。

でIE 9 は、box-shadow をめでたく理解するようになりました。つまり、上で例示したスタイルシート内の、Opera用として記述した box-shadow:5px 5px 5px #999; というのをIE 9は正しく解釈してくれるわけです。

試しに、


…とだけ記述したスタイルを適用してみたサンプルページ。IE 9β と Opera10.5以降で見たときだけ box-shadow の効果が得られると思います。

が、ここで割と重大な問題が。


たとえば、上のスタイルをGoogle Chromeが読んだときには…


…という処理になるのですが、IE 9βで読み込むと…


…となって、結局 filter のほうが優先で適用されます。記述の順番を変えてもやっぱり filter が優先。

クロスブラウザで見栄えに差が出ないようにと、上記のようなスタイルシート設定をしている人も多いと思います。IE 8とそれ以前のバージョンで効くように filter プロパティを設定すると、せっかくCSS3のbox-shadowに対応したIE 9βでも、box-shadowを無視して filter が効いてしまう…。

まぁ「表示が大幅にズレる」とか、そういう致命的な話ではないので良いっちゃ良いのですが。

CSS3に対応した意味、ないじゃん。
 

関連記事

• 【Linux Mint】OSのダークモード設定がウェブページに反映されないのを直す。
• ウェブページのダークモード化。画像が目立ちすぎるので何とかする。
• ウェブページをダークモード対応にする。
• Mastodonのタイムラインをウェブページに埋め込む。
• 【縦書き】h2vR.jsの大幅な改修をしようと思います。
• 【Windows】インストールした筈のフォントをCSSのfont-faceで指定してもローカルから読み込まれなくて悩む。
• textarea内でタブを入力可能にする。ついでにタブ幅も変更する。
• 【CSS】input type="range" の見栄えを、異なるブラウザ間で統一する。
• jQuery要らずでスクロールバーをカスタマイズするJavaScriptライブラリ・"perfect-scrollbar"。
• スタイルシートで矢印を描く。

コメント

現在、コメント機能は停止しています。

PC版へ | メール | Tweetする
プライバシーポリシー