简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 CSS3 の新しい WEB 標準とブラウザのサポート_html5 チュートリアルのスキル

HTML5 CSS3 の新しい WEB 標準とブラウザのサポート_html5 チュートリアルのスキル

WBOY
WBOYオリジナル
2016-05-16 15:51:271609ブラウズ

メモから来ているので、各エントリのタイトルと文法的特徴のみをリストします。当面は詳細な説明と実行可能な例を書く時間がありませんが、関連するドキュメントのアドレスもリストします。すでにこの機能をサポートしているブラウザーは、サポートされていないブラウザー用の代替/移行実装も提供します。そうですね、これは元々私が個人的にメモしたもので、私は Evernote にメモをとるのが特に好きです。前回 Lewu 先生の記事を見たときに、私は今の年齢がちょうど記憶力のピークに入ったばかりだと言いましたが、私自身。自信にはまだまだ力が要ります！たとえば、『ダークナイト』でピエロが病院で検察官に何を言ってトゥーフェイスになったのかについて他の人たちと議論しているとき、セリフを一行も思い出せなかったし、ペニーがエイジを演じたときのキャラクターの名前は何だったのか。ビッグバンセオリーS2のコナンの「女王ペネロペ」、見たときは感動しすぎて1ヶ月後にはオデッセイのことすら覚えてなかった。メモを残すといつも気持ちが楽になります…あ、また話が逸れてしまいました。

この記事では、最も重要な (または比較的人気のある) 新しい標準のいくつかをまとめました。それらのほとんどはまだ w3c の草案であり、推奨レベルの初期段階にありますが、新しい標準ラウンドでは非常に人気が高まっています。有名なブラウザ戦争では、開発者コミュニティに多数の関連デモや API パッケージが登場し、一部は実稼働環境に参入しています (iPhone 上の Google の Gmail オフライン アプリケーションなど)。メーカー独自のテクノロジーから、キラーアプリケーションを生み出すために委員会の標準を汎用テクノロジーに変換するサイクルが大幅に加速されているのは、Web アプリケーションの需要が高すぎるためでしょうか... 更新: 。先ほど Solidot にソフト記事を投稿したときにふと思いました。この問題をどのように表現するかを理解してください。実際、多くのブラウザ メーカーは、ステージを構築するエンジニアがブラウザのアクターでもあるのと同じように、ブラウザ ベースのアプリケーション開発者であり、Web 標準の設定者でもあります。 Google、Mozilla、Apple は、まだ W3C Working Draft 段階にあるにもかかわらず、Web アプリケーションの開発に役立つ技術標準を実装するために努力を惜しんでいません。計画経済には活力が欠けています XD...

メモから派生したものなので、各エントリのタイトルと文法的特徴のみをリストします。当面は詳細な説明と実行可能な例を書く時間がありませんが、関連するドキュメントのアドレスを記載します。この機能でサポートされているブラウザーのリストに加えて、この機能をサポートしていないブラウザーに対する代替/移行の実装も提供されます。

===================ナンセンスが終わる境界線====================== ==

CSS3 メディアクエリ

外部リンク CSS ファイル全体と CSS コードの一部のメディア タイプ検出。その高い人気の理由は明らかにモバイル デバイスにあります。

  1. <リンク メディア="すべて と (方向:縦)" src= "screen.css" type=" text/css">
  1. @media すべて および (最小色: 4) { ... }

w3c 標準: http://www.w3.org/TR/css3-mediaqueries/
MDC ドキュメント: https://developer.mozilla.org/En/CSS/Media_queries
Opera ドキュメント: http ://www.opera.com/docs/specs/css/

サポート: Firefox 3.5、Safari 3、Opera 7

CSS3 2D 変換

CSS変形、疑似3D効果や回転効果を実現するためにこのjqueryプラグインを使用する人もいます

  1. -moz-transform: 回転(-45度) 傾斜(15度, 15度);
  1. スプライト.スタイル['-webkit-transform'] = 'rotate(' v 'rad)';

w3c 標準: http://www.w3.org/TR/css3-2d-transforms/
MDC ドキュメント: https://developer.mozilla.org/En/CSS/CSS_transform_functions
Webkit ブログはじめに: http://webkit.org/blog/130/css-transforms/

サポート: Firefox 3.5、Safari 3.1
代替/移行: IE5.5 マトリックス フィルター http://msdn.microsoft.com/en-us/library/ms533014(VS) .85).aspx

