HTML5 Please 読み方ガイド

HTML5 CSS3 ガイド web制作使い方

Web 制作などで、非常に役に立つ HTML5 Please というサイトがあります。
このサイトの紹介と、ぱっと見は何が書いてあるのかわかりづらいところもあるので、読み方ガイド的なものを書いてみました。
英語のサイトですが、用語の意味さえ分かっていれば、英語があまり分からなくても、ある程度使えるのではないかなと思います。

どんなサイト ?

"HTML5 Please" は「 HTML5 をどうぞ」とか「 HTML5 をどうぞ使ってください」ぐらいの意味でしょう。要するに HTML5 を薦めているサイトです。 HTML5, CSS3 といった新機能に対して、メジャーなブラウザ(IE, Firefox, Crome, Safari, Opera)の対応状況を元にその機能をもう使っていいのか、まだやめておいた方がいいのかといった情報がコンパクトにまとめてあります。

このサイトでは機能のリストの一覧が表示されています。
このリスト項目をクリックすると各機能の説明が表示されます。ただし、利用に関する説明で機能自体の説明は書かれていません。 あらかじめ使いたい機能があって、それが使っていいのかチェックする という使い方になると思います。

さらに説明内の [View browser share %] のリンクをクリックするとブラウザごとの対応状況の一覧も表示されます。

use, caution, avoid

まず、大きく use, caution, avoid で分けられます。
use, avoid はわかりやすいでしょう。ブラウザが対応しているので、使ってもいいというのが use で、未対応のブラウザが多いので、まだ使わないほうがいいというのが avoid です。

では、 caution は何だろうというと、使ってもいいけど、使うのには注意が必要 という機能です。
たとえば、 caution になっているものに box-shadow という機能があります。これはボックスに影を付ける機能で、このブログではサイドバーの各要素の囲みに使っています。
この機能の説明では、あまり大きな領域に対して使うとパフォーマンスが落ちるので、気をつけた方がいいですよという但し書きが付いています。

ただ、 use でも注意しておいた方がいい点もあります。
それは基準が各ブラウザの最新バージョンで対応済みであれば、 use になるということです。
Windows XP だと IE 8.0 までしかアップグレードできないので、まだシェアは高いと思いますが、 IE 8.0 で使えない機能も use で表示されます。

また、理由はよく分かりませんが、 IE 9 で対応済みとされている機能が実際には対応していないということも多いです。
たとえば、境界線の角を丸く表示する border-radius という機能があります。これはこのブログでもナビなどのボタンやサイドバーの各要素の囲みに使っているのですが、私の環境の IE 9 では丸く表示されていません。
先ほどの box-shadow も同様に IE 9 では機能していません。

追記 2012-7-21

IE が IE7 のレンダリングモードで動作してるのが原因でした。
IE9 で動作するように指定すれば、 border-radius, box-shadow ともにちゃんと機能するようになりました。

IE を実際のバージョンで動作させるサイト側の指定方法 | プログラマーズ雑記帳

polyfill, fallback

use や caution の後に with polyfill や with fallback がついているものがあります。この polyfill, fallback とはなんでしょうか。

polyfill

polyfill というのは web 関連の造語で、ブラウザがまだ対応していない機能を提供する JavaScript やアドオンなどを指しています。ある機能に対応していないブラウザがあったとしても、その機能を実現する polyfill があれば、すべてのメジャーブラウザで機能を使えるようになります。
例えば、<canvas> という html 上に図を描画する機能は IE 9 ではまだ対応していませんが、 polyfill を使えば、 IE でも canvas が使えます。

HTML5 Please ではお勧め polyfill もリンク付きで紹介されています。

polyfill なんていう便利なものがあるなら、ブラウザが対応していなくても、新しい機能をどんどん使っていけばいいやと思う方もいるかもしれません。
しかし、この polyfill は大抵 JavaScript で無理やり実現させたもので、スクリプトのロード時間もあり、ブラウザで対応されている方が処理速度は速いです。
実現しようとする機能によっては、 JavaScript でやろうとすると著しく時間がかかってしまうものもあります。実は caution で紹介した box-shadow にはもう一つ但し書きがあり、そこには box-shadow の polyfill は遅くなってしまうので、使わない方がいいよと書かれています。

