Chrome で box-shadow が効かない!? ベンダープレフィックスってどうすれば!? 調べてみてわかった

thikasa

Category: ブログ / Tag: ,

以前の記事で、こんなことを書きました。

ベンダープレフィックスは付けていません。

面倒なので(汗

でも表示されてるみたいですね。
しかし box-shadow だけは Firefox でないと表示されません(ベンダープレフィックスを書いたのでですが Chrome だと表示されませんでした)。

このへんはよくわからず!(`・ω・´)
居直ってますw

via このブログの細かい CSS の調整をしました | thikasa note

ここで問題にしているのは次の2つ。

  • box-shadow が Firefox でしか表示されない
  • ベンダープレフィックってどうすれば?

これらについて、ちょっと調べてみました。

box-shadow が Firefox でしか表示されない

これはいろいろと試していてわかりました。

以前のはこう。

 

こうやったら動きました。

 

つまり、

rgba(0,0,0,.5)

これですね。
これを付けたら Chrome でもちゃんと表示されました。
Firefox はこれ無しでも表示されたんですが、この辺り、やっぱりブラウザによって動作が異なるのですね。

でもま、これで解決です(・∀・)

 

ベンダープレフィックってどうすれば?

いろいろと調べてみたのですが、

CSS3のベンダープレフィックスはまだ必要かどうか | webox blog

 

Firefox 4 よりも前、Chrome 10 よりも前、というブラウザであればベンダープレフィックスが必要とのこと。

なので、ひとまず box-shadow についてのみ言えば、2012/07 においては Firefox 13、Chrome 20 という現状、ベンダープレフィックスは付けなくてもいいような感じですね。

商業サイトだとそうも言ってられないでしょうが、個人のブログなら、無くてもいいんじゃないかと。
思いました。

 

ひとまずこのまま

ということで、

  • CSS のプロパティはしっかり指定する
  • ベンダープレフィックスは指定無し

これでよさそうです。

とはいえ素人調べなので、違っていたらどなたか突っ込んでくださいませ!

RSS 登録

もしこのブログを気に入っていただけたのなら、RSS 登録をお願いします。
最新情報をお届けします。

follow us in feedly