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 サポートは次のようになります:

A昔: ブラウザーはプレフィックス付き 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 サイト) を開発している場合は、このグループの人々が常に新しいことに挑戦するのが好きで、常にクールな特殊効果が好きで、ソフトウェアを常に最新バージョンに更新することを好むことをご存知でしょう (そして、私たちの旧世代のソフトウェアとは異なります)。ユーザー）。このような状況に直面した場合、プログレッシブ・エンハンスメントの開発プロセスが最良の選択です。

上記の内容はCSS3におけるプログレッシブエンハンスメントとグレースフルデグラデーションについての説明ですので、皆様のお役に立てれば幸いです。

プログレッシブエンハンスメントとグレースフルデグラデーションの違いは何ですか

プログレッシブエンハンスメントとグレースフルデグラデーションについて_html/css_WEB-ITnose

javascript_javascriptスキルのプログレッシブエンハンスメントとスムーズなデグラデーションについての簡単な説明

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