这样写 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...