CSS3でプログレッシブエンハンスメントとグレースフルデグラデーションを使用する方法

今回はcss3でプログレッシブエンハンスメントとグレースフルデグラデーションを使用する方法を紹介します。 css3でプログレッシブエンハンスメントとグレースフルデグラデーションを使用する際の注意点は何ですか?実際のケースを見てみましょう。

プログレッシブエンハンスメントとグレースフルデグラデーションという 2 つの概念は、CSS3 の出現後に普及しました。低レベルのブラウザは CSS3 をサポートしていませんが、CSS3 の特殊効果は諦めきれないため、高レベルのブラウザでは CSS3 が使用され、低レベルのブラウザでは最も基本的な機能のみが保証されます。どちらの目的も、異なるブラウザーでの異なるエクスペリエンスに焦点を当てることですが、焦点が異なるため、ワークフローが異なります。

プログレッシブな機能拡張: 最初から低バージョンのブラウザー向けにページを構築して基本機能を完成させ、その後、より良いエクスペリエンスを実現するために、高度なブラウザー向けにエフェクト、インタラクション、追加機能をターゲットにします。

グレースフル デグラデーション: 最初から完全に機能するサイトを構築し、ブラウザー向けにテストして修正します。たとえば、最初に CSS3 の機能を使用してアプリケーションを構築し、その後、主要なブラウザを徐々にハッキングして、下位バージョンのブラウザでも正常に閲覧できるようにします。

従来のソフトウェア開発では、上位互換性と下位互換性の概念がよく言及されます。プログレッシブ エンハンスメントは上位互換性に相当し、グレースフル デグラデーションは下位互換性に相当します。下位互換性とは、上位バージョンが下位バージョンをサポートすること、または、後から開発されたバージョンが以前に開発されたバージョンをサポートし、上位互換性があることはまれであることを意味します。ほとんどのソフトウェアは下位互換性があります。たとえば、Office2010 では Office2007、Office2006、Office2005、Office2003 などで作成された Word ファイルを開くことができますが、Office2003 では Office2007、Office2010 などで作成された Word ファイルを開くことができません。

2 つの違い:

グレースフル デグラデーションとプログレッシブ エンハンスメントは、同じものに対する 2 つの視点にすぎません。グレースフル デグラデーションとプログレッシブ エンハンスメントはどちらも、同じ Web サイトがさまざまなデバイス上のさまざまなブラウザーでどの程度うまく機能するかに焦点を当てています。主な違いは、それぞれがどこに注意を向けるか、そしてその注意が作業の流れにどのような影響を与えるかです。

グレースフル デグラデーションの観点では、Web サイトは最も高度で完全なブラウザー向けに設計されるべきだと考えています。 「古い」とみなされるブラウザ、または機能が欠落しているブラウザのテストを開発サイクルの最終段階で手配し、テスト対象を主流ブラウザ (IE、Mozilla など) の以前のバージョンに限定します。この設計パラダイムでは、古いブラウザは「貧弱だがまあまあ」のブラウジング エクスペリエンスしか提供しないと考えられていました。特定のブラウザに合わせて、いくつかの小さな調整を行うことができます。しかし、大きなバグの修正を除いて、それらは私たちの注意の焦点では​​ないため、

その他の

違いは単純に無視されます。 プログレッシブ エンハンスメントの観点では、コンテンツ自体に焦点を当てる必要があると考えています。違いに注目してください。「ブラウザ」という単語さえ言及していません。コンテンツは私たちがウェブサイトを構築する動機となります。表示する Web サイト、収集する Web サイト、検索する Web サイト、運営する Web サイト、これらすべてを含む Web サイトもありますが、すべてコンテンツが含まれることは同じです。これにより、プログレッシブ エンハンスメントがより合理的な設計パラダイムになります。だからこそ、これは Yahoo! によってすぐに採用され、「段階的ブラウザ サポート」戦略の構築に使用されました。 ケース分析:

(1) コード

