3

通常、グラデーションを作成するときは、colorzilla グラデーション edtiorを使用します。

デフォルトでは、CSS が生成されます。次に例を示します。

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

これは確かに完全ですが、必要かどうか知りたいです。試行錯誤と削除のプロセスを通じて、次の CSS に縮小しました。

background: #1e5799; /* Old browsers */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

この縮小された CSS は、Chrome、Firefox、IE8、IE9、および IE10 で引き続き機能するようです。ただし、Internet Explorer 互換ビューの使用が常にうまく機能するとは限らないため、言うのは難しいです (IE9 を使用していたときはブロックが機能していましたが、IE10 にアップグレードして IE9 互換ビューを使用した後は機能しませんでした)。IETesterもダウンロードしましたが、このツールを使用することでより多くの成功を収めています。

特定のケースやその他の重要なブラウザーで壊れる可能性のある重要な CSS が欠けているかどうか、またはこれをさらにスリム化できるかどうかを誰かが確認できるかどうかに興味がありました。

重要性はそれほど重要ではありませんが、サイズにかなりの違いがあります。

2 つのブロックの違いは618 bytesと で、10 のグラデーションを使用するシートでは、違いは以上6 KBです。ご覧のとおり、これは急速に増加する可能性があり (キャッシングと今日のインターネット速度を考慮すると、これは最も重要な要素ではありません)、それでも検討する価値があると思います.

4

2 に答える 2

2

ええ、グラデーション構文はめちゃくちゃです。よし、これで行こう……。

  • まずfilter: IE9 は、特にグラデーションを他の CSS 機能と組み合わせている場合は注意が必要です。

    古い IEfilterスタイルは ActiveX コントロールに基づいており、バグが多いことで知られています。これは、他のブラウザー機能と組み合わせると悪化する傾向があります。IE9 では、filter以前に使用されていたもののほとんどに標準の CSS 構文が導入されました。グラデーションは、それを実現しなかった唯一の機能でした (確かに唯一の重要な機能です)。

    ただし、グラデーション用の ActiveX コントロールのこれらのバグは、IE8 よりも IE9 の方がさらに明白なようです。これは主に、以前よりも多くの組み込みブラウザー機能と対話する必要があるためです。たとえば、filterグラデーションは とうまく機能しませんborder-radius。丸みを帯びた角を完全に殺します。filterスタイルに関しては、他にも注意が必要なバグが多数あります。

    このため、多くのグラデーション ツールは、CSS に data-url として埋め込まれた SVG グラデーションを作成することを含む、IE9 の完全な代替構文を提供しますbackground。きれいではありませんが、すべてのバグfilterを回避するため、IE9よりもうまく機能します。filter残念ながら、この手法では、IE8 もサポートする必要がある場合は、filter構文がまだ必要です。しかし、IE9 で SVG スタイルと衝突することは望ましくありません。つまり、CSS のハッキングや条件付きコメントなどの不快感を意味します。ええ、それはすべて少し面倒です。

    これが、IE8 以前のグラデーションをサポートしないというのが、私の正直な好みの解決策である理由です。問題が多すぎ、ブラウザー固有のコードが多すぎ、ユーザー数が減少し続けるため、努力する価値はありません。

    古い IE でグラデーションをサポートする必要がある場合は、 CSS3Pieを使用します。これは、標準の CSS グラデーション構文のサポートを追加するポリフィル スクリプトです。これは、すべての IE バージョンでグラデーションを使用できることを意味filterします。(VML を使用して舞台裏でグラデーションを実行しますが、実装の詳細について心配する必要はありません。最終結果だけです)。

  • -ms-接頭辞:その通りです。IE10 のプレリリース バージョンをサポートする予定がない限り、これは不要です (もちろん、それらを使用している人は今までに本物の IE10 にアップグレードしているはずなので、これは無意味です)。

  • 2 つの-webkit-構文: これは、構文が完成する前に Webkit がこの機能を導入したためです。これが、最先端の生活です。構文は現在標準化されていますが、古い構文を使用するバージョンの Safari やその他の Webkit ユーザーがまだかなりの数存在するため、古い構文を提供する必要があります。これは時間の経過とともに変化しますが、まだ削除する準備ができていません。

  • 接頭辞: これは-o-Opera ブラウザ用です。彼らが接頭辞の必要性を落としたのは、最新のリリースだけです。最新リリースを使用していないユーザーは、それが必要になります。これが何人のユーザーに影響を与える可能性があるか、したがってそれを削除できるかどうかはあなた次第です。Opera ユーザーはブラウザを最新の状態に保つ傾向があるため、おそらく問題ないと思います。

  • プレフィックス:これ-moz-で安全に削除できます。Firefox は v16 以降プレフィックスを必要としません。それより前のバージョンを使用しているユーザーは非常に少ないです。（長期サポート版でもFF17です）。

  • 無地のフォールバック: もちろんこれを維持します。あなたのサイトがそれで問題なく見えることを確認してください (見た目が素晴らしい必要はありません。問題ありません)。これは、古いブラウザーのユーザーに対する保険です。はい、サポートしていないプレフィックスを必要とする古いバージョンの Firefox を使用しているユーザーも含まれる可能性があります。

はい、短い答えは、あなたはそれをたくさん落とすことができるということです。あなたが望んでいたほどではありませんが、確かにそれの一部です。

私はあなたのコードを次のように書きます：

background: #1e5799; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
-pie-background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE6-9 with css3Pie */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
behavior: url(/PIE.htc); /* activate css3Pie in IE6-9 */

-o-とのプレフィックスを削除し-moz-、 を CSS3Pie コードに置き換えましたfilter(サイトに PIE.htc を追加する必要があることは明らかですが、IE だけがダウンロードします)。

それが役立つことを願っています。

また、完全なブラウザー サポート チャートについては、 CanIUse サイトを参照することをお勧めします。

于 2013-06-20T13:44:23.070 に答える