fallback

fallback は日本語ではいざという時の予備品，代替物といった意味になります。
これが付いている機能はブラウザが対応していないときの備えをしてから、使おうということになります。

例えば、 fallback になっている機能に gradient という CSS の機能があります。これはグラデーションをかけて色を付けることが出来る機能で、このブログでは記事タイトルなどに使っています。

この機能はグラデーションのついた画像を背景に使うことで代用することが出来ます。ただし、画像の方が遅くなりますし、長くなって 2 行になった場合などではきれいに表示できません。
HTML5 Please では画像を使う方法や単一の背景色を指定することで、対応していないブラウザに備えておくことが推奨さています。

ちなみにサイトでは理由までは説明さていませんが、 gradient に関しては border-radius や box-shadow と違い、対応ブラウザの備えとして背景色の指定はやっておいた方がいいです。
というのも、 gradient に対応していないブラウザでは、背景色が描画されないためです。正確には、 <body> などのベースとなる要素の背景色になるのですが、背景色が期せずして使われると、情報を伝えるというところにも影響を与えることがあります。例えばその背景色が白で、文字色も白に近い色だった場合、コンテンツの内容が読めなくなってしまいます。

また、 gradient の説明にはベンダープレフィックスを付けるように薦められています。
ベンダープレフィックスというのは仕様の確定していない機能に対して、ブラウザごとの書き方をするものです。詳しくは以前の記事に書いたので、そちらを見てみて下さい。

ブラウザとレンダリングエンジン#ベンダープレフィックス

    background-color: #F5F5F5; /* 代用色 (gradient に対応していないとこの色になる) */
    background: linear-gradient(top, white, silver);
    background: -moz-linear-gradient(top, white, silver);
    background: -o-gradient(top, white, silver);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(silver));

polyfill か fallback か

未対応のブラウザがある機能を使う場合、 polyfill か fallback かということになります。 HTML5 Please ではこれはどのように選択されているのでしょうか。

この選択の説明の前にまず、最近 web 制作で主流になりつつある プログレッシブエンハンスメント という考え方について説明しておきます。
これは 高機能なブラウザではかっこよく、そうでなくてもそれなりに という考え方です。モダンなブラウザを使っている人には新しい技術を取り入れた高度な見せ方で提供して、そうでない場合でも、見え方はシンプルになるけど内容は損なわないようにしようということです。

クロスブラウザはもう古い！ HTML5 ＋ CSS3 時代のプログレッシブ・エンハンスメント - @IT

いままでに紹介した border-radius や box-shadow などは角を丸くしたり、影を付けたりするだけで機能していなくても、中身に影響はないので、どんどん使っていくべきです。
それに対して <canvas> といった新しいタグを使うと解析に失敗したりするなどして表示自体できなくなったり、内容を損なったりします。こういった場合は polyfill を使うか、まだ使用を避けるということになるでしょう。

HTML5 Please もこういった思想を元に作られているようです。
基本的に表示の装飾だけに関係するものは fallback になっていて、 機能しないと困るようなものは polyfill というようになっています。
また、 JavaScript で作られた polyfill だと処理速度がかかるので使わない方がいいという情報や、逆に fallback でもお勧めの polyfill がある場合には、その polyfill へのリンクが紹介されています。

フィルター

最後にフィルター機能について紹介したいと思います。
ページの上部にあるテキストボックスやリンクで表示内容をフィルタリングすることができるようになっています。テキストボックスのフィルターも便利なのですが、リンクも use だけ、 css だけといった感じでフィルタリングができ、知りたい情報をピックアップしてみることが出来ます。
中でも便利な 2 つのフィルターをあげておきます。

IE8+: まだシェアの広い IE 8 から対応している機能のみを表示します。
prefixes: CSS のベンダープレフィックスが必要な機能のフィルタリングです。

関連記事

スポンサーサイト

Prev. Category Next

trackback

新規トラックバック

この記事にトラックバックする(FC2ブログユーザー)

Facebook コメント

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

プログラマーズ雑記帳