5

次のコードをオンラインで入手しました。

  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

これはうまくいきます。

今、私は CSS の専門家ではありませんが、それらすべてにプレフィックスが付いていることに気付きました。接頭辞なしのバージョンも追加するのが賢明ですか? それはどうなりますか？

4

4 に答える 4

1

接頭辞なしのバージョンも追加するのが賢明ですか?

はい、使用するプレフィックス付き CSS コードのプレフィックスなしバージョンを常に提供する必要があります。

それはどうなりますか？

グラデーションの場合、お持ちのバージョンは標準と同じです。プレフィックスをドロップするだけです。

ただし、グラデーション用の webkit 構文の以前のバリアントもあることに注意してください。古い webkit ブラウザーをサポートする場合は、これも指定する必要があります。

また、サポートされていないブラウザーのフォールバックとして無地の背景を含める必要があります。

これらのことについて疑問がある場合は、CanIUseやMDNなどのサイトを参照してください。

ブラウザ間の互換性を確保したい場合は、IE9 以前では CSS グラデーションがまったくサポートされていないことに注意してください (接頭辞の有無にかかわらず)。プレーンカラーのフォールバックは機能しますが、グラデーションが必要な場合は別の解決策があります (私の好みのオプションは一般にCSS3Pieですが、必要に応じて純粋な CSS オプションもありますが、あまり良くありません)。

于 2013-06-10T13:08:52.430 に答える
0

線形グラデーションを将来証明するには、既存のコードの最後に次のように追加します。

background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

このように、ブラウザがプレフィックスを削除しても、汎用コードを引き続き使用できます。

于 2013-06-10T13:02:03.020 に答える