HTML5やCSS3を使用してWebサイトを構築する必要がありますか?


16

新しいHTML5 / CSS3(Web8!)のものはかっこいいですね!今すぐ使用を開始するか、css / xhtmlを使い続ける必要がありますか?


Web8とはどういう意味ですか?
アーロン

3
html5 + css3 = web8!
ジェイソン

HTTP 1.0とECMAScript 5.0はどうですか?

回答:


13

HTML5は、IE5!(html5shivスクリプトを使用する場合)を含むすべてのブラウザーでサポートされるようになりました。http://diveintohtml5.orgを読むことを強くお勧めします。http://diveintohtml5.orgは、最高のHTML5リソースの1つです。

CSS3については、使用する場合は、通常の構文に加えて、ベンダープレディックスも使用してください。例えば

境界半径

-moz-border-radius

-webkit-border-radius

私は進歩的な強化を信じています。IE9のcss3サポートは非​​常に有望です。


2
境界線の半径を一番下に置くつもりだと思いますか?
グラントペイリン

1
悲しいかな、元のDive Into HTML5サイトはなくなりました。多くのミラーが利用可能です。1つです:diveintohtml5.info
M.ダドリー

12

多分。

現在使用できるHTML5の部分が今日あります。たとえばフォーム。あなたが持っている場合は<input type="email">HTML5をサポートしていないブラウザで(そう、でもIE6)あなたは単にあなたが使用している場合、あなたが見ていたものと同じものが表示されます<input type="text">。しかし、HTML5フォーム要素をサポートするブラウザーでは、このemailタイプの利点が得られます。つまり、クライアントは余分なJSを必要とせずに値をエラーチェックします。はい、HTML5以外のブラウザにはJSが必要ですが、サポートするブラウザにはもう1つの検証レイヤーがあります。

このサイトの別の質問では、HTML5およびCSS3を介して利用可能な新機能の概要を説明しています。その質問には、フォームに関する多くの優れたデータもあります。

Internet Explorer(およびSafariとFirefoxの古いバージョン、まれですが)はこれらの機能の多くをサポートしていないため、JavaScriptライブラリを使用して空きを埋める必要があります。これらには、パフォーマンスヒットが含まれます(使用する必要があるのはブラウザのみですが)ため、使用する際はユーザーに注意してください。

機能サポートの欠如に関する問題を軽減するには、これらの新機能が価値があると判断した場合、次のリソースを使用します。

  • html5shiv: IEがHTML5要素を認識してスタイル設定するためのJavaScript shiv。
  • CSS3 Pie:.htc Internet Explorer 6-8で最も有用なCSS3デコレーション機能のいくつかをレンダリングできるようにするIE添付ビヘイビアー(ファイル)。要素に適用される場合、それはIEが認識および表示することができborder-radiusbox-shadowborder-image、複数の背景画像と、linear-gradient背景画像として。
  • Modernizr:機能検出を使用して、今後のCSS3 / HTML5機能に対して現在のブラウザーをテストし、サポートされているクラスの<html>要素にクラスを追加するJavascriptライブラリ。また、trueサポートされているfalse場合とサポートされていない場合は、各機能のブールプロパティを含むセルフタイトルのグローバルJavaScriptオブジェクトを作成します。スタイリングと次のような要素を使用できるようにHTML5の要素を印刷するためのサポート追加<section><header>およびを<nav>
  • ie-css3.js: Internet ExplorerがCSS3擬似クラスセレクターを識別し、それらで定義されたスタイルルールをレンダリングできるようにします。サイトが使用するJavaScriptライブラリに基づいて、さまざまなCSS3セレクターをサポートします。
  • DD_belatedPNG: IE6にPNGイメージサポートを追加するJavascriptライブラリ。PNGsrcは、<img />要素の要素として、またはbackground-imageCSSのプロパティとして使用できます。異なりAlphaImageLoaderbackground-positionそしてbackground-repeat仕事意図したとおりに、そして要素がに応答しますa:hover疑似クラス。
  • TwinHelix IE PNG修正:.htc IE 6にアルファ不透明度のPNGサポートを追加するIE添付動作(ファイル)。追加の(含まれる)JavaScriptで完全なCSSバックグラウンドポジショニングとリピートをサポート(CSSスプライトを含む)。
  • Whatever:hover:.htc IE6、IE7、およびIE8の癖に自動的に:hover、:activeおよび:focusにパッチを適用し、他のブラウザーと同じように使用できるIE添付ビヘイビアー(ファイル)。AJAXサポートが含まれています。つまり、javascriptを介してドキュメントに挿入されるHTMLは、IEの:hover:activeおよび:focusスタイルもトリガーします。

