HTML5 / CSS3の新機能は何ですか?


回答:


33

HTML5は巨大ですが、素晴らしいです。

私の見解では、それは主に相互運用性に関するものです。仕様では、すべてのブラウザが同じ方法でマークアップを読み取るようにするために、エッジケースも指定しています。

2番目に、HTML5にはビデオとオーディオがあり、名前のとおりの動作をします。ビデオまたはオーディオを含める場合、HTML5はプラグインの必要性を減らす必要があります。

3番目に、HTML5には多くのアクセシビリティとセマンティックヘルプが含まれています。たとえば、のような要素は<section><article>マシンがコンテンツの内容を理解するのに役立ちます。のような新しい入力タイプ<input type=email>も同じ理由で役立ちますが、新しい入力タイプには、「一般的な」人間の読者にも役立つカスタムUIが含まれています。

新しいフォーム機能は、新しい入力タイプよりもはるかに多いことに注意してください。また、プレースホルダーテキストおよび他のいくつかの属性のサポートも含まれています。

HTML5にはが含まれており<canvas>、2D(およびWebGLでは3D)のような図形を描画したり、ゲームをレンダリングしたりできます。

Internet Explorerの古代のような古い動作が標準化されましたcontentEditable

DOCTYPEは最終的にまともです!これで実際に記憶できます!<!DOCTYPE html>

エンコーディングの指定も簡単<meta charset=utf-8>です。

データをクライアントに送信して要素に関連付ける場合、カスタム属性を使用してデータを送信できるようになりました。たとえば、<div data-status=open>Open</div>ようやく許可されました。カスタム属性名には接頭辞が必要であることに注意してくださいdata-

HTMLドキュメントにSVGとMathMLを含めることができるようになりました。以前は、XHTMLドキュメントでしかできませんでした。

HTML5が定義する複数の新しい関数とフィールドの中で、最も印象的なものの1つはclassListです。これにより、クラス属性をより簡単に操作できます。getAttribute / setAttributeを取得し、複雑なハックを使用して要素がどのクラスを持っているかを特定し、その要素から特定のクラスを削除する代わりに、classListはそれらの困難な状況を非常に単純にします。

Web Workers、Web Sockets、IndexedDBなど、複数の関連する仕様もありますが、これらは実際にはHTML5の一部ではありませんが、誰もがそれらのように語っています。マルチコアコンピューターの活用、サーバーとの通信、データのローカル保存に非常に便利です。

CSS3に関しては、アニメーショントランジション丸い境界線、および柔軟なボックスモデルのサポートが含まれています

また、CSS3で新しく追加された新しいセレクターにより、ページ上の特定の要素(テーブル内の奇数行または偶数行など)を簡単に一致させることができます。

不透明度、新しいユニット、マーキー、およびルビーもCSS3の一部です。

私はほとんどすべての重要な部分をカバーしていると思います。


1
優れたランダウン。
ジョージエジソン

すべての主要なポイントを打つための良い仕事。
グラントペイリン

1
HTML5は現在ワーキングドラフトに過ぎず、まだ完全には完成していないことに言及する価値があります。
ジャンゴラインハルト

1
@Django Reinhardt WHATWGが言うように、すべてのHTML5機能が同じ段階にあるわけではありません。すでに広く実装されているものもあれば、さらに時間がかかるものもあります。実装はWebサイトを開発する際に本当に重要なことであり、仕様の状態はそのための適切な測定値ではありません。WHATWG FAQもご覧ください。
ルイスキューバル

1
彼らは有効なXHTML属性に引用符を必要としなかったのですか?
ロータスノーツ

18

機能と仕様のサポートを追跡するには、いつ使用できますかを確認してください。HTML5とCSS3の機能と、SVG、PNG、CSS2.1、CSS2などが含まれています。また、承認の状態(推奨、推奨推奨、候補推奨、作業ドラフト、IETF標準)を追跡します。FindMeByIPは、ブラウザーごとに、サポートされているCSS3機能のマトリックスのみを保持します。