CSS3 トランジションと CSS アニメーション

Webkit チームによって提案されたドラフトである待望の CSS アニメーションでは、トランジションは単純な属性グラデーションを実装し、アニメーションはより複雑なアニメーション効果を定義します

  1. 遷移プロパティ: 幅;
  2. 移行期間: 1s;
  4. アニメーション名: '斜めスライド';
  5. アニメーション期間: 5s;
  6. アニメーション反復数: 10;
  7. @keyframes '斜めスライド' {}

w3c 標準: http://www.w3.org/TR/css3-transitions/
w3c 標準: http://www.w3.org/TR/css3-animations/
Webkit ブログ はじめに: http://webkit.org/blog/138/css-animation/
クラスメートのジョンからの紹介: http://ejohn.org/blog/css-animations-and-javascript/

サポート: Safari 3.1

CSS3 ダウンロード可能なフォント

Web ページに任意のフォントを埋め込むことができるのはデザイナーの夢です...しかし、ここでサポートされているのは TrueType と OpenType だけです

  1. @font-顔 {}

w3c 標準: http://www.w3.org/TR/css3-fonts/#font-resources
MSDN ドキュメント: http://msdn.microsoft.com/en-us/library/ms530303( VS.85).aspx
MDC ドキュメント: https://developer.mozilla.org/en/CSS/@font-face

サポート: Firefox 3.5、Safari 3.1、Opera 10.0、IE4.0

ボーナス: 他の CSS3 プロパティとの互換性

ppk の学生が管理するドキュメント: http://www.quirksmode.org/css/contents.html
css3.info が管理するドキュメント: http://www.css3.info/modules/selector-compat/
テストページ: http://westciv.com/iphonetests/

HTML5 DOM ストレージ

キーと値のペアの形式の単純な永続ストレージ

  1. window.localStorage
  2. window.sessionStorage //クロスドメイン可能、タブを閉じるとクリア

w3c 標準: http://www.w3.org/TR/webstorage/
ppk クラスメートによって維持される互換性リスト: http://www.quirksmode.org/dom/html5.html#localstorage
MDC ドキュメント: https://developer.mozilla.org/en/DOM/Storage
MSDN ドキュメント: http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

サポート: Firefox 3.5、Safari 4.0、IE 8.0

HTML5 オフライン アプリケーション キャッシュ

構造化データではなく、マニフェスト ファイルを使用して、オフラインで使用できる静的リソース (画像、CSS、JS など) をキャッシュします

  1. <html マニフェスト="ふー。マニフェスト">
  1. キャッシュマニフェスト
  2. index.html
  3. style/default.css
  4. images/logo.png

w3c 標準: http://www.w3.org/TR/offline-webapps/#offline
MDC ドキュメント: https://developer.mozilla.org/en/Offline_resources_in_Firefox

サポート: Firefox 3.5

HTML5 データベース ストレージ

SQL をサポートするローカル データベースは、Google Gears によって最初に実装されました。現在の w3c ドラフトの編集者も Google エンジニアです...しかし、奇妙なことに、Gears API は現在のドラフトと互換​​性を持たないことさえ望んでいます。バンドルされている Gears は、データベース API が Webkit で実装された HTML5 API を削除しました...そして、Google が iPhone に Gmail オフライン機能を実装したとき、Webkit API も使用していました... それは本当に混乱しています...

  1. var db = window.openDatabase("メモ", "", "メモ アプリの例!", 1048576) ;
  2. db.トランザクション(関数(tx) {
  3. tx.executeSql('SELECT * FROM メモ'、[]、関数(tx, rs) {});
  4. });

w3c 標準: http://www.w3.org/TR/offline-webapps/#sql
Webkit ブログの紹介: http://webkit.org/blog/126/webkit-does-html5- client-side-database-storage/
iPhone ドキュメント: http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3 - SW1

サポート: Safari 3.1
代替/移行: Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web ワーカー

複数のスレッド、バックグラウンドで複雑な操作を実行、DOM を操作できない、メッセージ イベントを通じてスレッド間で通信

  1. var myWorker = 新しい ワーカー ('my_worker.js');
  2. myWorker.onmessage = function(event) { イベント.データ };
  3. myWorker.postMessage(str);

w3c 標準: http://www.w3.org/TR/workers/
MDC ドキュメント: https://developer.mozilla.org/En/Using_web_workers

サポート: Firefox 3.5
代替/移行: Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 地理位置情報

