15
Star[Rating] Wars - The MadsAfif Menice [An even better star rating system and a comparison]
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...
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.
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
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.
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").
This is where we start to see some really clever tricks.
Darth Stoumann decided to use an input that is weak with the force.
Picking a worse element to exclude people is a typical trick of the Sith.
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.
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!
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!
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?)
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:
or
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!)
15