乐趣区

关于html5:这样写-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 同级。

说剖析,其实也没啥可剖析的,晓得了这几个伪元素的关系,除了 beforeafter 须要加 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 后的款式就晓得了。

小结一下

首先请留神,文中并未绝对应的属性进行深刻阐明,比方 valuemin 以及 max,这些也没啥好阐明的;其次呢,次要是想跟大家提一下 progress 中咱们能够利用 value 等属性更快捷地获取到一个进度条的值,而后联合 progress 的伪元素做一些页面成果。

是的,次要想说的就是这么一点。

可能有人会感觉 demo 的成果很丑,那是必然的。手头上没有最间接的 demo,只是忽然有了这么一个想法,所以才写了这么一篇简略介绍的内容。然而请肯定要置信,这里有 1 个 progress 和 5 个伪元素能够用,相当于 6 个标签元素,能够做的事件还是不少。比方加上突变、动画什么的,难看的成果就有了。

但必须要留神,不能忘记 appearance 这个属性!

相干浏览:

  • 轻松实现进度条的办法之 meter

首发集体公众号: 志语自乐 (https://mp.weixin.qq.com/s/jC…

退出移动版