地理 API

  1. ウィンドウ.ナビゲーター.地理位置情報

w3c 標準: http://www.w3.org/TR/geolocation-API/
MDC ドキュメント: https://developer.mozilla.org/En/Using_geolocation

サポート: Firefox 3.5
代替/移行: Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 ドラッグ アンド ドロップ

ネイティブドラッグイベント

  1. ondragstart
  2. オンドラッグ
  3. オンドラジェンド
  4. //ドラッグ処理中
  5. オンドラジェンター
  6. オンドラオーバー
  7. オンドラグリーブ
  8. オンドロップ

w3c 標準: http://www.w3.org/TR/html5/editing.html#dnd
MDC ドキュメント: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
appleドキュメント: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

サポート: Firefox 3.5、Safari 2.0、Chrome 1.0、IE 5.0

HTML5 オーディオとビデオ

HTML タグを使用してビデオとオーディオを埋め込む利点は、「オープンソース形式」ではなく、マルチメディアが他のページ要素と対話したり、ページテクノロジーを使用してビデオと「マッシュアップ」したりできる「オープン性」です。ランダムな組み合わせの一種 RIA と対話できる機能は、Web テクノロジーの繁栄の基礎ですが、フラッシュのようなクローズド RIA コンテナーの最大の欠点でもあります。

  1. <ビデオ コントロール>
  2. <ソース src="ゾンビ。 ogg” type=”ビデオ/ogg ”/>
  3. <ソース src="ゾンビ。 mp4″ type=”video/mp4 ″/>
  4. ビデオ>

MDC ドキュメント: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
Webkit ブログの紹介: http://webkit.org/blog/140/html5-media-support/

サポート: Firefox 3.5、Safari 3.0、Chrome 3.0
代替/移行: video タグを使用したネストされた埋め込み http://hacks.mozilla.org/2009/06/html5 - video-fallbacks-markup/

HTML5 キャンバス

Apple によって発明され、現在主流の js 画像技術であるダッシュボードで最初に使用され、mozilla はすでに OpenGL ES 標準の Canvas 3D を実装しています。さらに、IE チームは Canvas をサポートするために多くの作業を行っていると言われています。実際、キャンバス API は非常に低レベルであり、特にインタラクションの点では svg ほど直感的ではないため、それをカプセル化するライブラリが多数あります。

  1. var ctx = $('#canvas ')[0].getContext( "2d");
  2. ctx.fillStyle = "#00A308" ;
  3. ctx.beginPath();
  4. ctx.arc(220, 220、50、0、数学.PI*2, true);
  5. ctx.closePath();
  6. ctx.fill();
MDC ドキュメント: https://developer.mozilla.org/en/Canvas_tutorial

サポート: Firefox 1.5、Safari 2.0、Chrome 1.0、Opera 9.0
代替/移行: excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c 標準: http://www.w3.org/TR/SVG12/

IBM DW チュートリアル: http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id =84896

サポート: Firefox 1.5、Safari 3.0、Chrome 1.0、Opera 9.0
代替/移行: raphael.js http://raphaeljs.com/

XMLHttpRequest 2

主にリクエストプロセス中のクロスドメイン機能とイベントを増やすため

w3c 標準: http://www.w3.org/TR/XMLHttpRequest2/

MDC ドキュメント: https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN ドキュメント: http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

サポート: Firefox 3.5 (部分的に実装)、IE 8.0 (部分的に実装)

アクセス制御

待望のクロスドメイン アクセス制御。現時点では、Firefox 3.5 と IE8 の間にいくつかの違いがあります。IE8 によって開発された XDR と XDM が標準化のために w3c に提出される準備ができているかどうかはわかりません。 🎜>

