サイトで HTML5 を今すぐ使用する方法

HTML5 については、「HTML5 に何を期待しますか?」などの記事が数多くあります。 「HTML5 は Web をどう変えるの?」などさまざまなことを考えますが、Web 開発者にとって重要なのは、HTML5 で何ができるのか、そしてどのように使い始めるのかということです。幸いなことに、HTML5 ではすでに多くのものが利用可能になっています。

ただし、最初に理解する必要があることが 1 つあります。それができない場合は、HTML5 を使用すべきではありません。サイトにアクセスするほとんどの人が IE6 を使用している場合、HTML5 を使用する理由はまったくありません。一方、サイトの訪問者が全員 iPhone や iPad などのモバイル ブラウザを使用している場合、何を待っているのでしょうか?今すぐ始められます!ちょっと待ってください。ここにいくつかのガイドラインがあります。読んでから始めても遅くはありません。

現在使用できる HTML5 機能は何ですか?

HTML5 標準はまだ草案であり、標準化団体の手によって議論されていますが、重要な部分は多くの最新のブラウザーに実装されています。 Apple Safari、Google Chrome、Mozilla Firefox、Opera、Microsoft IE9 はすべて、HTML5 の一部の機能をすでにサポートしています。

まず、HTML5 TEST Web サイトでの各ブラウザーのスコアを見てみましょう。

*Apple Safari 5.0: 208

* Google Chrome 5.03:197

※マイクロソフトIE7：12

※Microsoft IE8：27

*Mozilla Firefox 3.66: 139

* オペラ 10.6: 159

IE コアではないほとんどの主流ブラウザは HTML5 を適切にサポートしており、「HTML5 ドラフトを使用する Web サイト」を非常に適切に動作させることができることは明らかです。

最初に戻って、HTML5 doctype を使用できるようになりました。これを使用しない理由はありません。Web サイト全体でクエリや置換を行うこともできます。

は次のようになります:

次のコードは、よりクリーンで簡単に見えますね。ブラウザーが標準に準拠した方法で Web ページをレンダリングした場合でも、引き続きそのようにします。

ビデオについて話しましょう。 HTML5 に関する多くの出版物では、現在の競合他社として、Flash、H.264、OGG、WebM の合計 4 社について言及しています。これらはすべて、将来的には標準形式になる可能性がありますが、どのプラットフォームでもすべてのブラウザで正しく動作するものはありません。残念なことに、ブラウザのスポンサーはすぐにはこの機能に対応した形式を準備していないようです。

したがって、Video タグがまだ適用できる段階に達していないことは明らかです。しかし、ちょっと待ってください。HTML5 ビデオ タグはフォーマットに依存しないと考えるべきです。実際、ビデオには複数の Source タグを含めることができるため、このように動作する必要があります。ブラウザが最初のオプションをサポートしていない場合は、2 番目、次に 3 番目、4 番目、5 番目... が試行されます。

このような状況に対処する HTML は、スクリプトやブラウザ スニッフィングを使用せずに Web ベースのビデオをサポートするオープン ソース プロジェクトであり、ここで見つけることができます。

意味的に言えば、HTML5 の大きな変更点は、明確なセマンティクスを持つタグです。見てわかる変化は、サイトが次のようなコードで埋め尽くされていることです。

HTML5 では次のように表現できます。

セマンティクスはより明確ですか?もちろん、これらの要素をフォーマットするには CSS [Cascading Style Sheets] を使用する必要があります。ただし、待ってください。これらのタグをサポートしている IE のバージョンはありません。これは人々にとって大きな問題です！私たちは本当に不運なのでしょうか？ありがたいことに、私たちには解決策があります。次のコードをページの HEAD タグに貼り付けるだけです。

HTML5 Shiv は、IE で DOM 要素を作成すると、その名前をスタイルで使用できるという単純な発見に基づいたオープン ソース プロジェクトです。たとえば、次のように使用すると、

DOM 要素を作成すると、現在のページに任意の数の foo タグを追加でき、IE によってそれらのタグがフォーマットされます。 HTML5 Shiv には、IE が認識できない HTML5 要素がいくつか含まれており、それらを 1 つずつ作成します。このようにして、次のような HTML5 タグを使用できます。

スマート フォーム。HTML5 をよりスマートにするもう 1 つの機能です。電子メール アドレスや電話番号、インターネット アドレスなどの有効性を確認するために、毎回同じスクリプトを作成するのにうんざりしているのは、あなただけではありません。この面倒な作業をすべてブラウザに行わせるのには理由がありますよね。全くその通りです。

構文は次のとおりです。

それらの古いブラウザはどうなるでしょうか?より賢い部分は、認識できない値を持つ TYPE 属性を見つけた場合、その要素をデフォルト値の Text でレンダリングします。これはまさに私たちが期待する下位互換性の結果です。 HTML5 をサポートするブラウザはこのフィールド タイプを自動的に検証しますが、少なくとも IE9 が普及するまでは、以前のスクリプトを破棄しないほうがよいでしょう。

この種のアクションをサポートするブラウザが検証を超えて何を行うのか疑問に思う場合は、iPhone でこれらのフォームを試してみることができます。フォームに関連付けられているキーボードの種類が数字である場合もあれば、@ 記号が追加された英数字である場合もあり、さらには key.com が直接含まれている場合もあります。必要なのは、type 属性の値を変更することだけです。

もう少しスマートにすることもできます。ここに新しい属性があります。

この値は、インターネット上でよく見られるテキストの一部を指定することができます。このテキストは、値がない場合に表示され、そのままにするとテキストに戻ります。以前は Javascript を使用して処理していましたが、現在はブラウザーが処理を行います。

すぐに使える HTML5 機能は何ですか?