いくつかの構文の再調整と単純化が、ナットとボルトで行われました。

  • 簡略化されたdoctype文字列: <!DOCTYPE html>
  • 簡体字languageの属性<html>タグ:<html lang="en">
    (まだ含めることができますxmlnsし、xml:langあなたがXML準拠をしたい場合)
  • 専用<meta>タグcharset<meta charset="utf-8" />
  • scripttype属性を受け入れなくなりcharset、リモートスクリプトが必要になります
    <script src="/media/js/jquery.js" charset="utf-8"></script>(インラインスクリプトには追加の属性はまったく必要ありません)

HTML5を使用すると、マークアップのセマンティクスが大幅に向上し、全体として読み取り/書き込みがはるかに容易になり、ファイルサイズが小さくなります。持っている代わりに、持っ<div id="nav">ているだけ<nav>です。大したことではないように見えますが、合計されます。

XHTML1およびHTML4の多くの要素は廃止されました。次の要素は、HTML5ではサポートされていません:<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><s><strike><tt><u><xmp>

HTML5のいくつかの新しい要素は、セマンティックマークアップを追加することのみを目的としており、のより意味のある代替を提供する以外は何も行いません<div>。これらの新しい要素が含まれます:<article><section><aside><hgroup><header><footer><nav><time><mark><figure>、と<figcaption>

HTML5フォームが大幅に改善されました。

新しい入力タイプ

新しい属性:

新しい要素

終日フォームに入れることもできますが、ここでは、このすべての新しい機能をより適切に説明するためのリソースを紹介します。

CSS3は素晴らしいメディアクエリをもたらします。メディアクエリは、そう、そう、ですので素晴らしいです。IE8以前では使用できませんが、IE9でサポートされます。

CSS3には、増加するカウンターがあります。これらを使用して、順序付きリストまたは番号付けが意味的に正しくない場合に、:before疑似セレクターとcontentスタイルを使用して、順序付きリストなしで要素に自動番号を付けることができます。(たとえば、フォームフィールドに入力する手順に番号を付けます。)

CSSリセットのファンなら、HTML5 DoctorからHTML5 CSSリセットを入手できます。個人用ページのこのリセットに3つの追加を行いました。

  • text-rendering: optimizeLegibility; の定義のスタイルに追加されました <body>
  • labelの定義に含まれてinputおりselect、必要なためvertical-align: middle;
  • スタイルins:focusからエリック・メイヤーのCSSリセットはに戻って追加します

reset5と呼ばれる競合するリセットが利用可能ですが、私はまだ個人的に評価していません。Eric MeyerとHTML5 Doctorの両方のリセットに基づいています。

HTML5のセキュリティ早見は、 HTML5はさまざまなブラウザに実装されていますし、また、同様の追跡に優れている既存の機能にバグが含まれてのバグを追跡します。

ただし、HTML5要素を使用しても、コードのセマンティックが自動的に作成されるわけではありません。WHATWGは<section>と呼ばれる記事を書きましたが、これは単なる「セマンティック<div>」ではなく、単なるコンテナ要素ではないことを説明しています。

