This content originally appeared on DEV Community and was authored by InHuOfficial
What started as an innocent post on creating an accessible star rating system that was useful and pointed out the problems with most solutions has descended into madness. In this post I end the star (rating) wars!
People have started creating star rating systems that don't use stars or anything even resembling a star, people are making inaccessible rating systems (the very thing I was rallying against - and @lapstjup is certainly not alone!), some are even making star rating systems that don't work on 20%+ of browsers.
Well you know what, lets end this right now as I have:
Here it is, a star rating system that:
- uses something resembling a fucking star (the number 1 prerequisite for a star rating system!)
- works all the way back to IE9 and beyond! ✅
- is tiny at 168 bytes all in! (and that includes the label which could probably be shorter!) ✅
- has validation built in ✅
- is easy to use ✅
- requires no JS ✅
- requires no CSS ✅
- is accessible (kind of, the control type is confusing, although if this wasn't silly you could use the
patternattribute to fix this! Also as I stated in my other posts you should use explicit labels rather than implicit ones (for="id"style labels)) ✅ - even includes submission to your server (if you set the action - might double the size of the control though!) ✅
I present to you the winner of the star (rating) wars
So there you go, it is all over, go home you all lost.
In case you wanted to catch up properly
This saga has been insanely funny, here are all the posts I can remember as part of this so far (I am sooo sorry I started this! ??):
An actually useful post:
lapstjup came up with an interesting JS powered version, just has a few accessibility issues but overall a great contribution!
@madsstoumann fired back and I have to say I absolutely love this idea and I am stealing it, if you read any read this one as it is accessible and works in everything other than IE!
@afif
showing off his CSS skills as always!
@link2twenty
just got this one out before my rebuttal piece (and is better than mine)
Where it all started to become very silly!
Me again includes my lightsabre star rating system at the bottom - this is where it all started to go wrong!
@siddharthshyniben
came up with a version for the terminal
A great take on star rating systems that shows us what we will be able to do in the future with CSS once the browser vendors catch up! Very educational and a clever concept too!
A better terminal version, taking the concept of the previous post but with ASCII text!
Simple but effective, accessible too!
This is where "star rating" started being stretched
Yet again, not even using stars anymore!
@lionelrowe
decided to spice things up with a rating that introduces negative ratings like rotten tomatoes! But doesn't use stars once again!
@adam_cyclones
decided to put a very silly one in from their phone! Sorry Adam I only give you one star for this!
All caught up now with this post being the latest!
You silly billy
Yes I know! Sorry for polluting the feed with this crap.
I am hoping everyone just gives up now because you know what, star rating systems are actually pretty rubbish as they don't give an accurate picture!
This content originally appeared on DEV Community and was authored by InHuOfficial
InHuOfficial | Sciencx (2021-07-08T21:32:45+00:00) Star rating system – only 168 BYTES ?, no JS, no CSS, no images ?, Accessible (kind of)…the war is over. Retrieved from https://www.scien.cx/2021/07/08/star-rating-system-only-168-bytes-%f0%9f%98%b2-no-js-no-css-no-images-%f0%9f%98%a8-accessible-kind-of-the-war-is-over/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.