It’s easy to write a step bar like this

I believe that many friends will encounter a similar effect when writing a page. When entering step x, the front is highlighted, the back is gray, and there may even be some other styles. Anyway, basically It is similar to this effect.

For such effects, under normal circumstances, a width or position control width: 33%; style attribute, and all calculated by JS. In fact, in the HTML5 form type attribute, we can combine pseudo-elements to quickly achieve the effect similar to the step bar, and only need to modify the value attribute value of the tag.

progress about now is the 0607cf23bc42ab tag element. From the code point of view, it is very simple. There is a value value as 0607cf23bc42ac. The main consideration is to show this numerical result if it is not supported by low-end browsing, and we Now it is what is done considering browser compatibility. If you are more concerned about compatibility, you can check https://caniuse.com/progress .

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

From the above code, we can easily understand that the progress to be displayed is 33 between 1 and 100 , or we can also directly understand the 33% part. This is the default effect in the Chrome browser.

Simple HTML tags, intuitive effects. Then someone may ask, there is only one label element now, and there are usually several color combinations for progress, so what should I do? Yes, this is indeed a problem, but it is only a problem seen on the surface. If we turn on Show user agent shadow DOM in the DevTools settings, and then select this progress element, there will be a new world. Appeared.

Now we can see that progress are actually several elements in 0607cf23bc432f, then we can use these pseudo-elements to help us achieve more effects.

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

It is very rough to use a Sprite image to process it. The image is the previous step picture, but the final effect is to show the steps of the highlighted part value If you want to do it well, you need to deal with it in detail.

Pseudo-element analysis

In the previous picture with pseudo-elements, we can see that this progress also contains the following three pseudo-elements:

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

Then add ::after and ::before , so there are 5 elements available. Of course, these 5 pseudo-elements have a hierarchical relationship.

inner-element > (bar > value) + before + after value is contained in bar, and bar is in element. Finally, element is at the same level as before and after.

Speaking of analysis, there is actually nothing to analyze. Knowing the relationship between these pseudo-elements, except that before and after need to add content attributes, the other three are no different from ordinary label elements in specific applications.

special attention items

Knowing the existence of these pseudo-elements, is there a feeling of happiness? A progress actually contains so many pseudo-elements, just like a component, oh yes, this is originally a "component". So next, can we start to write styles and make effects right away?

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

Open the page and take a look, do you find something wrong?

This is definitely not right. Isn't the green bar set and the red value set? But why didn't it work? And the border of the element has not come out, why is this?

In fact, this is mainly because we have progress one attribute, which needs to be added to 0607cf23bc44c1.

progress {
  -webkit-appearance: none;
}

Now if we look at it again, we will find that the world has begun to change.

appearance

The main function of this attribute is to change the appearance of the element, and progress built-in appearance style. The default value is auto , which means that this element will likely change with the theme of the system. There is such an introduction in MDN:

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

At the same time, the indispensable will be accompanied by a lot of attribute value effects, which will not be explained here. But it needs to be noted that if we want to add some special components, especially form types, whether there are default appearance attributes or not, just add them at will. Of course, the safest way is to look at the computed style through DevTools.

Summary

First of all, please note that there is no in-depth description of the corresponding attributes in the text, such as value , min and max , which are not easy to explain; secondly, I mainly want to mention to you that in progress we can use value and other attributes to be faster Obtain the value of a progress bar, and then combine progress to make some page effects.

Yes, the main thing I want to say is this.

Some people may think that the effect of the demo is very ugly, that is inevitable. I don't have the most direct demo at hand, but I suddenly had such an idea, so I wrote such a brief introduction. But please be sure to believe that there are 1 progress and 5 pseudo-elements that can be used, which is equivalent to 6 label elements. There are still many things that can be done. For example, adding gradients, animations, etc., will have a good-looking effect.

But it must be noted that this attribute appearance

Related Reading:

• The method of easily realizing the progress bar is meter

First personal public number: Zhiyu Zile ( https://mp.weixin.qq.com/s/jCpZMkzfb9BUEpJdVFHhbw )