Crossbrowser bar

Good time of day, Habro community!

Most recently, I got an interesting task at work, which I did realize . It was necessary to build a progress bar, which would be fully universal, amenable to any stylization, plus a cross-browser plus (starting with IE7 +)!
')
Here is the final result. Full version of the article can be found here.


As you understand, the task involved not only making, but also using the natural element <progress> to the maximum. Its plus is that it is almost a ready-made solution + semantically correct in this situation. But what was my disappointment when I realized that this element, moreover, that it is very badly styled, is also not supported even in one of the latest browsers.

What with support in browsers?

Today browser support is: Firefox 11, Opera 11.61, Chrome 17.
Such a poor alignment clearly upset me and did not suit me at all ((. Frankly, I was counting on something more, assuming that Safari 5.1 and Internet Explorer 9 would be just as good.

What to do?

In general, for starters, I decided to search in the internet and try to find some useful proprietary things for browsers. In the end, there were three things:

• :: - webkit-progress-bar
• :: - webkit-progress-value
• :: - moz-progress-bar

In short, these are pseudo-elements that make it possible to reach the <progress> element in Firefox browsers and in Webkit.

Intermediate test

Despite the fact that in some browsers there is support for the <progress> element, its styling, even there, leaves much to be desired. For example, Opera does not want to give in to stylization, and for any wrong movement the indicator bar leads to an unnecessary color, and the indicator itself does not work at all in Safari. Therefore, I decided to use the properties found and see what it gives me.

<progress max="100" value="30">  </progress>​ 

 progress { margin: 2em auto; display: block; width: 100px; border-radius : 8px; background: #fff; padding: 0; border: 0; text-align: center; height: 20px; box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5); overflow:hidden; background: -o-linear-gradient(#4c4, #8f8 50%, #4c4); } progress::-moz-progress-bar { background: -moz-linear-gradient(#4c4, #8f8 50%, #4c4); border-radius: 8px; } progress::-webkit-progress-bar { background: #fff; box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5); } progress::-webkit-progress-value { background: -webkit-linear-gradient(#4c4, #8f8 50%, #4c4); border-radius: 8px; } 

And that's what happened:


In Firefox and Chrome, we were able to subdue the progress bar completely, including the frame and the indicator itself. This happened due to proprietary properties (for some reason, the picture was the same as in Opera without them) But unfortunately in Safari this number did not work and even the background disappeared completely. In Opera, the color of the bar became different after I applied the styles to the <progress> element, but I’ll generally keep quiet about IE.

Naturally, in any case, I was going to use the script, but I wanted to reduce its main use to at least a number of browsers.

Definitely one can say about two things. Basic scripts are not needed for Firefox and Chrome, but love for IE6-9 and Safari. But with Opera, I decided not to bathe at all and leave the indicator color on it on the conscience of the developers of this browser.

Task

Before writing the script, you need to summarize our task and decide what we want to get.

• Maximize the <progress> element where possible. Semantics here plays a key role (if it does not harm quality) and therefore it is very important for us to use semantic elements.
• The progress bar should contain a separate text that will display the current percentage of the filling indicator.
• The progress bar should be easily customizable and modifiable. Depending on the class, it should change the width, height, color, etc.
• Our progress bar should work as equally as possible in all browsers, starting with IE7 +

Proceeding from the task, I concluded that in our case a common container would fit in which the <progress> element itself and the second element for the text would be located.

 <div class="psyProgressBar">​ <progress max="80" value="0" class="psyProgressBar__line">​</progress>​ <i class="psyProgressBar__text">​0%</i>​ </div>​ 

Then there should already be a journey through the script, but I decided to leave this part for those who want to read the article in full.

The only thing I will say is that the point is that for “normal” browsers I applied the script only to fill the indicator, and for all other browsers I made a substitution of the <progress> element for the <div> element with specials. a class through which in the end you can stylize our progress bar as we like.

So here I’ll post a ready-made solution , and for those who are already familiar with my style and want to read the whole article, I’m welcome to the article itself . Do not forget about cookies! :)