ブログリニューアルついでに、ブラウザのCSS3実装に関する所感

ハブろぐ改装中

いよいよレガシーなHTML5に成り果てていたブログを、リニューアル中です。中途半端な状態ですが、見切り発車で切り替えてしまっています。

今回は、以下のような条件です。

1. Twitter APIを流用したコメント機能
2. HTML5を使いまくる
3. CSS3を使いまくる
4. 画像は背景とプロフのみ

前回と大して変わりませんね。ただし、CSS3を無駄に使う次元を目指しているので、モダンブラウザがロクに対応できていない所まで攻め込んでいく予定です。実装状況については、ガンガン使って絶望するのが、一番手っ取り早い知識の蓄積です。

HTML5を使いまくる点については、API部分へのアクセスを試みたい、というところであって新しいタグを使ってみる、というのはあまり重要ではありません。最近のWDは確認した上で、アウトラインも気にはしていますが。

モダンブラウザもCSS3で崩れます

Opera

---

---

HTML5的な実装は先進的なイメージがあるOperaですが、CSS3の実装具合はモダンブラウザとしては落第点な気がします。マルチプルバックグラウンド（背景の複数指定）・グラデーション・角丸がダメな感じ。背景とグラデは、MozillaとWebkitがクリアしてる上に、今回のデザイン的に見劣りが激しいので、個人的に評価が下がっています。ごめんOpera。

( 2010/05/14 18:00 ) コメントでご指摘いただいて、Opera周り情報に大量に誤りが含まれていました。訂正エントリーを後ほど書きます。

( 2010/05/14 22:34 )ってことで訂正書いておきました。前回エントリーのCSS3に関する記述の訂正 ( おしらせ )

Safari

---

---

惜しい！すごく惜しい。Operaも引っかかっていましたが、下記のようなCSSがうまくレンダリングできていません。仕様が動く可能性があったとしても、この見た目は正常とは言えないですよね。他は全部良い感じです。

.radius-box {
     border: 1px solid silver;
     border-left: 10px solid silver;
      -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
}

Firefox

---

---

ほぼ完璧です。後日書く予定のdisplay:boxの実装に不満が残りますが、なんでも丸くしちゃうゾ的な、今回のデザインには適合しています。

Windowsは後日調整します。

とかイイながら、もっと致命的なのはiPhoneとiPadです。iPadも実機で悲惨さを確認しています。嗚呼。

次は@Anywhereとかの話

@Anywhereの可能性も含め、何かブログにして書き留めておきたいと思います。

---