CSS3に対応していないブラウザで閲覧したら? をかんたんに確認できる「deCSS3」

最近、サイト構築はHTML5とCSS3を使うようにしているんですが、まだ対応していないブラウザもあったりするわけです。

CSS3を使っている場合に、対応していないブラウザからサイトを閲覧するとどんな感じに見えるのかな? ってのをチェックしないといけないわけですが、それをかんたんに確認できるブックマークレットがありました。
deCSS3」というやつです。

deCSS3

アクセスしたら、「Drag this bookmark bar →」とロゴ下にあるので、deCSS3というリンクボタンをドラッグしてブックマークバーに置いてやれば準備OK。

あとは確認したいサイトで、ブックマークレットを実行してやるだけ。

例えば、このブログの場合だとまずヘッダーバー。

CSS3に対応したブラウザの場合

こんな感じで、ヘッダーバーにシャドウが掛かっていますが、これはCSS3で実装しています。

で、先ほどのブックマークレットを実行すると、

CSS3に非対応のブラウザの場合

このように、CSS3で実装しているシャドウが消えました。

これを実行してみてそこまで見栄えに影響がなければ、CSS3 PIEとか導入しなくてもいいんじゃないかなという気がします。

まぁ、ちょっとどちらかというと制作者向きのブックマークレットではありますが、興味のある人は試してみてはどうでしょうか。
ブックマークレットに対応するブラウザは今のところ、Google ChromeとSafariのみになるので、試してみる場合は対応しているブラウザからどうぞ。

モバデビの最新情報をチェック