ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML 5 の機能を検出するにはどうすればよいですか? _html/css_WEB-ITnose

HTML 5 の機能を検出するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:55:01
オリジナル
1087 人が閲覧しました

元の翻訳アドレス: http://www.ido321.com/1116.html


翻訳: HTML5 機能検出

翻訳者: dwqs

HTML 5 の人気により、HTML 5 は現在主要市場を占めています共有、HTML 5 には、Web エクスペリエンスを向上させる多くの新機能が追加されています。ほとんどの機能は最新の主流ブラウザーでサポートされているため、これらの新機能を安全に使用して Web エクスペリエンスを向上させることができます。ただし、ブラウザの新しいバージョンがリリースされた場合、古いバージョンまたは古いブラウザの一部を忘れてはなりません。

現在、ユーザーは新機能をサポートするために古いバージョンのブラウザを使用したいと考えているということも事実です。したがって、作成される製品はクロスブラウザーである必要があり、私たちができる唯一のことは、コードを実行する前に、指定された機能がブラウザーでサポートされていることを確認する HTML5 機能検出です。

Modernizr は、HTML 5 と CSS 3 の機能検出を完了できる非常に優れた JS ライブラリです。デフォルトでは、modernizr はすべての機能を検出します (もちろんカスタマイズ可能) が、JS ライブラリ全体をインポートせずに特定の機能のみを検出したい場合は、コードを適切な場所に配置する必要があります。この記事では、ネイティブ js と modernizr を使用して HTML 5 の機能を検出する方法を説明します。

キャンバス

rree

Video

rree

ローカルストレージ

rree

Web ワーカー

// JSreturn !!document.createElement('canvas').getContext;   // Modernizrif (Modernizr.canvas) {}
ログイン後にコピー

オフライン Web アプリケーション

// JSreturn !!document.createElement('video').canPlayType;   // Modernizrif (Modernizr.video) {     }
ログイン後にコピー

地理位置情報

// JSreturn 'localStorage' in window && window['localStorage'] !== null;   // Modernizrif (Modernizr.localstorage) {     }
ログイン後にコピー

プレースホルダーテキスト

// JSreturn !!window.Worker;   // Modernizrif (Modernizr.webworkers) {     }
ログイン後にコピー

Form Autofocus

// JSreturn !!window.applicationCache;   // Modernizrif (Modernizr.applicationcache) {     }
ログイン後にコピー

Microdata

// JSreturn 'geolocation' in navigator;   // Modernizrif (Modernizr.geolocation) {     }
ログイン後にコピー

History API (導入については、 Poke: http://www.ido321.com/1069.html この記事は Bole Online によって転載されました: http://blog.jobbole.com/78876/)

// JSvar i = document.createElement('input');return 'placeholder' in i;   // Modernizrif (Modernizr.input.placeholder) {     }
ログイン後にコピー

これまでのところ、これは私が特徴検出用のコードリストを収集しました。リストで共有したい機能検出コードがある場合は、私に知らせることもできます。

---------------------------------------------- --- --------------------------------------------------- --- --------------------------------------------------- --- ------------------------

これは、Web 開発、モバイル開発、Java およびその他のプログラミング言語、包括的な情報、SEO およびその他の有名ブログ、ブログコレクションアドレス: http://www.ido321.com/daohang/

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート