プログレッシブ・エンハンスメントとダウングレードの良いプログラマシェアCSS3のWebフロントエンドの学習ルート

  良いプログラマのWeb 学習共有するためのフロントエンドルートプログレッシブ・エンハンスメントとダウングレードのCSS3をプログレッシブ・エンハンスメントおよびこれら二つの概念をダウングレードは、 CSS3の火災アップの出現後。低レベルのブラウザはCSS3をサポートしていませんので、あまりにも良いが、あきらめて耐えることができなかったので、先進的なブラウザでCSS3を使用すると、下のブラウザでCSS3の効果が唯一の最も基本的な機能を保証します。両方の目的は、異なるブラウザで異なる経験を懸念しているが、彼らは、ワークフローの違いが生じ、異なる焦点を持っています。

  プログレッシブ・エンハンスメント(プログレッシブ・エンハンスメント):最初は、ブラウザページの低いバージョンのために構築することが、基本的な機能を実行し、高度なブラウザのための対話の後、効果、より良い経験を達成するための機能を追加します。

  優雅な劣化(グレースフルデグラデーション):完全に機能するサイトを構築するために起動し、ブラウザのテストおよび修理のため。それが適切にブラウザの下のバージョンで見ることができるようにたとえば、アプリケーションを構築するのCSS3プロパティを使用して、スタートは徐々に主要なブラウザのためのハック。

  従来のソフトウェア開発では、多くの場合、上位互換と下位互換性の概念を言及しました。プログレッシブ・エンハンスメントは、上位互換性と同等であるが、正常等価後方互換性を劣化させます。下向きの互換性が高いバージョンをサポートするバージョンが低いバージョンまたはそれ以前のバージョン、上位互換数と互換性のある開発後期開発をサポートすることを意味します。ほとんどのソフトウェアは、下位互換性があり、例えば、 OFFICE2010が構築するために、ワード文書などをOffice2007、Office2006、Office2005、Office2003などを開くことができますが、Office2003などをOffice2007、OFFICE2010と構築された他のワードファイルを使用して開くことができません!

  両者の差:

  優雅な劣化やプログレッシブ・エンハンスメントは、物事の同じ種類の2つの図を見てください。プログレッシブ・エンハンスメントと縮退内部異なるブラウザと異なるデバイスに同じサイトでのパフォーマンスのレベルを懸念しています。主な違いは、この作業プロセスの影響を懸念する方法どことで、それぞれの焦点です。

  ウェブサイトを設計するために、それらの最も先進的な、最も完全なブラウザを対象としなければならない優雅な劣化アイデア。そして、それらは考慮されている「時代遅れ」や、開発サイクルの最終段階では、ブラウザの機能の喪失にテストのための計画を持って、テストオブジェクトは、以前のバージョンの(などIE、Mozillaの、など)の主要なブラウザに限定されています。この設計例では、古いブラウザでは唯一の「シンプルですが、とにかく(貧しいが、まずまずの)」ブラウジング体験を提供することが考えられます。あなたは、特定のブラウザに対応するためにいくつかの小さな調整を行うことができます。彼らは私たちの関心の焦点ではないので、ほかに大きな誤差を修復するので、しかし、他の違いは、単に無視されます。

  プログレッシブ・エンハンスメント・ビューは、フォーカスがコンテンツ自体にあるべきであるということです。違いに注意してください。私もできません名前に「ブラウザ」は言及しませんでした。弊社のウェブサイトのコンテンツは、インセンティブの確立です。いくつかのサイトがそれを示して、いくつかは、いくつかのシーク、いくつかの操作だけでなく、サイトでも上記のすべてが含まれている、それを収集し、同じポイントは、彼らがすべてのコンテンツに関連しているということです。これは、プログレッシブ・エンハンスメントは、より合理的な設計パラダイムとなってます。それはすぐに採択され、その「階層ブラウザのサポート(段階的なブラウザのサポート)」理由方針ヤフーを構築するために使用された理由はここにあります!

  ケーススタディ:

(1)コード

{.transition / * *書かれたプログレッシブ・エンハンスメント /

      -webkit-遷移:全.5s。

      遷移-moz:全.5s。

      遷移-o:すべて.5s。

         トランジション:すべての.5s。

}

{.transition / *書き込ま縮退* /

          トランジション:すべての.5s。

       遷移-o:すべて.5s。

     遷移-moz:全.5s。

  -webkit-遷移:全.5s。

}

 

   2)接頭辞CSS3(-webkit- / -moz- / -O- * ) とブラウザでの通常の状況CSS3のサポートをそれがこれです:

  前に長い時間:ブラウザのプレフィックス CSS3とCSS3正常にサポートしていません。

  少し前に:ブラウザのみ接頭辞をサポート CSS3を、通常のCSS3をサポートしていません。

  今:ブラウザは、両方のプレフィックスをサポート CSS3を、通常のCSS3をサポートしています。

  未来:ブラウザがプレフィックスサポートしていないだけで、通常のCSS3サポートCSS3を、。

   3)プログレッシブ・エンハンスメント言葉遣い、古いブラウザの可用性を優先し、最終的に新しいバージョンの可用性を考えます。接頭3とCSS3 CSS3正常期間の場合に利用可能である、通常のCSS3のCSS3は、プレフィックスを上書きします。優雅な劣化文言は、ブラウザの新しいバージョンの可用性を優先し、最終的に古いバージョンの可用性を考えます。正常および3 CSS3 CSS3プレフィックス期間の場合に利用可能である、プレフィックスは通常CSS3のCSS3を上書きします。

  の例CSS3、私はより多くの尊敬プログレッシブ・エンハンスメント文言です。通常のCSS3の効果を達成する可能性があるブラウザで効果を達成するために、いくつかの属性のプレフィックスCSS3が同じではないので、最終的には正常なCSS3の対象となるため。あなたが効果は同じプロパティではありませんかについて好奇心旺盛であれば、明示的にCSS3 CSS3と通常に付けます。

   4)方法を選択

  根据你的用户所使用的客户端的版本来做决定。请注意我的措辞,我没有用浏览器,而是用客户端。因为渐进增强和优雅降级的概念本质上是软件开发过程中低版本软件与高版本软件面对新功能的兼容抉择问题。服务端程序很少存在这种问题,因为开发者可以控制服务端运行程序的版本,就无所谓渐进增强和优雅降级的问题。但是客户端程序则不是开发者所能控制的(你总不能强制用户去升级它们的浏览器吧)。我们所谓的客户端,可以指浏览器,移动终端设备(如:手机,平板电脑,智能手表等)以及它们对应的应用程序(浏览器对应的是网站,移动终端设备对应的是相应的APP)。

  现在有很成熟的技术,能够让你分析使用你客户端程序的版本比例。如果低版本用户居多,当然优先采用渐进增强的开发流程;如果高版本用户居多,为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程。

  然而事实情况是怎么样的呢?绝大多数的大公司都是采用渐进增强的方式,因为业务优先,提升用户体验永远不会排在最前面。

 


おすすめ

転載: blog.51cto.com/14479068/2433686