詳細は後述しますが、今年来年でコーディング面のさまざまな変化がありますので、
見直しに良い時期ではないでしょうか。
制作コンセプトの種類
デザイン(コーディング)する上で、「対応ブラウザどうする?」と確実に悩むところだと思います。
対応する、しない、どういった対応をするのか…、などいろいろ考えなければならないですね。
この部分の考え方については、下記などが上げられるのではないかと思います。
- クロスブラウザ
- Progressive Enhancement(プログレッシブ エンハンスメント)
- Graceful Degradation(グレイスフル デグラデーション)
- Polyfill(ポリフィル)
クロスブラウザはおなじみですが、それ以外はあまり聞きなれていないかもしれないですね。
またなんとなくでしか認識していなかったり、まったく聞いたことなかったなんてものもあるでしょうか?
ではでは、どのような方法なのかクロスブラウザ以外を説明していきます。
Progressive Enhancement(プログレッシブ エンハンスメント)
「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」
一般のブラウザを基準として対応しつつ、モダンブラウザだとよりリッチな表現ができますよ!!
「IE8以下では提出のデザインですが、モダンブラウザでは角丸になるんですよ!」
※角丸での例は表現古くなりつつありますがご了承ください…
という感じです。
実際のフローで考えると、デザインカンプは古いIEなどを考慮したつくりで提出して、モダンブラウザではリッチになるように実装するイメージです。
Graceful Degradation(グレイスフル デグラデーション)
「限られた古い環境を基準にする」よりも、「最近の環境を基準にし、古い環境にはレベルを落とす」
先ほどの逆で、
「モダンブラウザでは角丸になるのですが、IE8以下ではならないんですよ…でも表示が崩れるわけではないです!」
という感じです。
これの手法の上手い言いまわし方で、
「モダンブラウザではこういう立体感のあるデザインですが、IE8以下ではフラットデザインなんです」
という言い方をする人もいたりまします。
実際のフローで考えると、デザインカンプで特にブラウザのことは考えず、そのまま実装するイメージです。
もちろん、古いIEで崩れないような対応は必要だと思います。
Polyfill(ポリフィル)
古いブラウザであってもモダンブラウザと同等の機能を提供する
新しいブラウザを基準として実装して上で、古いブラウザではjavascriptなどを駆使して無理やりレベルを上げる方法です。
よく使われるライブラリとして、
- html5shiv(html5タグに対応させる)
- css3pie(一部のcss3プロパティを使えるようにする)
- respond(IE8以下でメディアクエリを使えるようにしてレスポンシブ対応を可能にする)
など、色々あります。
しかし気をつけたいことがあり、これらで処理をすると処理がかなり重くなるのでこの方法は賛否両論です。
もともと必要がない処理が増えるので重くなるのは当然なのですが、CSS3 PIEなどはライブラリの自体がかなりもっさりしているので、抵抗がありますね…
古いIEのポテンシャルの低さとあいまって、それはもう許容範囲をこえるレベルになってしまうかもしれません。
普段、html5shivを日常的に私が言っていいことではないかもしれませんが…
2013-2014状況の変化
- windowsXP(IE6デフォルト)のサポートが2014年4月に切れる
- スマホがガラケーの出荷台数を超えた2011年のandroid2.Xの2年縛りが2013年で終わる(買いかえによるosバージョンアップに期待)
- 各社のIE対応の見直しが盛んにおこなわれている(Googleなどはサービスによって異なりますが顕著に表明していますね)
- 「このスタイルのベンダープレフィックスはもういらないんじゃない?」との意見の賑わい
- HTML5が正式勧告の予定
などなどと、さまざまな動きが見られます。
これが落ち着いたら、デザインの悩みが減るのか、はたまた淡い夢になってしまうのか…
どちらにせよ、css4などの新プロパティが普及してきたとき各ブラウザの足並みがそろわない…
なんてこともありうる話ですので、対応ポリシーは今後とも上手く付き合っていかなければならないことですね。