4

画像の代わりに CSS を使用してグラデーションを作成しますが、マイナス面はありますか?

たとえば、次のコード:

 #gradient {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #00f, #fff);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
 }

ありがとう。

4

3 に答える 3

2

グラデーションはまだ標準化されておらず、多くのブラウザーはそれをサポートしていません。あなたの例で-moz-linear-gradientは、Firefox 3.6 で動作しますが、古いバージョンでは動作しません。あなたのサイトが公共の目的である場合、多くの人はあなたのグラデーションを見ることができないので、彼らが使用しているブラウザのバージョンを確認し、それに基づいてグラデーションや画像を使用することができます. イントラネット サイトでグラデーションを使用しています (ユーザーに特定のブラウザーの使用を強制することができます)。ブラウザーが Firefox 3.6 以降でない場合、サイトはユーザーにアップグレードするように指示するメッセージだけを表示しますが、これは適切ではありません。あなたが公開する場合の方法。

だから私は公開サイトにネガティブを選択します。:)

于 2010-03-25T15:26:44.677 に答える
0

あなたの例で示したように、現時点では、一般的に使用されているすべてのブラウザーで機能する唯一の方法はありません。メンテナンスとコードの読みやすさの目的で、それは「ネガティブ」だと思います。

少し建設的な批判: あなたが探している言葉は、「代わりに」であり、「インスタント」ではありません。

于 2010-03-25T15:19:41.457 に答える
0

CSS グラデーションは、使用しているフォールバックを使用して、多くの大規模な Web サイトで使用されています。PIE.htc も追加します。PIE を使用する場合は、表示されるように絶対的または相対的に配置する必要があることに注意してください。

非常に古いブラウザをサポートする必要がある場合、最良の方法は代替の無地の背景色を提供することです。

古いブラウザにグラデーションが表示されると期待するのはばかげています。どうしても必要な場合は、条件付きで読み込まれるスタイルシートを設定できます。

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->

そこで、繰り返しの画像ベースのグラデーションを宣言できます。CSS3の前に行われていた方法と同じです。

このようにすることで、最新の Web ブラウザーでサイトを少し速くすることができます。

于 2012-01-23T22:16:44.723 に答える