CSS3 ドラえもんでIE10とOpera11のCSSグラデーションに対応させました！
昨年公開して大好評だったCSS3 ドラえもんですが、久しぶりにコードを編集してバージョン3にしました。今回のバージョンアップによりInternet Explorer10とOpera11のCSSグラデーションに対応させました！これにより、ついに全てのモダンブラウザで同一表示が可能になりました！
今回のコード追加対応で、IE10とOpera11はChromeやfirefoxと同等の表示が可能になっています。今回のはブラウザのバージョンアップによるCSS3グラデーションの対応であって、IE8以下では今まで通りの四角いドラえもんです。
CSS3 ドラえもん ver3
CSS3 ドラえもんとは、画像を一切使わずにドラえもんの絵を描いたものです。使うものはHTML+CSSだけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。
上の画像はIE10で表示し、スクリーンショットを取ったものです。では、さっそくどれだけ変化したのか、ブラウザの動作を以前のものと比べてみましょう。IE以外のブラウザは以前のものといっしょです。
各ブラウザの動作
以前のCSS3ドラえもんではIE8はオチを担当してくれました。
↓↓↓↓
今回のバージョン3ではIE10、Opera11もちゃんとグラデーションが適用されており、全てのブラウザで同一表示のドラえもんになりました。
CSS3サイト
Pure css design
今回これらのCSS3シリーズをまとめておくサイトとして、Pure Css Designというサイトを作りました。Chromeで見るとCSSアニメーション付です。
今回の個人的感想＆まとめ
今回のバージョンアップによって、ほぼ全てのモダンブラウザでちゃんとCSSドラえもんが表示できるようになりました。IE10とOperaでもグラデーションが表示されとりあえず一安心という感じですかねー。
本当はもっと早く公開すべきものであり、実際に半年くらい前にIE10対応版のコードを書いあったのですが、実は記事の方を書いてなく修正版を公開していなかったかったというオチでした。そんなこんなでWindows8を入れたときにテストしてみて気がついたので、早速記事にしました。
まあ、でもうちのサイトのIEユーザのアクセス解析ではIE10の利用率は0.02％、IE9ですら未だに38％ですし、IE8が55％も蔓延ってる状況ではCSS3をがんがん使っていくという状況ではないですかねー。それでも以前に比べれば格段にIE9の使用率が上がっていることも確かです。IE10がまともに使われ始めるのは正式公開されて1年後くらいになりそう。
ドラえもんが可愛いと思えたのは初めてだ
にしてもすごいですね。やろうと思えばCSSとか全く知らない人でも出来るんですかね？