興味深いことに、DD_belatedPNGはWhatever:hoverとTwinHelixのIE PNG Fixで解決された両方の問題を純粋なJavaScriptで解決し、Whatever:hoverとTwinHelixのIE PNG FixはJavaScriptとIEに添付された動作の組み合わせを使用します(.htc files)。

一般に、IE以外のブラウザを使用する人は、求められたときにそれらをアップグレードするため、IEは「しかし、一部のブラウザはこの機能をサポートしていません!」苦情。Modernizrは、IEだけでなく、表示される可能性のある任意のブラウザーにHTML5 / CSS3を使用する機能を追加します。ie-css3.jsは同じことを行います。IE条件付きコメントなしで実装するだけです(つまり、サーバー側のユーザーエージェントチェックに含めない限り、すべてのブラウザーがそれを取得することになります。これにより、パフォーマンスが大幅に低下します。 IEユーザーだけでなく、すべての訪問者向けです。)


申し訳ありませんが、HTML5のサポートをInternet Explorerに追加するものは、実際の目的ではまったくの悪夢です。

1
投稿を更新して情報を少し増やし、これらのJSライブラリを使用するとパフォーマンスが低下することを認めました。ただし、その使用は悪夢であることに同意しません。私はこれらのすべてを少なくとも一度使用しましたが、それらはすべて目的を果たします。彼らはまた、私に追加の頭痛を引き起こしていません。何が彼らを悪夢だと言うのですか?
ブライソン

OK、「完全な悪夢」は言い回しの強すぎる方法かもしれませんが、パフォーマンスがひどく低下して、ページが使用できなくなることがよくあります。

5

ニーズに最も適したテクノロジーを使用してください。

Eric Meyerが CSSルールでベンダー固有のプレフィックスを使用し始めるのが、以前のcssフィルターハックを使用するのと同じではない理由についての素晴らしい記事を書きまし

同じことがHTML5にも当てはまると思います。さまざまな機能のブラウザサポートを確認できる場合は、使用しないでください。サイトが正常に劣化する限り、それを維持します。


2

使用するCSS3機能を決定する際に役立つ他のいくつかのリンク:http : //caniuse.com/(どの要素とセレクターがどのプラットフォームで使用可能かを適切に分類します)

http://css3please.com/(CSS3を特徴と混乱に遊び場-ページ編集可能で、これはまた、技術と機能がサポートされているかについてのいくつかのアドバイスを与えることにより、一般的に要求されたスタイリングのためのプラットフォーム、角丸、グラデーションの背景のように、等。)


1

私はこれを使用して、最新のブラウザーでのエクスペリエンスを向上させ、優れたブラウザーを使用するユーザーが見栄えの良いUI(丸い角、影、そのようなもの)で「報酬」を得られるようにします。何らかのJSフォールバックを取得しない限り、現在のクライアント側のフォーム検証の代わりに使用しないでください。


1

古いブラウザでもサポートされるはずのHTML5を使用して新しいプロジェクトを開始する場合、最良のオプションはInitializrを使用することです-

http://www.initializr.com/

バックエンドでHTML5 Boilerplateを使用し、独自のいくつかのオプションを追加して、独自のサイトにデプロイできるテンプレートを提供します。Javascriptライブラリ(HTML ShivやModernizrなど)が含まれているため、サイトが古いブラウザーと互換性があります。


0

視聴者が何であり、どの機能を使用するかによって異なります。平均的なプロジェクトがie6のサポートを終了できるようになるまでにはさらに数年かかると予想しています:(


0

サイトがプライベートイントラネットであり、ブラウザーを制御するか、処理するブラウザーの範囲が限られている場合は、テクノロジーの最先端で自由に作業してください。

そうでない場合は、何を使用しても、常に最小公分母を考慮する必要があります。この場合、おそらくIE 6とさまざまなモバイルブラウザの組み合わせです。したがって、HTML 5を使用すると、サイトが適切に「劣化」することを確認するという追加の問題が発生します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.