Star rating system - only 168 BYTES 😲, no JS, no CSS, no images 😨, Accessible (kind of)...the war is over

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.

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 pattern attribute 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

(and yes, I am of course joking!)

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:

5 star rating system - ACTUALLY accessible, no JS, no WAI-ARIA and Semantic HTML! ⭐⭐⭐⭐⭐ [Easily converted to any framework too!]

InHuOfficial ・ Jul 2 '21 ・ 7 min read

#a11y #css #html #webdev

lapstjup came up with an interesting JS powered version, just has a few accessibility issues but overall a great contribution!

Implementing a Star Rating component in Vanilla JS

Lakshya Thakur ・ Jul 2 '21 ・ 4 min read

#javascript #webdev #uiweekly

Star-Rating Using A Single Input

Mads Stoumann ・ Jul 3 '21 ・ 3 min read

#html #css #javascript #webdev

Scalable "star rating" without JS (and no SVG or image for the star)

Temani Afif ・ Jul 4 '21 ・ 4 min read

#css #html #webdev #beginners

Star-rating using Unicode stars

Andrew Bone ・ Jul 5 '21 ・ 4 min read

#a11y #beginners #webdev #css

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!

Star[Rating] Wars - The MadsAfif Menice [An even better star rating system and a comparison]

InHuOfficial ・ Jul 5 '21 ・ 6 min read

#webdev #html #css #javascript

Star rating in the Terminal

Siddharth ・ Jul 6 '21 ・ 4 min read

#javascript #tutorial

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!

The ONE star rating system — the future of rating

Temani Afif ・ Jul 6 '21 ・ 3 min read

#html #css #webdev #beginners

A better terminal version, taking the concept of the previous post but with ASCII text!

The SUPERFLEXIBLE star rating system – the future of star rating in the Terminal

Siddharth ・ Jul 7 '21 ・ 2 min read

#javascript #tutorial

Simple but effective, accessible too!

Star-rating with simple animations (the saga continues)

Andrew Bone ・ Jul 7 '21 ・ 3 min read

#a11y #beginners #webdev #css

This is where "star rating" started being stretched

Mood Selector Component

Mads Stoumann ・ Jul 7 '21 ・ 1 min read

#html #css #webdev #showdev

Yet again, not even using stars anymore!

Unicode mood selector (star-rating)

Andrew Bone ・ Jul 8 '21 ・ 5 min read

#a11y #showdev #css #webdev

Rotten Tomatoes 🍅 star rating system ⭐ with Web Components 🎆

lionel-rowe ・ Jul 7 '21 ・ 4 min read

#html #css #javascript #tutorial

Star rating with nothing but text!

Adam Crockett ・ Jul 6 '21 ・ 1 min read

You silly billy

Yes I know! Sorry for polluting the feed with this crap.