CSS漸變的改進：雙位置語法簡化漸變條紋

Lea Verou 的 conic-gradient() polyfill 功能列表中有一項引起了我的注意：

支持雙位置語法（同一顏色停止點使用兩個位置，作為具有相同顏色的兩個連續(xù)顏色停止點的快捷方式）

令人驚訝的是，我最近發(fā)現(xiàn)大多數(shù)人甚至不知道漸變停止點的雙位置語法實際上存在于規(guī)范中，因此我決定寫一篇關(guān)于它的文章。

根據(jù)規(guī)范：

指定兩個位置可以更容易地在漸變中創(chuàng)建純色“條紋”，而無需重復(fù)顏色兩次。

我完全同意，這是我了解此功能時首先想到的。

假設(shè)我們想要獲得以下結(jié)果：一個具有許多等寬垂直條紋的漸變（我從 Chris 之前的文章中獲得的）：

十六進制值為：#5461c8、#c724b1、#e4002b、#ff6900、#f6be00、#97d700、#00ab84 和 #00a3e0。

讓我們首先看看如何在不使用雙停止點位置的情況下使用 CSS 實現(xiàn)這一點！

我們有八條條紋，每條條紋占漸變寬度的八分之一。100% 的八分之一是 12.5%，因此我們在該值的倍數(shù)處從一個條紋過渡到下一個條紋。

這意味著我們的 linear-gradient() 如下所示：

<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>

請注意，我們不需要重復(fù)停止位置的百分比值，因為每當(dāng)停止位置小于前一個位置時，我們就會自動進行急劇過渡。這就是為什么始終可以使用 0（它總是小于任何正值）并使用 #c724b1 25%、#e4002b 0 而不是 #c724b1 25%、#e4002b 25% 的原因，例如。如果我們決定要添加兩條條紋并將停止位置設(shè)為 10% 的倍數(shù)，這在將來可以使我們的生活更輕松。

還不錯，尤其是與漸變生成器通常生成的代碼相比。但是，如果我們決定中間的其中一條條紋與其他條紋不太匹配，那么將其更改為其他內(nèi)容意味著需要在兩個地方進行更新。

同樣，這也不是什么大問題，我們無需借助預(yù)處理器就可以解決：

<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 漸變，現(xiàn)在我們不必再在兩個地方進行修改了。

CodePen 演示

但是，即使預(yù)處理器可以避免我們兩次鍵入相同的內(nèi)容，它也不會消除生成的代碼中的重復(fù)。

而且我們可能并不總是想使用預(yù)處理器。撇開有些人頑固或?qū)︻A(yù)處理器具有非理性恐懼或仇恨的事實不談，有時使用循環(huán)感覺有點傻。

例如，當(dāng)我們幾乎沒有任何東西需要循環(huán)時！假設(shè)我們想要獲得更簡單的背景圖案，例如對角線散列圖案，我認(rèn)為這比過于夸張的彩虹圖案更常見，彩虹圖案可能根本不適合大多數(shù)網(wǎng)站。

這需要使用 repeating-linear-gradient()，這意味著即使我們沒有像之前那樣擁有很長的十六進制值列表，也需要一些重復(fù)：

<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>

在這里，我們不能丟棄第一個和最后一個停止點，因為這些正是指示漸變?nèi)绾卧?background-size 定義的矩形內(nèi)重復(fù)的內(nèi)容。

如果您想了解為什么最好使用 repeating-linear-gradient() 而不是普通的 linear-gradient() 結(jié)合適當(dāng)?shù)?background-size 來創(chuàng)建此類散列，請查看我之前寫過的另一篇文章。

這正是此功能發(fā)揮作用的地方——它允許我們避免最終 CSS 代碼中的重復(fù)。

對于彩虹條紋案例，我們的 CSS 變?yōu)椋?/p>

<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>

要重新創(chuàng)建散列，我們只需要：

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

CodePen 演示

支持情況如何？很好，您問對了！它實際上非常好！它適用于 Safari、Chromium 瀏覽器（現(xiàn)在也包括 Edge?。┖?Firefox。預(yù) Chromium Edge 和一些移動瀏覽器仍然可能阻礙您，但如果您不必?fù)?dān)心為所有瀏覽器提供支持，或者提供后備方案是可以的，那么您可以開始使用它！

以上是當(dāng)您看上去時，CSS梯度變得更好的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！