.transition { /*渐进增强写法*/
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
         transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

(2) プレフィックス CSS3 (-webkit- / -moz- / -o-*) とブラウザーでの通常の CSS3 サポートは次のとおりです:

長い間 以前:ブラウザーはプレフィックス付き CSS3 も通常の CSS3 もサポートしていませんでした。

少し前: ブラウザーはプレフィックス付き CSS3 のみをサポートし、通常の CSS3 はサポートしませんでした。

将来: ブラウザーはプレフィックス付き CSS3 をサポートしません。 , ただし、通常のCSS3のみをサポートしています。

(3) プログレッシブエンハンスメントの記述方法は、古いバージョンのブラウザの使いやすさを優先し、最後に新しいバージョンの使いやすさを考慮します。プレフィックス付き CSS3 と通常の CSS3 の両方が期間 3 で利用可能な状況では、通常の CSS3 がプレフィックス付き CSS3 をオーバーライドします。正常なダウングレードを記述する方法は、ブラウザーの新しいバージョンの可用性を優先し、最後に古いバージョンの可用性を考慮することです。期間 3 の場合、プレフィックス付き CSS3 と通常の CSS3 の両方が使用可能な場合、プレフィックス付き CSS3 が通常の CSS3 をオーバーライドします。

CSS3 に関する限り、私はプログレッシブエンハンスメントによる記述方法を好みます。プレフィックス付き CSS3 の一部の

プロパティ

のブラウザでの実装効果が通常の CSS3 の実装効果と異なる場合があるため、最終的には通常の CSS3 が優先されます。接頭辞付きの CSS3 と通常の CSS3 で異なる明示的な効果を持つプロパティが正確に何であるか知りたい場合は、

(4)選び方

ユーザーが使用しているクライアントのバージョンに基づいて決定を下してください。私の言葉遣いに注意してください。私はブラウザを使用していません。クライアントを使用しています。なぜなら、プログレッシブ・エンハンスメントとグレースフル・デグレードの概念は、基本的に、ソフトウェア開発プロセス中に新機能に直面する低バージョンのソフトウェアと高バージョンのソフトウェアの間の互換性を決定するためです。サーバー側プログラムではこの問題が発生することはほとんどありません。これは、開発者がサーバー側で実行されているプログラムのバージョンを制御できるため、漸進的な拡張や正常な機能低下の問題が発生しないためです。ただし、クライアント プログラムは開発者の制御の範囲を超えています (ユーザーにブラウザのアップグレードを強制することはできません)。私たちがクライアントと呼ぶものは、ブラウザ、モバイル端末デバイス (携帯電話、タブレット、スマート ウォッチなど)、およびそれらに対応するアプリケーション (ブラウザは Web サイトに対応し、モバイル端末デバイスは対応する APP に対応します) を指します。

現在、使用されているクライアント プログラムのバージョンの割合を分析できる非常に成熟したテクノロジーが存在します。もちろん、下位バージョンのユーザーが多い場合は、ほとんどのユーザーのユーザー エクスペリエンスを向上させるために、プログレッシブ エンハンスメントの開発プロセスが優先されます。劣化が優先されます。

しかし実際の状況はどうなのでしょうか？ビジネスが最優先であり、ユーザー エクスペリエンスの向上が最優先されることは決してないため、大企業の大多数は漸進的機能強化アプローチを採用しています。たとえば、Sina Weibo Web サイトのフロントエンドの アップデート は、何億人ものユーザーがいる Web サイトの場合、下位バージョンのユーザーが利用できるかどうかを考慮せずに特定の特殊効果を追求することは絶対に不可能です。下位バージョンから上位バージョンへのアクセシビリティを確保し、その後、段階的な機能強化に進み、新機能を使用して上位バージョンのユーザーに優れたユーザー エクスペリエンスを提供する必要があります。しかし、反例はありません。 10 代の若者向けのソフトウェア (または Web サイト) を開発している場合は、このグループの人々が常に新しいことに挑戦するのが好きで、常にクールな特殊効果が好きで、ソフトウェアを常に最新バージョンに更新することを好むことをご存知でしょう (そして、私たちの旧世代のソフトウェアとは異なります)。ユーザー）。このような状況に直面した場合、プログレッシブ・エンハンスメントの開発プロセスが最良の選択です。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTML5 で円アニメーション効果を作成する方法

H5 の WebGL を使用して、同じインターフェイス上で json チャートと echarts チャートを作成する方法

H5 の新しいセマンティック タグ機能は次のようになります

を使用します

以上がCSS3でプログレッシブエンハンスメントとグレースフルデグラデーションを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。