Recently, a lot of folks tried their best to provide a star rating system. Now it's time to bring THE "star rating" that will change the world!
I called it: The ONE star rating
Click here if you want to catch up with the previous episodes before continuing
Article No Longer Available
Article No Longer Available
Star-Rating Using A Single Input
Mads Stoumann ・ Jul 3 '21
#html
#css
#javascript
#webdev
Scalable "star rating" without JS (and no SVG or image for the star)
Temani Afif ・ Jul 4 '21
#css
#html
#webdev
#beginners
Star-rating using Unicode stars
Andrew Bone ・ Jul 5 '21
#a11y
#beginners
#webdev
#css
Article No Longer Available
Star rating in the Terminal
Siddharth ・ Jul 6 '21
#javascript
#tutorial
Why have multiple stars when we can do the job with only one star? A unique star that can hold all the information. Let's think outside of the box and build the future of rating systems.
See it in play:
Thanks to my geometry superpower, I divided the star into 5 parts and the number of selected parts will define the rating. So we have our 1 to 5 rating system with only one star!
Why this system will beat all the others?
It's compact: All the information is held in a small space. The space needed for one star.
It's outstanding: Everyone is getting bored with the old-school star rating. This one will impress your visitors and they will want to rate you with a 5/5!
rtl or ltr ??: stop thinking about that. We no more have a straight direction but a circular one. Do we have direction with clocks? No, we don't! Same thing here, it's a universal circular direction.
And let's not forget all the other advantages:
✔️ No JavaScript.
✔️ No complex HTML code.
✔️ A small CSS code.
✔️ No SVG, No images.
✔️ Works with keyboard navigation.
How does it work?
I kept the same HTML code as my previous implementation. The inputs and one extra element.
I first start by placing all the inputs (and the extra element) above each other inside a square element.
- The square is defined using a fixed width and a ratio (you can also set the height equal to the width)
- Thanks to
grid-area:1/1, I can have all the elements above each other without the need of usingposition:absolute - I add
width:100%;height:100%to the inputs so they cover the whole area and I make them invisible (but still interactive)
Then, I create the star shape using the <i> element and clip-path. That shape will have 3 background layers
- The bottom one that covers the whole star (the grey coloration)
- The gold middle layer that will define the selected parts. For this, I will use a
conic-gradientwith a72degstep (360deg/5) controlled with the variable--p. - The top layer is similar to (2) with a semi-transparent color and controlled with the variable
--l. Yes, this one will respond to the hover effect.
Now the real trick is the position and shape of our inputs.
Each one is clipped to the top part of the star like shown below:
At this step, all of them will define the same part of our star. We have to rotate them so each one will get on the top of a different part.
.stars input:nth-of-type(2) {transform:rotate(72deg)}
.stars input:nth-of-type(3) {transform:rotate(144deg)}
.stars input:nth-of-type(4) {transform:rotate(216deg)}
.stars input:nth-of-type(5) {transform:rotate(288deg)}
Now each input is placed on the top of one part of the star and clipped to that part.
I think everyone knows the rest of the story. On :hover or :checked I change the variables I described previously and we have our ONE star rating.
That's it! With a simple code, we get an innovative star rating. You can easily adjust the size, the circular direction and it does work with default values:
Top comments (54)
Love it!
Most people would think that you have won....but if you think a 1 star version is going to end this then...
p.s. I love that the Star Wars silliness is continuing! I wish I was a mega fan so that I could use some obscure references!
I still have a lot of secret weapons for this war while you folks already used all your Mana!!
*furiously looks up references
There are nine million bicycles in Beijing
That's a fact
It's a thing we can't deny
Like the fact that I will love you till I die
That is what Katie Melua sang in 2008 : youtube.com/watch?v=eHQG6-DojVw
I have the utmost respect for people doing great stuff with HTML+CSS only
Then again, I have the utmost respect for people riding uni-cycles.
There might be 9 million bicycles in Beijing,
there are about 22 million bicycles here in the Netherlands (aka Holland).
And I have yet to see one person riding a uni-cycle to work.
Websites without any JavaScript are possible; but let us be honest.. that is like riding a uni-cycle.
You don't want users messing around with N lines of (error prone) HTML and M lines of (error prone) CSS when all you they have to do is:
The <one-star-rating> Web Component
Using JavaScript to create a Custom Element with shadowDOM allows for optimized HTML/CSS
.starclass<div>Here is all code required:
Buy a uni-cycle
If you really want one, here is a good site: hollandbikeshop.com/en-gb/children...
As you can tell from the URI, not many adults buy uni-cycles here in Holland.
But what about an N-star rating?
Here is my 2-wheels version: dev.to/dannyengelman/twinkle-twink...
Star wars... ROTFLMAO
biddi biddi biddi
I am never against the use of JS ;) I simply want to push the limit of CSS to see what we can do with it and I agree that the idea of web component is good.
I already saw your other post, too bad it didn't get a lot of success.
This doesn't work, at all, on mobile.
It does, for me atleast. Maybe you are on Safaria
Yes, I am on Safari. Not a great solution if it doesn't work on the most widely used mobile browser 🤷♂️
Well... Safari is not the most used browser...on mobile its Chrome to.
remove aspect-ratio and replace it with height and it will work on your mobile.
Sorry but targeting all the devices is not my goal here (or any of my posts). I want to explore the future of CSS and use the new things. I don't want to wait 5 years until all the browsers support all the features to use them.
I agree with you, I totally ignore Safari market and build Production sites only for modern browsers, if you use Safari well you can't use my Site so your problem... and btw Chrome on IOS is not Chrome its Safari under the hood. Apple politics....
That's a pretty poor attitude to have.
It may not be most popular but mobile Safari still has a 23% market share. You're alienating a lot of users with that attitude.
It's also just laziness. Safari is absolutely a modern browser.
You have understood my comment wrong. Are you aware about the new feature that are released or planned to be released each day? do you know how much time such feature will take to be supported?
I am not that guy that will wait 5 years for a feature to be supported in all the browser to write an article about it. I am the guy that will write articles about the new features as soon as possible so people know the future of CSS.
I never claimed in any of my articles that I am building things to be used for production right now.
I am not alienating any users. If you are looking for something supported in all the browsers (including IE) to be used right now then ignore my articles because this is not what you will find on them. If you are intrested to see the new CSS features and what can be done with them, then I invite you to read my articles.
The same logic is done in all the fields. A lot of people talk about their invention and ideas that will be available to the public in many years.
I was responding to Ivan's comment.
I know its not the best way to develop if you want to support as manny people as possible but Apple lags behind most of the time and doesn't care much about the web which is very sad, they need to understand that App Stores can't replace a browser.
That may be true but with that attitude you're alienating a large user base, regardless of how you feel about Apple.
@inhuofficial @madsstoumann @link2twenty @lapstjup @siddharthshyniben
The star wars is not over !
Well, you'll need 24 hours to recharge. By that time, I'll bring my own weapons!
Nope, I doubt that this is intuitive enough.
Everyone knows how to rate the 5 star thing. Here I needed to click around to understand your rating system.
But I think it would be nice for displaying the total result.
Besides that, it looks very neat. Good job!
of course it's not intuitive since it's a new concept. Anything new need a lot of time to be widely adopted and known by everyone.
You think the classical 5 star rating was intuitive since the beginning. I don't think so.
Ok ok, I agree with you :)
Maybe an outline for all segments would help :D
I hope I don't hurt your motivation if I give you two more problems I see with it:
I am not following any standard, I am creating my own standard ;) I already talk about the direction in the article and said that I don't want to deal with left-to-right or right-to-left. I invented a new "circular universal direction".
You see this as a problem but I see it as a future solution to the actual problems ;)
I very like it from a conceptual perspective but UX on mobile (when Star is smaller) is very low.
Alternative for small Stars: Tap to fill IT step-wise (1 Tap is one Part, 5 taps is a full Star)
I made a new version here: dev.to/afif/the-safe-star-rating-t... similar t o what you suggested ;)
Yes good idea. The concept is new so I still didn't explore all the drawbacks and the optimizations. Let's say this is the "Beta" version and maybe in the future a more robust one will come ;)
I've been keeping up with this saga since day one... I'm now convinced - dev is my new home. I think I'm going to like it here.
first, no JS make you code faster using the native CSS feature then it's more funny to make creative things without JS ;) With JS you can easily achieve almost anything. You can pick a plugin from the net and build a 3D Star rating without any issue.
A 3D star rating....where are your spies, where?!
you cannot imagine it, it's beyond your limited imagination 😈😈
Wait are we going full threejs...
Coz if we are... 😅😉
This is such a novel design, I'm not sure where to go next without JS. 😅
My powers are weak.
Unfortunately from UX (accessibility) perspective, this seems to be step back. Every touch element should be at least 10x10mm (55px). Also gaps between elements at least 3mm. It makes the star to be at least 140px x 140px. Don't need to do calculation to see that not space is saved by your solution. It rather looks like your solution takes more space than 5 starts in row :)
I won't use the word unfortunately. This is a new design/idea of rating so for sure it cannot be something good and cover all the needed aspects (good UX, accessibility, etc). Like any thing new, this a first draft that can be improved and if you read the next article I wrote after this one you will see that I have improved the ONE star with another ONE star version
😅
Too much? 😉
Damn, I wanna go back to when @afif was building 100 loaders.
CSS wars.
Though, the best solution will remain to be having no rating system in the first place. 🤣
I will be back to the 100 collection ;) but I cannot leave a war without winning it! people need to know who is the boss here !! :p
hahaha, best of luck to all the kings here
poetry
nice
Great idea, thanks for sharing
Some comments have been hidden by the post's author - find out more