DEV Community

loading...
Cover image for The ONE star rating system — the future of rating

The ONE star rating system — the future of rating

Temani Afif
Another Dev guy who love hacking with CSS
Updated on ・3 min read

Recently, a lot of folks tried their best to provide 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 with the previous episodes before continuing





Why having 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 hold 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 of 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 width)
  • Thanks to grid-area:1/1, I can have all the elements above each other without the need of using position: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

  1. The bottom one that cover all the star (the grey coloration)
  2. The gold middle layer that will define the selected parts. For this I will use a conic-gradient with a 72deg step (360deg/5) controlled with the variable --p.
  3. The top layer 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 below:

Star clip path

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)}
Enter fullscreen mode Exit fullscreen mode

Now each input is placed on the top of one part of the star and clipped to that part.

I think everyone know 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:

Discussion (58)

Collapse
inhuofficial profile image
InHuOfficial • Edited

Love it!

Most people would think that you have won....but if you think a 1 star version is going to end this then...

You underestimate my power - Anakin from Star Wars meme

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!

Collapse
afif profile image
Temani Afif Author

I still have a lot of secret weapons for this war while you folks already used all your Mana!!

Collapse
siddharthshyniben profile image
Siddharth

*furiously looks up references

Collapse
dannyengelman profile image
Danny Engelman • Edited

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:

<one-star-rating value=3></one-star-rating>
Enter fullscreen mode Exit fullscreen mode

The <one-star-rating> Web Component

Using JavaScript to create a Custom Element with shadowDOM allows for optimized HTML/CSS

  • no need for a .star class
  • no need for a <div>
  • no bloated whitespace
  • no need for double-quotes on attributes
  • and I probably missed more

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

Collapse
afif profile image
Temani Afif Author • Edited

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.

Collapse
joeattardi profile image
Joe Attardi

This doesn't work, at all, on mobile.

Collapse
siddharthshyniben profile image
Siddharth

It does, for me atleast. Maybe you are on Safaria

Collapse
joeattardi profile image
Joe Attardi

Yes, I am on Safari. Not a great solution if it doesn't work on the most widely used mobile browser 🤷‍♂️

Thread Thread
ivanjeremic profile image
Ivan Jeremic • Edited

Well... Safari is not the most used browser...on mobile its Chrome to.

Thread Thread
afif profile image
Temani Afif Author

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.

Thread Thread
ivanjeremic profile image
Ivan Jeremic • Edited

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....

Thread Thread
joeattardi profile image
Joe Attardi

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.

Thread Thread
afif profile image
Temani Afif Author

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.

Thread Thread
joeattardi profile image
Joe Attardi

I was responding to Ivan's comment.

Thread Thread
ivanjeremic profile image
Ivan Jeremic

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.

Thread Thread
joeattardi profile image
Joe Attardi

That may be true but with that attitude you're alienating a large user base, regardless of how you feel about Apple.

Collapse
afif profile image
Temani Afif Author • Edited
Collapse
siddharthshyniben profile image
Siddharth

Well, you'll need 24 hours to recharge. By that time, I'll bring my own weapons!

Collapse
codinghusi profile image
Gerrit Weiermann

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!

Collapse
afif profile image
Temani Afif Author

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.

Collapse
codinghusi profile image
Gerrit Weiermann • Edited

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:

  1. If it's small, you need to click more precisely than it would be on 5 star.
  2. It's less intuitive to read, because it follows not the standard "read from left to right", what could be a problem maybe
Thread Thread
afif profile image
Temani Afif Author

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

Collapse
jankapunkt profile image
Jan Küster

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)

Collapse
afif profile image
Temani Afif Author

I made a new version here: dev.to/afif/the-safe-star-rating-t... similar t o what you suggested ;)

Collapse
afif profile image
Temani Afif Author

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

Collapse
alecvision profile image
alecvision

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.

Collapse
khajin1 profile image
evalPenny

No JavaScript

What's wrong with using JavaScript?

Collapse
afif profile image
Temani Afif Author

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.

Collapse
inhuofficial profile image
InHuOfficial

A 3D star rating....where are your spies, where?!

Thread Thread
afif profile image
Temani Afif Author

you cannot imagine it, it's beyond your limited imagination 😈😈

Thread Thread
link2twenty profile image
Andrew Bone

Wait are we going full threejs...
Coz if we are... 😅😉

Collapse
link2twenty profile image
Andrew Bone

This is such a novel design, I'm not sure where to go next without JS. 😅

My powers are weak.

Collapse
ben profile image
Ben Halpern

😅

Collapse
link2twenty profile image
Andrew Bone

Too much? 😉

Collapse
barelyhuman profile image
Reaper

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. 🤣

Collapse
afif profile image
Temani Afif Author

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

Collapse
barelyhuman profile image
Reaper

hahaha, best of luck to all the kings here

Collapse
rezi profile image
Tomas Rezac

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 :)

Collapse
afif profile image
Temani Afif Author

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

Collapse
acidmind_bh profile image
David Augustus

poetry

Collapse
jwenjian profile image
Jiang Wenjian

nice

Collapse
pterpmnta profile image
Pter Pmnta

Great idea, thanks for sharing

Collapse
codecustard profile image
Emmanuel Barroga

Really interesting concept.... would love to see how the future plays out and if you might have inspired some developers/designers to create a one-star rating system. Love the idea!

Collapse
manuthecoder profile image
Manu

Interesting....

Collapse
benpai profile image
Benji Grant

I hate this and I love this, thank you

Collapse
thebugcoder profile image
TheBugCoder

COOL! :D

Collapse
srikanth74659 profile image
Srikanth

I adored the concept...

This would also solve the accessibility issue, especially with the RTL to LTR conversion.

Collapse
siddharthshyniben profile image
Siddharth

Nice!

I couldn't have even made anything like this in CSS, but Javascript is another thing, so...Prepare!

Collapse
siddharthshyniben profile image
Siddharth

You are only going to change the world?

Collapse
sfritsch09 profile image
sFritsch09

I would like to see a styled components ⭐

Collapse
sarmd23 profile image
Sarmad

Its good but less convenient somehow

Collapse
llaustin profile image
LL Austin

Absolutly great!
But for most of time, the star rating should be Google schema structure data appove, how about this one ?

Collapse
afif profile image
Temani Afif Author

the schema is not relevant here because it's something you need to add by yourself to let google know and understand the rating.

Collapse
miguelhv profile image
Miguel

I'd use a circle instead of a star. I think it may display way clearer in small sizes 🤷‍♂️

Collapse
karljasen28 profile image
Karl Jasen

Very cool!

Some comments have been hidden by the post's author - find out more