TECHNOLOGY 2014.03.24

これからのWeb標準!すぐに使えるプログレッシブ・エンハンスメントなテクニック10選

  • HTML5/CSS3
  • Markup
  • Tips

2014年の4月9日、ついにwindowsXPのサポートが終了しますが、みなさま、windowsXPからのお引越しはお済みでしょうか?

マークアップ・エンジニアのTOMEです。

IE8以前のレガシーブラウザのシェアがますます減っていくことが予想されるのですが、しばらくはそれらのブラウザにも対応させるケースが続くのでなんともむず痒い限りです。
しかし今後はモダンブラウザ > レガシーブラウザという勢力図になるのはほぼ間違いないでしょう。

つまりは、これをきっかけにクロスブラウザの時代は終焉の時を迎え、ついにプログレッシブ・エンハンスメントの時代が来る!と思うわけです・・・!
どのブラウザでも同じデザイン、同じ動きを提唱する「クロスブラウザ」に対して、コンテンツがもつ情報は保証しつつ、よりリッチなブラウザに対してはより広告効果の高い表現を訴求できる
「プログレッシブ・エンハンスメント」の考えが広がるのは自然な流れなのかもですね。

あれです、『よそはよそ、うちはうち』(ちょっと違う)

前置きが長くなってしまいましたが、今日からすぐに使えるプログレッシブ・エンハンスメントのテクニックを10つほど紹介!

1. border-radius

サンプルはこちら

プログレッシブ・エンハンスメントの代名詞。
直角をマイルドに角丸にしちゃうCSSです。
HTMLもシンプルになり、ネスト構造も少なくなる利点も。

2. box-shadow

サンプルはこちら

ブロック要素に影を落とすプロパティ。
border-radiusで角丸にしても形にそって影落ちしてくれます。
内側に影を落とす場合は値に[inset]を追加。

3. text-shadow

サンプルはこちら

文字に影を落とすプロパティ。
ブラー無し1px程度で使うと文字が締まって見えて良いですね。

4. ::selection

サンプルはこちら

デバイス文字を選択したときのハイライトカラーを設定できます。
背景色と相性のいい色をもってくるとリッチな感じに。

5. :nth-child(odd),:nth-child(even)

サンプルはこちら

使う場所によりますが、背景色を交互に切り替える程度なら是非。
もちろん、見た目が破綻しないこと。

6. linear-gradient

サンプルはこちら

CSS3の代表格である「グラデーション」のプロパティ。
さまざまなCSSプロパティと組み合わせて、今までにない表現が可能になりました。
見た目を大きく左右するのでコントラストのすくない箇所で使うのがポイント。

7. ホバーアニメーション

サンプルはこちら

:hoverをトリガーに、CSS3のtransitionやkeyframeを使ったアニメーション。
グローバルナビやコンバージョンとなるボタンに仕込むと効果的。

8. placeholder属性

サンプルはこちら

フォームでユーザーに入力補助を促すHTML5属性。
登録フォームなど、入力項目のタイトルとして扱っているものは不向きですが、
簡単な検索フォーム程度であれば実装してもいいかも。

9 .webFont

サンプルはこちら

日本語フォントはいまだ厳しいですが英数字のみの文字なら実装可能。
つまり、月一で更新されるカレンダーとの相性抜群!
もちろんコピーライト文にも使えますよ。
フォーマットに気をつければレガシーブラウザにも対応可能です。

10. pjax

詳しくはこちら

pjaxをプログレッシブ・エンハンスメントとするのかどうかは意見が分かれると思いますが、
IE9含むレガシーブラウザ以外のブラウザに対してリッチな表現を与える点で言えば、十分該当するのかなぁと。
pushStateをサポートしていないブラウザは通常の遷移にできるのでその点も問題なし。
けど、実装は上で紹介したのにくらべてちと大変!><

スマートフォンサイトを構築した方ならごく当たり前のモノが多く登場しましたね!

ブラウザだけではなくデバイスの多様化によりマルチブラウザの考えは控えめになり、スマートフォンサイトで培ったHTML5・CSS3のノウハウをPCサイトでも生かしたいという技術屋の欲望がプログレッシブ・エンハンスメントを大義名分として確実に浸透してきたと思うのは自分がマークアップの人だからでしょうか。

ここ数年でIE8以降からというお仕事も多くなり、それに伴いマークアップ側の書き方もいい方向に変化しています。
サポート外とはいえ、レガシーブラウザを完全に切り離すのはまだまだ難しいですが、マルチブラウザが与えてくれた教えは忘れず大事にしつつ、今の時代背景にあったマークアップをブラウザを通してユーザーに届けたいものです。