-1

グラデーション画像の使用は、ページのスタイルを設定するために開発者の間で非常に一般的です。グラデーション画像は、ナビゲーションバーのスタイリングから背景のスタイリングまで、さまざまな場所で使用されます。小さな画像をどちらかの方向に繰り返すようなテクニックも一般的です。

スタイリングしてこの効果を与えるもう1つの方法は、色の異なる複数のdivを上下に使用することです。後者は、前者よりも少し明るくなります。最も単純なシナリオでは、そうすることで小さなスクリプトだけが含まれます。したがって、多くのマークアップを記述しても問題はありません。単純なコードだけです。

残っている唯一の懸念は、速度とパフォーマンスです。

スピード

スクリプト、より正確には、関数のサイズは画像よりもはるかに短くなります。したがって、速度の問題では、後者の方法の方が適しているようです。

パフォーマンス

今日のブラウザは非常に強力であるため、画像の表示と関数の実行の違いはごくわずかです。

Css管理

もちろん、ポジショニングなどの問題も気になりますが、日常生活の中で苦労しています。問題は、2つのdivをオーバーラップさせ、それらのz-indexを設定することだけです。グラデーションdiv全体を1つの親div内に置くことができます。

では、パフォーマンスと速度の問題に対処したことは、画像を使用するよりもGradientdivの方がはるかに優れたアプローチを使用しているのではないでしょうか。

4

2 に答える 2

2

はい、それは別のアプローチです。しかし、良いものではありません。次の場合はゼロポイントを獲得します。

  • 保守性
  • スケーラビリティ
  • SEO
  • コンテンツからのプレゼンテーションの分離

さらに、今日のブラウザはより強力であるため、パフォーマンスについて心配する必要がないと言うことは、大まかな仮定です。

于 2012-06-23T13:18:32.743 に答える
1

実際、あなたが説明する2番目のオプション（アターリングカラーで複数のdivを作成する）は実にひどいものだと思います。

  1. スタイリングのためにマークアップを変更しています。それはダメです。
  2. JavaScriptを無効にすることはユーザーの間で一般的なことです。それではどうなりますか？
  3. あなたが自分で言ったように、ポジショニング騒乱。
  4. パフォーマンスに関しては、もはや問題ではないと述べるよりも慎重になります。特にモバイルブラウザの黎明期を念頭に置いて。
  5. このようなスタイリングは、理解して維持するのが難しいでしょう。特にあなたのチームがいつか変わるとき。

また、グラデーションを実装する方法は他に2つあります。

  1. CSSグラデーション-単純なバリアントに限定され、適切なクロスブラウザ機能を提供するために多くのCSSが必要です。このジェネレーターを試して、これらを味わうことができます：http: //www.colorzilla.com/gradient-editor/
  2. SVGの背景。これらを使用すると、必要なグラデーションを作成できます。他の画像と同じように、CSSでsvgファイルを使用できます。ただし、一部のブラウザはこの機能をサポートしていません。これがオプションである場合を示す表です

画像を使用するのが最も信頼できるオプションですが、SVGを通常の画像（SVGをサポートしていないこれらのブラウザーの場合）と組み合わせるのが最も柔軟なアプローチのようです。

于 2012-06-23T12:36:00.580 に答える