ベンダープレフィックスはもういらない？

こんにちは。digidog(デジドッグ）です。6月23日（日）CSS3講座を再受講してきました。前回の受講はまたもや１年以上前。せっかく勉強はしたもの、IE対策を外せない環境に居た為、ばんばん実装出来ず、結局あまり使う事のないまま記憶も薄くなっていましたので、再受講です。

受講中たくさんプロパティーを勉強しましたが、今回は、ちょっと違った部分でも勉強になったところをご紹介します。

実装はブラウザ次第

画像を使っていた表現が、すっきりと軽い記述だけで色々作れるなんて、初めて聞いたときはワクワクしました。しかし、その機能を存分に使いたくてもブラウザが実装してなければ使えませんね。まずは実装状況の確認出来る「When Can I Use」の見方を勉強しました。今回はCSS3のプロパティー実装状況を調べてみます。トップページからプロパティーを選択するか、プロパティ名で検索、または「All CSS features」から確認出来ます。

When Can I Use…

例として、「border-rudius」を調べてみましょう。

赤いところは対応されてません。ライトグリーンの部分は対応可能ですが、-webkit-と小さくついているところは、ベンダープレフィックスをつければ、対応可能。という事は、最新のブラウザを対象に制作するならば、付けなくてもいい場合もあります。これを利用して、コードもすっきりダイエット出来そうです。

プログレッシブエンハンスメントの考え方

クライアントさんなどとの理解が難しい部分で、CSSがブラウザによって抱える問題がありますが、結局大事なのは「伝えるべき情報」。これをユーザーへいかに良質のUI UXをもって提供していくかが重要なんだと思いました。

最新のCSSを理解できないブラウザに対しては、CSSが使われなかったページに対して、「重いCSSを読み込むより、かえってCSSが無い方が読みやすかった」という例のお話がありました。反対に、最新のCSS技術が理解出来るブラウザに対しては、情報プラス、よりリッチな体験を提供いていこうということでした。

結論、下の写真のような違いがあっても、情報（コンテンツ、内容）が伝わる事。「Webは情報伝達手段」様々なの状況や要素を持った全ての人に、情報を伝えるのが目的。印刷のように全て同じように見える必要は無い。というのが、プログレッシブエンハンスメントの考え方です。

受講後の復習で、練習問題の記述を変えてみたりして、どんな風にレンダリングするのか試していた時、こんなパフォーマンスがあると解りやすいだろうなとか、開発する事を考えていると新しいアイデアが見つかりそうです。

しかし、今までは、この開発をする為の時間を、CSS3未対応のブラウザ対策（見栄えを合わせる事）ばかりに使っていたんだと思うと、「あーこの考えが間違っていたんだ」と実感しました。

Webの目的は、どのブラウザでも同じように見える事ではなく、あくまで情報を伝達すること。HTML5＋CSS基礎講座でも勉強したように、大切なのはユーザーが必要としている情報を的確に伝えるであって、必要以上の装飾や無駄な動きの技術にばかりとらわれて、基礎、骨格となる情報(コンテンツ）が、解りにくくなってしまっては意味がありません。

折角のCSS3の機能も、効果的につかってこその技術ということですね。是非、効果的に使う事が出来るようにまた勉強していきたいと思います。