アクセス制御許可オリジン: http://foo.example

    2. w3c 標準: http://www.w3.org/TR/cors/
    MDC ドキュメント: https://developer.mozilla.org/En/HTTP_Access_Control
    クロスドキュメント メッセージング (XDM)
    MSDN ドキュメント: http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

    サポート: Firefox 3.5、IE8.0

    E4X (ECMA-357)

    Firefox と ActionScript3 はすでに何かを実装しています...しかし実際には、JSON がこれほど普及している今、E4X の有無は関係ないようです ~ (ナンセンス、実際には次のように書くと便利です) HTML 文字列の代わりに js コードで直接 dom オブジェクトを作成) たくさん)

    MDC ドキュメント: https://developer.mozilla.org/en/E4X

    サポート: Firefox 1.5

    ECMAScript 5 ネイティブ JSON

    ネイティブ JSON サポートは eval より 100 倍高速で安全です。また、Douglas Crockford の json2.js は js で実装された js インタープリターであるため、より安全であることにも注意してください。

    1. JSON.parse( text, 翻訳 )
    2. JSON.stringify( obj, 翻訳 )
    3. 文字列.プロトタイプ.toJSON
    4. ブール.プロトタイプ.toJSON
    5. 番号.プロトタイプ.toJSON
    6. 日付.プロトタイプ.toJSON

    MDC ドキュメント: http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
    MSDN ドキュメント: http://blogs.msdn.com/ ie/archive/2008/09/10/native-json-in-ie8.aspx

    サポート: Firefox 3.5、IE8
    代替/移行: json2.js http://www.json.org/json2.js

    ECMAScript 5 配列の追加機能

    js1.6で実装されている配列メソッドは主に、関数型プログラミングにおいて非常に重要なメソッドであるforEach、map、filterと、リバースクエリです

    1. 配列.プロトタイプ.indexOf( str )
    2. 配列.プロトタイプ.lastIndexOf( str )
    3. 配列.プロトタイプ.すべて( fn )
    4. 配列.プロトタイプ.いくつかの( fn )
    5. 配列.プロトタイプ.フィルター( fn )
    6. 配列.プロトタイプ.forEach( fn )
    7. 配列.プロトタイプ.マップ( fn )

    MDC ドキュメント: https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

    サポート: Firefox2.0、Safari 3.0、Google Chrome 1.0、Opera 9.5
    代替/移行: Array.prototype を拡張することですべてシミュレート可能

    ECMAScript 5 isArray()

    配列とオブジェクトを区別する

    1. Array.isArray([])// true;
    サポート: なし

    代替/遷移: Array.isArray = function(a){ return Object.prototype.toString.call(a) === "[オブジェクト配列] ”;};


    ECMAScript 5 オブジェクト

    GOOGLE I/O レクチャーの言葉: より堅牢なオブジェクト システム



      オブジェクト
    1. .getPrototypeOf( obj )

      2. クラスメイトのジョンの説明: http://ejohn.org/blog/objectgetprototypeof/

      サポート: Firefox3.5
      代替/移行: object.__proto__ または object.constructor.prototype

      1. オブジェクト.create( プロト, props ) //オブジェクトの複製または継承
      3. オブジェクト.キー( obj ) //データ構造のマッピング
      4. オブジェクト.getOwnPropertyNames( obj )
      6. オブジェクト.preventExtensions( obj ) //新しい属性を追加できません
      7. オブジェクト.isExtensible( obj )
      9. オブジェクト.シール( obj ) //属性の構成は削除および変更できません。また、新しい属性を追加することもできません
      10. オブジェクト.isSealed( obj )
      12. オブジェクト.フリーズ( obj ) //属性の構成を削除または変更することはできません。新しい属性を追加することも、属性を書き込むこともできません
      13. オブジェクト.は凍結( obj )

      クラスメイトのジョンの説明: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

      サポート: なし
      置換/移行: Object.create と Object.keys は自分で実装できます

      ECMAScript 5 プロパティ記述子

      オブジェクトプロパティのアクセス制御

      1. オブジェクト.getOwnPropertyDescriptor( obj, プロップ )
      2. オブジェクト.defineProperty( obj, prop、desc )
      3. オブジェクト.defineProperties( obj, 小道具 )
      4. 記述 = {
      5. 値: true、
      6. 書き込み可能: false, //変更
      7. 列挙可能: true, //for in
      8. 構成可能: true, //属性の削除と変更
      9. get: function(){ return 名前}、 ;
      10. set: 関数(値){ 名前 = 値; }

        11. クラスメイトのジョンの説明: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

        サポート: なし
        置換/遷移: Object.defineProperties は実際には jQuery.extend と同等であり、Mixin の実装に使用されます

        ECMAScript 5 のゲッターとセッター

        Python と Ruby の両方の属性アクセス メソッド

        1. obj = {
        2. get innerHTML() { return …; ,
        3. set innerHTML(newHTML) { … }
          4. }
        4. ;
        MDC ドキュメント: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

        サポート: Firefox 2.0、Safari 3.0、Google Chrome 1.0、Opera 9.5

        代替/移行:
        Firefox 1.5 の非標準の古いメソッド

          HTMLElement
        1. .プロトタイプ.__defineGetter__("innerHTML", 関数 () {});
          2. HTMLElement
        2. .プロトタイプ.__defineSetter__("innerHTML", 関数 (val ) {});
        サポート: Firefox 2.0、Safari 3.0、Google Chrome 1.0、Opera 9.5

        標準

          オブジェクト
        1. .defineProperty(ドキュメント.ボディ、"innerHTML"、{ get : 関数 () {} });

          2. Dokumentasi MSDN: http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

          Sokongan: IE8 (hanya boleh digunakan dengan DOM)

          Mod Tegas ECMAScript 5

          Mod ketat ES5 memadamkan elemen yang mungkin menyebabkan masalah dalam versi lama dan akan melaporkan ralat secara jelas untuk memudahkan penyahpepijatan

          1. "gunakan ketat"; //Pengecualian yang dilemparkan dalam keadaan berikut
          2. //Tetapkan nilai kepada pembolehubah tidak ditentukan
          3. //Operasi ditetapkan kepada sifat tidak boleh ditulis, tidak boleh dikonfigurasikan atau tidak boleh dikembangkan
          4. //Padam pembolehubah, fungsi, parameter
          5. //Tentukan atribut berulang kali dalam literal objek
          6. //eval digunakan sebagai kata kunci dan pembolehubah ditakrifkan dalam rentetan eval
          7. //Timpa hujah
          8. //Gunakan arguments.caller dan arguments.callee (fungsi tanpa nama mesti dinamakan untuk merujuk sendiri)
          9. //(function(){ ... }).panggilan( null ); // Pengecualian
          10. //Gunakan dengan

          Penjelasan rakan sekelas John: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

          Sokongan: Tiada
          Alternatif/Peralihan: ... Mula membangunkan tabiat pengaturcaraan yang serius dari sekarang

          Ciri baharu lain ECMAScript 5

          Apabila menghantar rujukan kepada fungsi, ikat ini

          1. Fungsi.prototaip.mengikat(iniArg, arg1, arg2....) /

          Sokongan: Tiada
          Alternatif/Peralihan: prototaip http://www.prototypejs.org/api/function/bind

          Tarikh berformat ISO

          1. Tarikh.prototaip.kepadaISOString() // Cetakan 21-05-2009T16:06:05.000TZ

          Disokong: Tiada
          Alternatif/Peralihan: datejs http://code.google.com/p/datejs/

          1. String.prototaip.trim()

          Sokongan: Firefox3.5
          Alternatif/Peralihan: Pelbagai pelaksanaan biasa http://blog.stevenlevithan.com/archives/faster-trim-javascript


          ================================ Garis pemisah di mana perkara karut bermula semula ==== = =====

          Sebenarnya perkara ini saya siarkan dengan harapan dapat mempromosikan suasana inovasi dan menyedarkan lebih ramai orang bahawa banyak teknologi baru telah memasuki peringkat "praktikal".

          Jika anda hanya mahu membuat permainan web percubaan, atau aplikasi yang hanya boleh digunakan pada platform tertentu (seperti iPhone, greasemonkey), sokongan firefox3.5 webkit sudah memadai.

          Jika anda tidak boleh mengabaikan platform arus perdana, terdapat banyak teknologi yang membolehkan anda merendahkan atau memilih kaedah yang berbeza untuk melaksanakan antara muka yang serasi.

          Jika anda tidak sabar menunggu IE , sebagai contoh, warisan dan kawalan akses objek ES5 telah ditukar daripada kata kunci lama dalam tempoh ES4/ActionScript3 (kelas melanjutkan statik peribadi) kepada Object.create(p , attrs).defineProperty(o, n, attrs).defineProperties( o, attrs).freeze().getOwnPropertyNames().map(fn), ia bukan sahaja untuk kesejukan...

          Ramai orang suka merungut "Saya tidak pernah berpeluang menggunakan HTML5 dalam hidup saya", tetapi selagi anda mengalihkan pandangan dari tapak tangan besar di bawah kaki anda dan melihat ke tempat lain, anda akan mendapati bahawa dunia sebenarnya sedang berubah sepanjang masa XD

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 マイクロフォーマットと関連する属性名_html5 チュートリアルのヒント次の記事：HTML5 マイクロフォーマットと関連する属性名_html5 チュートリアルのヒント

関連記事

続きを見る