這樣寫 step 步驟條就輕鬆了

相信不少朋友在寫頁面的時候都會遇到相似步驟條的效果，當進入到第 x 步的時候，前面是高亮的，後面是灰的，甚至還有多是其餘的一些樣式，反正基本上就相似這樣的一個效果。

對於這樣的效果，通常狀況下都會用一個相似 width: 33%; 這樣的寬度或者位置控制，寫在 style 屬性中，而且都是經過 JS 去計算的。其實，在 HTML5 的表單類型屬性中，咱們能夠結合僞元素快速實現相似步驟條的效果，並且僅僅只是須要修改該標籤的 value 屬性值便可。

如今要說的是 progress 標籤元素，從代碼上來看，十分簡單，在標籤元素中間存在一個與 value 值相同的內容，主要是考慮若是低端瀏覽不支持的話，仍是展現一下這個數字結果，而咱們如今則是考慮瀏覽器兼容的狀況下所作的事情。若是比較在乎兼容性的話，能夠查看一下 https://caniuse.com/progress。

<progress value="33" min="1" max="100">33</progress>

從上面這個代碼中咱們很容易就能夠理解，要展現的進度狀況是在 1 到 100 之間的 33 這個位置，或者咱們也能夠直接理解爲 33% 部分。在 chrome 瀏覽器中默認的效果就是這樣了。

簡單的 HTML 標籤，直觀的效果。那麼可能就有人會問了，如今只有這麼一個標籤元素，而通常進度是有幾種顏色搭配的，那麼須要怎麼處理呢？是的，這的確是一個問題，但也僅僅只是從表面上看到的一個問題，若是咱們把 DevTools 設置中的 Show user agent shadow DOM 打開，而後再選中這個 progress 元素，就會有新世界出現了。

如今咱們能夠看到在 progress 中其實還存在幾個元素，那麼接下來咱們就能夠利用這些僞元素來幫咱們實現更多效果了。

progress {
  display: block;
  width: 300px;
  height: 35px;
  margin-bottom: 10px;
  -webkit-appearance: none;
}
progress::-webkit-progress-bar {
  background: url(bg_step.png) no-repeat 0 0;
}
progress::-webkit-progress-value {
  background: url(bg_step.png) no-repeat 0 -50px;
}
progress[value="2"]::-webkit-progress-value {
  background-position: 0 -100px;
}
progress[value="3"]::-webkit-progress-value {
  background-position: 0 -150px;
}

很粗暴的用一張雪碧圖來處理了一下，圖片就是前面的那張步驟條圖片，只不過最終的效果就是根據不一樣的 value 值，展現高亮部分的步驟。若是要好好完整的搞，那麼還須要作細節地處理。

僞元素分析

在前面那張帶有僞元素的圖中，咱們能夠看到這個 progress 中還包含了如下三個僞元素：

• -webkit-progress-inner-element
• -webkit-progress-bar
• -webkit-progress-value

而後再加上 ::after 和 ::before 這兩個，那麼一共有 5 個元素可用，固然，這 5 個僞元素是有層級關係的。

inner-element > (bar > value) + before + after value 包含在 bar 中，bar 又在 element 中，最後 element 與 before 和 after 同級。

說分析，其實也沒啥可分析的，知道了這幾個僞元素的關係，除了 before 和 after 須要加 content 屬性之外，其餘三個在具體運用時就跟普通標籤元素沒任何區別。

特別注意事項

知道了這幾個僞元素存在後，是否是有種很幸福的感受，一個 progress 竟然包含了這麼多僞元素，就跟一個組件似的，哦，對，這原本就是一個「組件」。因此接下來咱們是否是就立刻能夠開始吭哧吭哧地寫樣式，作效果呢？

progress::before {
  content: 'linxz開始樣式處理';
}
progress::after {
  content: '簡單粗暴的樣式linxz';
}
progress::-webkit-progress-inner-element {
  box-sizing: content-box;
  border: 3px dashed #333;
}
progress::-webkit-progress-bar {
  background: #0f0;
}
progress::-webkit-progress-value {
  background: #f00;
}

打開頁面看一下，是否是發現哪裏不對呢？

這確定不對啊，不是設置了綠色的 bar，紅的 value 嗎？但是爲何沒效果呢？還有 element 的邊框也沒出來，這是爲何呢？

其實這主要是由於咱們還少寫了一個屬性，須要在 progress 中加入這個。

progress {
  -webkit-appearance: none;
}

如今咱們再看看會發現，這個世界開始變了。

appearance

該屬性的主要做用是改變元素的外觀，而 progress 內置了一個外觀樣式，默認值是 auto，也就表明着這個元素將頗有可能會跟着系統的主題而變化。在 MDN 有這麼一句介紹：

The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme.

同時必不可少的會附帶上了不少屬性值的效果，在這裏就再也不一一展開說明了。但須要注意，若是咱們要對一些特殊的組件，尤爲是表單類型的，在不在是否有默認的外觀屬性，就隨手加一下。固然啦，最穩妥的方式就是經過 DevTools 看一下 computed 後的樣式就知道了。

小結一下

首先請注意，文中並未相對應的屬性進行深刻說明，好比 value、min 以及 max，這些也沒啥好說明的；其次呢，主要是想跟你們提一下 progress 中咱們能夠利用 value 等屬性更快捷地獲取到一個進度條的值，而後結合 progress 的僞元素作一些頁面效果。

是的，主要想說的就是這麼一點。

可能有人會以爲 demo 的效果很醜，那是必然的。手頭上沒有最直接的 demo，只是忽然有了這麼一個想法，因此才寫了這麼一篇簡單介紹的內容。可是請必定要相信，這裏有 1 個 progress 和 5 個僞元素能夠用，至關於 6 個標籤元素，能夠作的事情仍是很多。好比加上漸變、動畫什麼的，好看的效果就有了。

但必需要注意，不能遺忘 appearance 這個屬性！

首發我的公衆號： 志語自樂（ https://mp.weixin.qq.com/s/jC...