さまざまな理由により、まだすべての HTML5 要素が使用できる状態ではありません (いずれも IE と略されることはありません)。ブラウザーのサポートは間もなく開始され、そう遠くない将来には、すぐに 2 つの要素が使用できるようになるでしょう。

マジック フォント、すべてのデザイナーは、サイトの訪問者全員がデザインするときに必要なフォントをインストールしてほしいという夢を持っています。これを行うには、以前は画像や Flash などさまざまな方法がありましたが、現在ではそれらが使用されています。この権限を持っていると、訪問者に指定したフォントのインストールを強制できます。これは CSS3 がサポートするものです: @font-face 属性。 Firefox バージョン 3.5 より前および Safari のモバイル バージョン (iOS 4 より前) は、この属性をサポートしていません。サイトに同様のアクセスが多数ある場合は、待つ必要がある場合があります。

いずれにせよ、すべてのブラウザが同じフォントを使用する本当の理由はありません。この属性をサポートするブラウザにカスタム フォントを提供し、この属性をサポートしないブラウザに代替フォントを提供する場合は、現時点では http://www.fontsquirrel.com/ を使用するのも良い解決策です。 fontface/generator が最適です。

影と丸い角は、多くのデザイナーにとって嬉しいものです。テキストの影、ブロックの影、ブロックの角の丸いなどが、CSS3 で標準的にサポートされるようになりました。繰り返しになりますが、ピクセルの完成度に基づいてさまざまなブラウザーでのレンダリングを測定したくない場合は、今すぐこれらの機能を使い始めることができます。 CSS3 ジェネレーターはこれを行うのに役立ちます。

いつか使うかもしれない機能は何ですか?

このカタログには、開発者とデザイナーが長年考えてきた機能が含まれています。残念ながら、現実の世界で使用できるようになるまでにはさらに数年かかる可能性があります。

スマート フォームについては以前にも言及しましたが、実際には言及されていない便利な要素が他にもたくさんありますが、より広範囲にサポートされる前には、それらを使用する方法はありません。

スライド式セレクター:

カラーピッカー:

日付ピッカー:

定期的な検証を行う入力ボックス:

必須の入力ボックス:

これらのタグはいずれもクロスブラウザーまたはクロスプラットフォームをサポートしていませんが、その日が来たら、間違いなくこれらのタグを使いたくなるでしょう。

CSS3 のもう 1 つの機能である印刷レイアウトが完全に実装されるまでにはまだ何年もかかります。デザイナーに複数列レイアウト機能を提供します。現在のところ、Firefox と Safari のテストケースでのみ実装できます。

地理位置情報の検出は、Gowalla や Foursquare などの位置情報ベースのサービスの成長に伴い、ブラウザーがユーザーの現在地を知るのに役立ちます。したがって、携帯電話をベースにしたモバイル ブラウザがこの機能を最初に実装しているのは驚くことではありません。Firefxo 3.5 と Safari 5 がすでに地理位置情報のサポートを提供し始めています。 (Chrome の同様のサービスは Gears を通じて実装されていますが、徐々に HTML5 に移行しています)。

オフラインで作業し、クラウドにデータを保存することは、インターネット接続がないことに気づいていない場合、または大量のデータを処理する必要があり頻繁に実行する必要があるアプリケーションがある場合に最適です。サーバーとの通信は思ったより簡単です。より多くのデータを取得したい場合や、モバイル データが制限されているため、大量のデータ損失を避けるために、より多くのデータを携帯電話に保存したい場合は、ローカル ストレージを使用してアプリケーションをオフラインで動作させる必要があります。接続するとクラウドに接続されます。

この機能をサポートするブラウザは、Firefox 3.5 以降、Safari Mobile 3.1 以降、Safari 4 以降、Chrome 4 以降です。

HTML5 の約束の 1 つであるアートボード、アニメーション、変形効果は、Canvas 要素といくつかの CSS3 プロパティを使用して実現でき、完全にイラストが表示され、完全にアニメーション化された Web サイトを実現できます。これは 2010 年 7 月 12 日時点の規格によるものです。

緑 = 達成、赤 = 計画なし

最先端の HTML5 へのショートカット

IE8 が終了するまで待てない場合は、IE8 をスキップして次に進む方法がたくさんあります。繰り返しになりますが、すべては訪問者次第です。サイトのアクセス ログを調べて、どのブラウザのヘッダーが最も多くアクセスされているかを確認してください。これを行う 1 つの方法は、たとえば、Google の Chrome Frame を使用して Chrome インスタンスを IE に埋め込むことです。サイトの訪問者が GCF [Google Chrome Frame] をインストールしている可能性があることがわかっている場合は、それを HEAD に追加できます。前の行の META タグにより、IE は Web サイトを表示するために GCF を使用するようになります。

[編集者: ただし、これを実行すると、IE=7 の元の IE7 互換モードが無効になることを思い出してください。選択する場合は、ご自身で検討してください。 】

GCF をインストールしていないユーザーが GCF インストール ページにジャンプできるようにする、Google が提供する短いスクリプトと組み合わせることで、IE の制限を回避できる可能性があります。 [編集者: おかしいですね、GCF が無料のトラフィックをもたらすための無料広告のように思えます...]

この記事にリストされている要素は、現在の HTML5 および CSS3 ドラフトのほんの一部にすぎません。新しい機能の一部を使用する必要がある場合は、サーバーの互換性の問題が最小限に抑えられるように、既存のオープン ソース プロジェクトを確認する必要があります。 。

HTMLを報道する際、多くのメディアは「2022年まで」「Flashキラー」などそのスタンスに焦点を当てます。実際のところ、HTML5 は長らく待ち望まれていた HTML4 の完全に新しいアップグレードなので、今日から使い始めることができます。