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

スポンサーリンク

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

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

deCSS3

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

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

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

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

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

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

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

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

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

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

「Web」新着記事

「楽天西友ネットスーパー」爆誕! 忙しいママの強い味方になりそうじゃないか

Avatar for ホシナ カズキ

ホシナ カズキ

Amazon「ベビーレジストリ」が日本上陸したので早速登録してみた件

Avatar for ホシナ カズキ

ホシナ カズキ

飲食店紹介リンク生成サービス「タベレバ」が公開されていた件

Avatar for ホシナ カズキ

ホシナ カズキ

「スマホでFAX45」を使えば1枚45円でスマホからもFAXを送れる!

Avatar for ホシナ カズキ

ホシナ カズキ

「cookpad Mart」が始まる! サービス対象エリアになるのが楽しみな件

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく