19

私のプロジェクトのクリエイティブ デザイナーと私は、ユーザー エクスペリエンスの特定の側面を作成するために、彼のコンプのスライスを使用するか、ブラウザーのレンダリング エンジンに依存するかについて、友好的な意見の相違がありました。

具体的な例の 1 つは、ウィジェットの幅全体を占める水平の「バー」です。彼は、さまざまな色と不透明度のいくつかのストップを含む非常におしゃれなグラデーションを作成しました。彼は、画像の小さいサイズが望ましいか、グラデーションをネイティブに生成するために必要な CSS コードの追加行と少なくとも同等であると感じています。

私たちは既に CSS スプライト技術を使用して、サーバーからの往復回数を減らしているので、それは問題ではありません。現時点では、CSS と HTML を使用したレンダリングに対して、スライスされた画像を使用することの長所と短所にすぎません。

2つの「悪い」オプションであるために必要な画像の大きさに関する決定的なルールはありますか?

更新:何人かの人々が勾配の複雑さを要因として言及しているので、ここでそれを提示します:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

非常に複雑です！;-)

4

3 に答える 3

13

それを測定してください！あなたが好きな答えではないと思いますが、実際には CSS がどれほど複雑になるか、したがってレンダリングにかかる​​時間によって異なります。

ほとんどの場合、レンダリング時間 (CSS バージョン) とリクエスト オーバーヘッドおよび送信時間 (画像バージョン) の関係になります。おそらくここに大きな数字が表示されます。すでに画像スプライトを使用しているため、リクエストのオーバーヘッドを最小限に抑えています。

ブラウザの互換性にも注意する必要があります。ここでは、グラデーションなどに関しては、画像が CSS に勝つことがよくあります。

私が言いたいことを示すためのいくつかの非常に複雑な CSS3 サイト: http://lea.verou.me/css3patterns/ これは非常に素晴らしいケース スタディですが、信じられないほど遅いです。読み込み時に遅れます。スクロールするとさらに遅くなります。そして、そのすべてに画像スプライトを使用するソリューションよりもはるかに遅いと確信しています。

私を間違って扱わないでください！私はCSSが大好きですが、画像もいいです。時にはさらに細かく。

概要

それを測定してください！測定する時間がない場合は、css がどれほど複雑になるかを見積もります。複雑になりがちな場合は、画像を使用します。互換性の問題がある場合は、画像を使用してください。

于 2011-11-09T19:21:26.910 に答える
8

一般的に、CSS で実行できる場合は、必ず画像をスキップしてください。他に理由がなければ、維持する方が簡単です。

ただし、複雑なグラデーションは、私があきらめて画像を投入する可能性があります。最近いくつかの CSS グラデーションを実装したので、今は少し混乱しています。

最終的に、Fabian Barney が正しい答えを持っています。パフォーマンスの問題である場合は、物事を測定する必要があります。大まかに言えば、これはパフォーマンスの問題にあまり関心を持たない可能性があります。

于 2011-11-09T19:25:54.923 に答える
0

CSSの方が再利用しやすいと思います。同じ Web ドキュメントで同じ画像を何度も繰り返さなければならないことを想像してみてください。そこにはたくさんのHTTPリクエストがあります。しかし、それは私の意見です。間違っている場合は訂正してください。CSS はより表現力があり、柔軟にスタイリッシュだと思います。ただし、気をつけなければならないことがあります。CSS が多すぎる、ブラウザー固有のプレフィックスの kill ページのようなもの。

于 2014-11-26T11:08:23.240 に答える