HTML5/CSS3どのように対応すれば良いの？そしてデザイナーの本音

HTML5そしてCSS3では、シンプルなマークアップでリッチな表現が可能になり、今までJavaScriptやFlashなどを使って配置していたコンテンツも配置できるようになりました。しかしご存知のように、対応しないブラウザが少なくなく(主にIE7～IE8、モバイル端末)、いまだ過渡期と言えるでしょう。
そんな今、どのようにして記述言語を決めたらよいのでしょう？

世に溢れる様々なブラウザ閲覧環境。機能の対応状況も多様である現在、従来の「クロスブラウザ＝(全ての端末において同様の表現、同様の機能を提供する)」の考え方よりも「基準とするブラウザ」を設定してその他のブラウザをどうするかを検討し、ポリシーを明確にしておくことが大事になっています。

上記のポリシーに対して、実際に制作の場面ではどのような表現の仕方をするのかみてみましょう。

作りたいサイトはどんなPolyfillで対応が可能か？そんな時に便利なツールが以下。 ブラウザ対応ポリシーを決める材料になります。

Polyfillは一見便利なように見えますが、jsライブラリという形で動かし重いため、使用には十分注意が必要です。
例えば、サイトの主要コンテンツでブラウザ間に差異があると困るような機能(UX)に使うことは良いですが、 必ずしもグラデーションで見えなくても良い箇所に対して、レガシーブラウザでグラデーションにしたいからPolyfillを使う、というのは理由として十分ではなく、推奨できません。(そういった理由の場合多くはデザイナーのエゴによるものです。)

機能やUX基準に考え、本当に必要な場合に使用しましょう。

例として「transforms」というcss3プロパティがあります。これは図形や文字に対して拡大・縮小、移動、回転などを指定することができ、使い方によってはデザインに面白みを与えたり、図形を画像の代わりに使えたり、昔はflashで実装していたような面白いことが出来ることがあります。うまく使えば新鮮でインタラクションに富んだコンテンツができることでしょう。
しかし、このプロパティは、IE8は非対応、IE9であればprefix「-ms-」の接頭語付与、iOS Safari8.4、Android4.4以前では「-webkit-」の接頭語でようやくサポートという対応状況です。そしていわば表現の幅を持たせる用途で使われるために、うっかりすると「Polyfillの必要はない」と判断されます。
しかし、対象物は「変形」しているため、表示端末・サイズによっては「文字に被ったり」「大事な情報に被ったり」することがあります。
そうなった場合には「Polyfillは必要」です。またはその他の選択肢としては「そのプロパティ自体使わない」でください。
要はプロパティによっても、注意すべき部分が様々なので、プロパティの特徴と対応状況をきちんと把握しつつ、どのように対応するか、方針を明確にしておく必要があるということです。

たとえば、様々な要素をマークアップするときに、HTML5では以下のように役割が明確になりました。CSS3での表現力のおかげで画像をたくさん使わなくてもよくなりました。 そればかりでなく、従来のCSS2での表現では、何かを実現する手段は「Tips的」であり、知っているか知らないかで作業効率も違い、またTipsもたくさん存在するため、出来具合もコーダーによって個人差がありました(つまり検証にも時間がかかりました)。CSS3では、同じ条件でコーディングすれば誰が作っても同じような書き方で同じような結果が得られます。

不要なコードが減りすっきりした

画像作成とスライス作業が格段に減った！

html内でできること（機能）が増え、長いコード・埋め込みコード、Flashなどのプラグインに頼らなくてよくなった

まだまだ安心して使えないHTML5/CSS3ですが、流れは間違いなくその方向へ動いています。 本当に必要な機能は何なのか、そこに加えるデザインの意味とは何なのかを見極めたうえで、ブラウザ対応ポリシーを決め、適切に使用していきたいものです。

それはコンテンツ全体を考えていくうえでも重要な視点となるでしょう。