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 サイトの他の関連記事に注目してください。

推奨読書:

CSS3のtransform関数の詳細な説明

Css3アニメーションシーケンスアニメーション

以上がcss3 の漸進的な強化と正常な劣化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。