![Cover image for Star[Rating] Wars - The MadsAfif Menice [An even better star rating system and a comparison]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyweqh2m4r7q203o6olr5.jpg)
In a galaxy...not so far away...two Sith decided to create star rating widgets that were not fully accessible, a part of their devious plan to exclude people and exert control. InHuWan CodeObi is our only hope.
In an unusual move for the Jedi, InHuWan decided to down his lightsabre and simply produce a hastily written rebuttal piece to educate the galaxy of the evil that had transpired.
Need to catch up on the previous episodes (I would defo read the articles by Mads and Temani if you haven't already!)?
All caught up? Back to the story...
How the Sith trick you
We do not know which is the master and which is the apprentice, but we know that Darth @afif and Darth @madsstoumann have released propaganda that they have created star rating systems.
But as they use the dark side of the force there are awful problems with both of their "solutions" that continue to exclude people.
One doesn't even work on iPhone
Darth Afif designed a star rating system that doesn't work on Safari.
Darth Afif is renowned for using CSS skills that some would deem unnatural, you can learn these skills, but not from a Jedi.
Unfortunately as these skills are unnatural they do not work for a large proportion of the population and that doesn't even include the ever forgotten planet of the Internet Explorians
Neither "solutions" work on Internet Exploria - an often forgotten but important planet
As with many who use the dark side of the force they deliberately exclude those who use older technology, perhaps as they wrongly think they are an inferior race.
Not everyone has the technological know-how to upgrade their browser. Some are even forced to use Internet Explorer as it is the browser that works best with their screen reader.
In fact 12% of people who use a screen reader still rely on Internet Explorer (although that is changing very quickly, the latest results suggest it might be as low as 3.3% 🤞🤞). But the Sith do not concern themselves with such things.
If you happen to have clients in other Countries then you may also want to look at IE usage in those Countries before ditching it.
They do not label their work properly for fear of being discovered.
Darth Afif simply removed the labels from their work in an evil attempt to make it look like they used less HTML.
But without labels our friends over at NiViDra and JanAloWierS, two little known planets in our Galaxy cannot use this control.
As for Darth Stoumann - their deceit is a little more subtle.
They wrap their control in a <label> in order to make their HTML look neater.
They do not care that Dragon Naturally Speaking and other voice control software does not work well with implicit labels (wrapping a control in a label) and so he should use an explicit label instead (for="idofcontrol").
While one removes labels the other uses a less accessible HTML element to further confusion
This is where we start to see some really clever tricks.
Darth Stoumann decided to use an input that is weak with the force.
Radio buttons have great support (when properly labelled) but input ranges do not offer the same support.
Picking a worse element to exclude people is a typical trick of the Sith.
InHu Wan CodeObi has the solution
His previous attempts at educating the Galaxy failed as his solution required thought.
Here is a much simplified version that should bring balance to the force and give him the high ground in this conflict.
Taking a lot of inspiration from https://bjorn.wikkeling.com/199/pure-css-star-rating.html, there are just a couple of tweaks to the CSS to allow for labels and a proper use of <fieldset> and it works beautifully.
Now everyone can use this control, even those from Internet Exploria, NiViDra and JanAloWierS
To make it easier for the custodians of our galaxy (known as "developers") all you have to do with this is add inputs and labels and the CSS takes care of the rest.
Or maybe some hearts
Or you know what, how about some lightsabres?
Credit goes to https://codepen.io/ncerminara/pen/KzurJ for most of the hard work designing.
Getting the values in JavaScript
The beauty of the above controls is that to get the value is super easy in JavaScript:
var checked = document.querySelector('input[name=rating]:checked).value;
It doesn't get much simpler than that!
Enough of the silliness
In all honesty @madsstoumann created a great control.
It may be possible to make it work in IE using -ms-track, -ms-fill-lower and -ms-tooltip but I couldn't work them out using his method. And if he changed his label from an implicit one to an explicit one it is great.
I would probably use his control if you are using React (as you won't support IE anyway) despite the slightly worse support it is still usable by ~98% of people without issues (and those issues will be more of an annoyance than an actual barrier).
However for ecommerce sites and brochure sites built with HTML, CSS etc. use my version as you may as well have the extra support.
I would say give it 1 year and I will finally be able to say "screw IE" to you all. I cannot wait!
@afif example shows us what the future can hold. We might not be able to use it yet as Safari and IE hold us back, but in a few years when IE does die (because despite the fact I encourage people to support I do want it to die) and browsers all become evergreen it is an exciting prospect! Especially if there is a way to do the same trick but with a range slider.
For now (and not being biased here I promise) I would stick to radio buttons and the above examples in this post.
You might not like supporting Internet Explorer but as I have done all the work for you why not support it anyway?
It requires next to no effort from you.
And remember "live long and prosper" (oh wait...is that the wrong franchise?)
Do you like silly articles like this one?
If you are looking for someone who writes silly articles which occasionally contain useful information:
Perhaps give me a follow or check out one of my other silly articles such as:
Article No Longer Available
or
Article No Longer Available
We had a late contender in the fight!
As there are only ever two Sith, never more, never less I am guessing @link2twenty has killed either Darth Afif or Dath Stoumann.
Check out his contribution where he also uses unicode characters (but better!)
Top comments (30)
@afif and @madsstoumann I decided against an angry rant, this is far far sillier 😋🤣🤣
Well, I came from the future. From where I came, there is no iPhone and no one know about IE, it never exists but I am discovering this in 2021. In my future there is no Safari, we only have one browser called FireChrome (yes firefox merged with google chrome). I was sent from the future to avoid that merge.
Ah and for your information, we no more talk about accessibility in the future because we have discovered a way to control everything with our mind. You close your eyes and you navigate so what I am doing is accessible in 2150 !!
You are useless in the future!
I think I broke dev.to with this post...30 views after 4 hours? That seems little low 😬
That's what you earn when you attack the Boss! The Dev audience is under my control:
is it something that the Xantorus controls? If so can you undo it, I am sat at 99k total views and although I don't normally care I would like to pass that 100k mark this week!
(p.s. you must have done 250k recently if I got my numbers right, if so congrats!)
It's under my control like the Xantorus, the Xerefus and the Xirus are!
and I will probably decrease your views until it reaches 0!
My views are also sitting quite low (compared to my other posts). I have noticed notifications not coming through properly today though so I wonder if the platform's having a couple of issues?
Well I just had my comment throw an error so that may be the case that something isn't quite right.
I have had posts with 150 views total before so it isn't like I have an issue with it, just seems low given how much interest these posts have all garnered lately.
Maybe people have just had their fill of star ratings for the time being 😋🤣🤣
I’m an idiot - it’s 4th July celebrations today as it fell on a Sunday, was bound to be quiet! I put it down to my British ignorance! 😜🤣
Haha brilliant, that would explain the tentacles too! I didn't think we would evolve that quickly!
Dammit, I just did a post about using unicode now you've done it too!
I included your post in the article so you don't feel left out! 😋🤣
Phew, I can put all my insecurities away now 😅
Ah darn it, well the lightsabres aren't unicode...but why are you joining the battle? I can't fight 3 of you 😋🤣🤣
Was just feeling a little left out 😔😉
We practically built the same thing so that is reassuring that I have it right this time!
You are welcome to join the fight but I think we are going to need a new component to work on soon, maybe we all have a go at the
<abbr>element next? 🤣Just reading your article now!
More competition (although in a different area):
Star rating in the Terminal
Siddharth ・ Jul 6 ・ 4 min read
Meanwhile me :-
I do hope you do a follow up post with an updated way of building them it'll be good to see what you've learnt 😁
I had a feeling this would happen... I should join the fight maybe with some terminal star ratings because that's the only thing I'm good at :D
The more the merrier! 😋🤣
I like the simplicity, but the hover states aren't reflecting accurately on Chrome OSX 91.0.4472.106
How do you mean? Not working at all or there is an issue with how they display? And is that for all of them?
When I hover the stars, it does not change the style of the star I am hovering and the preceding stars.
My solution should work without JavaScript, when
accent-coloris supported in CSS./Darth Stoumann 😁
EPIC
Glad you liked my silliness!
LOL, I just noticed the lightsabres. 😂
I just had to given the silliness of the article 😋