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

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

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

deCSS3

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

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

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

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

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

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

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

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

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

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

「Web制作技術」新着記事

AMP対応したならSearch Consoleでエラーチェックをしておこう

Avatar for ホシナ カズキ

ホシナ カズキ

リンクパーツとして「Embedly」を使うのはいいかもしれんね、という話

Avatar for ホシナ カズキ

ホシナ カズキ

なんか話題のパクリシステム「redo.me.uk」にうちもパクられてた件

Avatar for ホシナ カズキ

ホシナ カズキ

日本語サイト制作するなら、このコーディング向けフォントが最強じゃないかと思う件

Avatar for ホシナ カズキ

ホシナ カズキ

これ使ってみようかな? データベースいらずのフラットファイルCMS「Grav」

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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