HTML 5には、ドキュメントのアウトラインビューを構築するためのアルゴリズムがあります。これは、たとえばATによって、ユーザーがドキュメントをナビゲートするのを支援するために使用できます。そして、<section>とその仲間はこのアルゴリズムの重要な部分です。<section>をネストするたびに、アウトラインの深さを1ずつ増やします(このモデルの利点が従来の<h1>-<h6>モデルと比較してどうなるか疑問に思う場合は、Webベースのフィードリーダーを検討してくださいシンジケートされたコンテンツのドキュメント構造を周囲のサイトのドキュメント構造と統合します。HTML4では、すべてのコンテンツを解析し、すべての見出しに番号を付け直します。HTML5では、見出しは適切な深さで無料です。

...

ページ上のすべての<div>を盲目的に<sections>に変換するだけの場合、ページに期待したアウトラインが表示されることはほとんどありません。そして、セマンティックな偽物であることは別として、これはナビゲーションのために見出しに依存している人々の地獄を混乱させます。

この世界の他のすべてのものと同様に、SproutCoreと呼ばれるHTML5 Webアプリケーション用のフレームワークがあり、Charles Jolleyという名前の元Appleエンジニアによって構築されました。

html5rocks.comに加えて、html5doctor.comおよびhtml5gallery.comついていくことができます。


+1いい答えです!どこかのコードセクションの終わりを逃している可能性があると思います。
ジェイソンバーチ

+1ブラウザの互換性テーブルへのリンクをありがとう!FindMeByIPは特にきちんとしていました。また、SproutCoreに加えて、ExtJSのは、ちょうど煎茶としてリニューアルし、彼らは、HTML 5の後ろに自分の体重を投げているようだ
シャーピー

4

境界線の半径、影(ボックス/テキスト)、rgbaサポートなどの基本的なレイアウトがあります。これがCSS3の最も有名なものです。より興味深いのは、キャンバスタグ、ビデオタグ、ローカルストレージ、Webソケットなどであり、プレーンHTML / JS / CSSでより豊かなユーザーエクスペリエンスを作成します。これらの機能は、追加のプラグインを必要とせずに、Web上のFlashの優れた代替手段になる可能性があります。


4

新しいHTML要素はかなりおもしろいと思います。そのうちのいくつかは、generic divの有望なセマンティック置換です。有望な新しい要素が含まれarticlesectionasidefigurenavheader、およびfooter、他の中。意味のないコンテナをセマンティック要素に置き換えるというアイデアが本当に好きです。

そうそう、関連アイテム:かなり単純化されたdoctype-最後に、メモリから入力できるもの!


4

これはwebapps.stackexchange.comでの同様の質問に対する私の答えです

キャンバスウェブワーカースレッドは、私にはHTML5の最もエキサイティングな側面です。これらの機能を利用するいくつかのWebアプリを作成しました。

GioAUTHor [sic]はキャンバスを広範囲に使用して、マップ上にパスをプロットし、開始から終了までの最短ルートを(JavaScriptのダイクストラのアルゴリズムを使用して)見つけられるようにします。

JavaScriptスレッドデモはキャンバスの使用を制限しますが、デモコードを備えたワーカースレッドの使用を示します。また、HTML5 入力type = "range"スライダーコントロールも使用します。


HTML5ブラウザのサポートは、ブラウザ自体と同じくらい多様です。あります素敵なサイトについて(HTML5、natch中)HTML5準備ショー何のために準備ができていることは。


以前HTML5 Readinessサイトを見たことがありますが、どこにいるか覚えていません-リンクをありがとう!本当にすてきな、サイトが提供する二重の目的。
グラントペイリン


1

オーディオおよびビデオタグを使用すると、FlashやSilverlightなどのプラグインを必要とせずにメディアを表示でき、最も重要なことはiPhoneおよびiPadブラウザーで動作します。コーデックとデジタル著作権管理に関して解決する必要があるいくつかの問題があります。


1

Jeremy Kiethが、トピック「HTML5 for Web Designers」に関する非常に良い本をリリースしました。あなたはそれをチェックアウトしたいかもしれません。

A Book Apartからの最初の本です。中級から上級のデザイナーに強くお勧めします。A ++

http://books.alistapart.com/

:ハードコピーを取得するまで待つ必要がある場合があります


1

これは重要性についての意見を示すものではありませんが、HTML 4と5の間の有用なデルタです。

主な改善点に関する私の2¢:

  • <section>そして、新たなヘッダは、アルゴリズムを概説(私はそれだけだったと言った私の 2¢)
  • 新しいフォーム要素、例えば <input type=email>
  • data-* 属性
  • クライアント側のストレージ
  • ネイティブ<audio><video>

0

誰もまだこれを入れていないからです:

HTML5は、誰もがリストしたものに最適ですが、標準の位置情報、Webワーカー、Webソケット、キャンバス、およびlocalStorageも含まれています。これらのツールはすべてHTML5仕様の一部であり、背後で多くのJavaScriptを使用して実現しています。

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