Author: Zhang Min

This article is produced by a member of YFE, please respect the original, please contact the public account (ID: yuewen_YFE) for authorization to reprint, and indicate the author, source and link.

It’s a little story of inquiry and inquiry.

Why is CSS used to implement star rating ideas?

Star rating like the above is a very common requirement, I originally with the help of JS implementation, did not meet much challenge.

Later, When Teacher Zhang was reviewing my code, he mentioned that type=”range” should be realized. At that time, I could not figure it out even if I wanted to, because my brain was confused.

Since I wrote the star rating function myself, I encapsulated it for the convenience of using it next time, so I wrote a blog JS to realize the scoring component in accordance with the daily habit. The matter was over like this, but later my colleague Wen Bin saw my blog by accident and thought my way of implementing it was not elegant, so he talked with me for a few words:

Later, I continued to optimize my code according to Wen Bin’s suggestion. I was very happy to tell him that I had optimized the code and the effect was very good, so I sent him the optimized code. But he did it with pure CSS, and it was really a monster.

Shock!!! Type =”range” type=”range” That’s amazing. You’re the only one who can think of anything you can’t do. So let’s see how it works

Online demotype=range to achieve star rating function

How to use the star rating function for type=”range”

Is input type=”range” just a simple element?

No, it’s a component, and there’s a special KIND of DOM inside the DOM structure called shadow DOM

From the browser console, we can see that the input type=”range” element contains other elements, but we can’t see it normally. It is hidden, and there is no specific setting.

How do we get him to show it??

To enable shadow-dom display in Chrome, go to setting > Preferences > Elements in the upper right corner of the console and check Show user agent shadow dom.

When we turn that control on, we see a shadow-root node under the input Type =”range” tag. There are a lot of DOM nodes in the node, again confirming that input Type =”range” is not a label, but a component that is not easily detected.

Continue exploring how to customizeinput type="range"The style of the

During the element review, we discovered one thing

Now that you can locate the DOM and see the style, does it make sense to change it? Give it a try and you might succeed.

Oh, it worked!

The two pseudo-elements can be used to modify the style of the element:

::-webkit-slider-runnable-track: indicates the slider groove within the input tag of type range. This is the sliderable area of the slider.

::-webkit-slider-thumb: This is a pseudo-class style inside the input tag of type range that sets the specific style of the range slider. This pseudo-class is only valid in browsers with webkit/blink kernel (i.e. the rest of the slider area).

Then the question was, how do you cover the stars in a manageable number?

It mentioned the pattern mask on the background, try it, maybe there is a harvest.

Input type=”range”, and the color of the picture changes with the background => the color of the pattern changes freely with the background color

The type=range of online demo is used for scoring

Core code:

input[type="range"]{ -webkit-appearance: none; // Remove the browser style width: 100px; margin: 0; outline: 0; } input[type="range" i]::-webkit-slider-runnable-track { background: coral; // Set the color of the pentacle to height: 20px; -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' XMLNS = 'http://www.w3.org/2000/svg' % 3 e % 3 cpath d = 'l1 M6 0. 693 3.67 4.013.476 L8.74 6.89 l. 788 L6 3.964 8.88 l - 3.527 1.974.788-3.964 L. 4.146 l4.013-294. 476 l6 0 z 'fill =' % 23 f67600 '/ % 3 e % 3 c/SVG % 3 e "); -webkit-mask-size: 20px; -webkit-mask-repeat: repeat-x; } input[type="range" i]::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 100%; box-shadow: 999px 0px 0px 999px #E8EAED; }Copy the code

Pure CSS implementation, star rating function, less code, and flexible.

How about compatibility? Can you improve it more?

This should work as long as input type=”range” is compatible.

When I was testing Firefox, I found that the rating failed.

I continued to discuss with Wen Bin how to solve this compatibility problem:

Compatible with Firefox, disabled under Google

Core implementation code:

input[type=range]{ -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' XMLNS = 'http://www.w3.org/2000/svg' % 3 e % 3 cpath d = 'l1 M6 0. 693 3.67 4.013.476 L8.74 6.89 l. 788 L6 3.964 8.88 l - 3.527 1.974.788-3.964 L. 4.146 l4.013-294. 476 l6 0 z 'fill =' % 23 f67600 '/ % 3 e % 3 c/SVG % 3 e "); -webkit-mask-size: 20px; -webkit-mask-repeat: repeat-x; height: 20px; } input[type=range]::-moz-range-track{ background: #E8EAED; height: inherit; } input[type=range]::-moz-range-progress { background: coral; height: inherit; } input[type=range]::-moz-range-thumb { width: 0; opacity: 0; }Copy the code

Rome wasn’t built in a day, using input type=”range” to achieve this function is not overnight, without some hard work, is impossible.

This implementation is very good, so I consider whether to add to the open source LuLu UI, but in the open source UI to consider a lot of situations, such as: if the user wants to customize xx stars instead of 5 stars, the user how to change? The scale is not 0-5, but 0-100… I almost gave up, thanks to my colleague’s advice:

After the integration of the latest code, look forward to the latest theme of LuLu UI, it is expected to external in the middle of the year, ha ha!

conclusion

My colleagues carry a certain encyclopedia in their heads, as if there’s nothing they don’t know. For several times, I asked my colleagues to help me solve the problem. Their heads turned around and the thief gave me the answer I wanted quickly, which was faster than Google. Really happy, really envy oneself to be able to have a group of such big guy colleagues. We can learn from them if there is a better way to achieve it. We can communicate and discuss, and then grow. Choice is more important than effort.

It’s the end of the year, you don’t need to envy me, you deserve it, come and have a try our company, first understand the daily activities of the team, there are activities every month, come and work hard with me, play hard.

No matter you are on the front or back of the technology stack, there is a suitable position for you. You can join us after the interview before the end of the year. Welcome to [email protected].

Working place: Shanghai Pudong Microelectronics port, bachelor degree or above, more than 2 years working experience, resume must be returned.

Refer to the link

  1. Inn storybook: CSS mask CSS3 mask/masks
  2. mask-masks
  3. ::-webkit-slider-runnable-track
  4. ::-webkit-slider-thumb
  5. ::-moz-range-track
  6. -moz-range-progress