あなたが見ている間、CSSグラデーションは良くなりました

CSSグラデーションの改善：ダブル位置構文はグラデーションストライプを簡素化する

Lea VerouのConic-Gradient（）ポリフィル関数のリストには、私の注意を引いたものがあります。

デュアルポジション構文をサポートします（同じカラーストップポイントは、同じカラーの2つの連続したカラーストップポイントのショートカットとして2つの位置を使用します）

驚くべきことに、私は最近、ほとんどの人が勾配停止ポイントの2位の構文が実際に仕様に存在することさえ知らないことさえわからないので、それについて記事を書くことにしました。

仕様によると：

2つの位置を指定すると、色を2回繰り返すことなく、勾配で固体の「ストライプ」を簡単に作成できます。

この機能を理解したときに、これが最初に思い浮かぶものであることに完全に同意します。

次の結果を得たいとします。

16進数は、＃5461C8、＃C724B1、＃E4002B、＃FF6900、＃F6BE00、＃97D700、＃00AB84、および＃00A3E0です。

まず、デュアルストップポイント位置を使用せずにCSSを使用してこれを達成する方法を見てみましょう！

8つのストライプがあり、それぞれが勾配幅の8分の1を占めています。 100％の8分の1は12.5％であるため、その値の倍数で1つのストライプから次のストライプに移行します。

これは、線形勾配（）が次のように見えることを意味します。

 <code>linear-gradient(90deg, #5461c8 12.5% /* 1*12.5% */, #c724b1 0, #c724b1 25% /* 2*12.5% */, #e4002b 0, #e4002b 37.5% /* 3*12.5% */, #ff6900 0, #ff6900 50% /* 4*12.5% */, #f6be00 0, #f6be00 62.5% /* 5*12.5% */, #97d700 0, #97d700 75% /* 6*12.5% */, #00ab84 0, #00ab84 87.5% /* 7*12.5% */, #00a3e0 0)</code>

ストップ位置が前の位置よりも小さいときはいつでも自動的に急激な遷移を行うため、停止位置のパーセンテージ値を繰り返す必要はないことに注意してください。これが、常に0（常に正の値よりも常に少ない）を使用し、＃c724b1 25％の代わりに＃c724b1 25％、＃e4002b 0を使用することができる理由です。たとえば、＃e4002b 25％です。 2つのストライプを追加し、停止位置を10％の倍数に設定することに決めた場合、これにより将来私たちの生活が楽になります。

特に勾配ジェネレーターが通常生成するコードと比較して、悪くありません。ただし、真ん中のストライプの1つが他のストライプと完全に一致しないと判断した場合、他のストライプに変更することは、2つの場所で更新する必要があることを意味します。

繰り返しますが、これは大きな問題ではありません。プリプロセッサの助けを借りずに解決することができます。

 <code>$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) { $s-list: (); $n: length($c-list); $u: 100%/$n; @for $i from 1 to $n { $s-list: $s-list, nth($c-list, $i) $i*$u, nth($c-list, $i 1) 0 } @return $s-list } .strip { background: linear-gradient(90deg, get-stops($c))) }</code>

これにより、以前に見た正確なCSS勾配が生成され、今では2つの場所で変更する必要がなくなりました。

Codepenデモ

しかし、プリプロセッサが同じものを2回入力することを妨げている場合でも、生成されたコードの重複を排除しません。

そして、私たちは常にプレセッサを使用したいとは限りません。一部の人々は頑固であるか、前処理者に対する不合理な恐怖や憎しみを持っているという事実を脇に置いてください。

たとえば、ループするものがほとんどない場合！斜めのハッシュパターンなど、よりシンプルな背景パターンを取得したいとします。これは、ほとんどのWebサイトにはまったく適していない場合がある過剰誇張された虹パターンよりも一般的だと思います。

これには、繰り返し線形勾配（）を使用する必要があります。つまり、以前のように16進価値の非常に長いリストがない場合でも、複製が必要です。

 <code>repeating-linear-gradient(-45deg, #ccc /* can't skip this, repeating gradient won't work */, #ccc 2px, transparent 0, transparent 9px /* can't skip this either, tells where gradient repetition starts */)</code>

ここでは、最初と最後のストップポイントを破棄することはできません。これらは、バックグラウンドサイズで定義された長方形内で勾配がどのように繰り返されるかを示すものであるためです。

適切なバックグラウンドサイズと組み合わせて、プレーンリニア勾配（）の代わりに繰り返し線形勾配（）を使用する方が良い理由を理解したい場合は、以前に書いた別の投稿をチェックしてください。

これは、この機能が登場する場所です。これにより、最終的なCSSコードの重複を避けることができます。

レインボーストライプケースの場合、私たちのCSSは次のようになります。

 <code>linear-gradient(90deg, #5461c8 12.5%, #c724b1 0 25%, #e4002b 0 37.5%, #ff6900 0 50%, #f6be00 0 62.5%, #97d700 0 75%, #00ab84 0 87.5%, #00a3e0 0)</code>

ハッシュを再現するには、必要なだけです。

 <code>repeating-linear-gradient(-45deg, #ccc 0 2px, transparent 0 9px)</code>

Codepenデモ

サポートの状況はどうですか？とても良い、あなたは正しく尋ねた！それは実際にはとても良いです！ Safari、Chromiumブラウザー（Edgeが含まれるようになりました！）、Firefoxで動作します。プレクロミウムエッジと一部のモバイルブラウザは、可能な限り順調に進んでいる可能性がありますが、すべてのブラウザのサポートを提供したり、フォールバックソリューションを提供したりすることを心配する必要がない場合は、使用を開始できます。

以上があなたが見ている間、CSSグラデーションは良くなりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。