CSS のグレースフル デグラデーションとは何ですか?

何は优雅降级ですか?

経験豊富な Web 開発者であれば、グレースフル デグラデーションという言葉を聞いたことがあるかもしれません。 Web 開発におけるグレースフル デグラデーションについて学ぶ前に、この言葉を詳しく見てみましょう。優美とは優雅・美しいという意味で、劣化とは壊れたり倒れたりすることをいいます。したがって、優雅な劣化という言葉の全体的な意味は、機能が壊れながらもエレガントになるということです。

開発者は、Web 開発においてグレースフル デグラデーションという用語を使用します。これは、Web サイトやアプリケーションが機能の低いブラウザでも正しく動作できるようにするためのさまざまな技術を提供します。

たとえば、最新のブラウザは高度な CSS および JavaScript 機能をサポートしていますが、古いブラウザや古いバージョンのブラウザではサポートされていません。このような場合、開発者は、ユーザーが古いブラウザで快適に Web サイトにアクセスできるようにする必要があります。

グレースフル デグラデーションのためのさまざまなテクニック

上記の部分で、私たちは、これがプログラマティック降格であること、およびプログラマがこれを保護するために、例証的なプログラマティック降格手法を使用することを理解しました。

プログレッシブ機能強化

この技術では、開発者は、コードを別のパケットに分解し、各パケットを段階的に追加する必要があります。

最後に、高度な CSS 機能をロードします。ブラウザがその機能をサポートしている場合は、その機能が HTML 要素に適用されます。それ以外の場合は、Web ページの HTML コンテンツにアクセスしたままになります。このようにして、最新のブラウザが一部の機能をサポートしていない場合でも、HTML コンテンツを適切に表示できます。

特徴検出

この方法では、ブラウザが特定の JavaScript 機能をサポートしているかどうかを検査します。サポートしている場合、Web サイトはユーザーがその機能を使用して HTML コンテンツを対応することを許可します。異なる形式。

以下の例から理解できます。 ＃＃＃例＃＃＃

次の例では、div 要素を作成し、その 'id' を 'element' にしています。同時に、CSS 内で 'class' を 'container' のクラスとして定義し、いくつかの CSS を使用します。プロパティにはその中に含まれています。

JavaScript では、ブラウザがダウンロードされるたびに、id を介して div 要素にアクセスし、div 要素に「classList」プロパティが含まれているかどうかを検査します。含まれている場合は、「container」クラス名を数グループに追加します。名前を名前文字列に接続するだけです。

したがって、ここでは、div 要素が classList クラスをサポートしているかどうかを確認し、これに基づいて、さまざまな技術を使用して div 要素にクラス名を追加します。 リーリー

追加备選択项

推奨レベルのもう 1 つの手法は、ブラウザが CSS をサポートしていない場合、Web ブラウザで HTML コンテンツを完全に表示するために別の CSS を使用することです。

以下の例を使用して、どのようにバックバック選択をネットワークに追加するかを理解します。

例（CSS渐变追加逆行選択用）

以下の例では、card div 要素を作成し、line-gradient() CSS 関数を使用して背景のグラデーションを設定しています。また、ブラウザが Linear-gradient() CSS 関数をサポートしていない場合のフォールバック CSS も作成しました。

出力では、グラデーションまたは背景色のい​​ずれかが表示されていることがわかります。

リーリー

例 (CSS アニメーションのフォールバック オプションの追加)

以下の例では、CSS アニメーションのフォールバック オプションを追加しました。ここでは、3 つの div 要素を作成し、すべての要素に「バウンス」アニメーションを追加しました。 「バウンス」アニメーションは、div をその位置から上に移動し、最初の位置に戻します。

JavaScript では、新しい div 要素を作成し、そのスタイルに「アニメーション」プロパティが含まれているかどうかを確認します。 「はい」の場合、アニメーションは自動的に適用されます。それ以外の場合は、JavaScript を使用してすべての div 要素に「no_animation」クラスを追加し、「アニメーション: なし」を設定する必要があります。

リーリー

ユーザーは、このチュートリアルでさまざまなグレースフル デグラデーション手法について学びました。ブラウザーが一部の機能をサポートしていない場合でも、すべてのテクニックにより Web ページの HTML コンテンツが魅力的になります。

優先降格の最適な手法は、オプション ソリューションを設定することです。開発者は、旧バージョンのブラウザでの優先降格の実現を保証するために、標準の HTML および CSS プロパティのみを使用します。

ただし、開発者は複数の機能にフォールバック オプションを追加する必要があるため、正常な機能低下の維持にはコストがかかります。それでも、どの Web ブラウザから訪問する訪問者にもスムーズな Web エクスペリエンスを提供します。

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