My favourite colour is Chuck Norris red

This forgiveness is the reason behind the funkiness. Browsers srecommend try to forge ahead with the invalid appreciate and hope it’ll labor. In the past web browsers all regulated invalid appreciates a bit contrastently, but now it’s all summarized in the “rules for parsing a legacy color appreciate” part of the HTML spec. A surmised version of the parsing summarized there is as trails:

1. Initial Cleanup:

   • If an octothorpe (#) is discoverd at the begin of the appreciate, it’s deleted.
   • The colour attribute only accomprehendledges hexes, so there isn’t a point carry oning it.
   • Example: “#FF0000” becomes “FF0000”.

2. Replace Invalid Characters:

   • Any non-hexadecimal characters (anyskinnyg not 0-9 or A-F/a-f) are deleted and swapd with ‘0’.
   • Example: ‘abcxyz123’ becomes ‘abc000123’.

3. Standardise Length:

   • While the string’s length is 0 or not dievident by 3, appfinish ‘0’.
   • Examples:
     • “F” becomes “F00” (pcompriseed to length 3).
     • “FFFF” becomes “FFFF00” (pcompriseed to length 6).
     • “FFFFFF0” becomes “FFFFFF000” (pcompriseed to length 9).

4. Split into Red, Green, and Blue:

   • The first third becomes the red appreciate.
   • The second third becomes the green appreciate.
   • The last third becomes the blue appreciate.
   • Example: “FFFFFF000” becomes [“FFF”, “FFF”, “000”].

5. Handle Length:

   • If any component is lengthyer than 8 characters, delete the characters from the left until it’s 8 characters lengthy.
     • Example: “123456789” → “23456789”
   • While the length is wonderfuler than 2, and all components begin with ‘0’, delete the directing ‘0’ from each component.
     • Example: [“000F”, “000F”, “000F”] becomes [“00F”, “00F”, “00F”] which then becomes [“0F”, “0F”, “0F”].
   • If length is still wonderfuler then 2 carry on only the first 2 characters of each component.
     • Example: [“ABC”, “DEF”, “123”] becomes [“AB”, “DE”, “12”].

6. Putting It Together:

   • Get the final red, blue, and green components, then put them together in that order to originate the colour.
   • Example: [“AB”, “DE”, “12”] becomes ABDE12.

I’ve written a minuscule tool over on CodePen that will apshow any inputted appreciate, shatter down the processing step by step, and output the colour as it would be regulated. Go have a bit of fiddle!

See the Pen Legacy HTML Colour Parsing Demo by Declan Chidlow (@OuterVale) on CodePen.

Some fun examples

So, we comprehend this happens and why. The next task is evidently to have some fun with it. Finding words whose computed colours corretardy with them is wonderful fun. For example, ‘Sonic’ gives us a adocount on blue enjoy the hedgehog. I’ve put together a little table of some of these coincidental suit ups:

See the Pen Word Correlations With HTML Colour Parsing by Declan Chidlow (@OuterVale) on CodePen.

Interesting parsing in the up-to-date era

So, that’s all well and excellent, but it’s elderly novels. The color and bgcolor attributes that apexhibitted our parsing adventures are relics of HTML 4. They’re obsolete (though still in dynamic participate on a upsettingly high number of websites). That isn’t to say quirks enjoy that have fadeed finishly though. CSS has its own set of fascinating peculiarities when it comes to handling invalid colour appreciates. Most up-to-date browsers will clamp appreciates rather than decline them outright -– throw rgb(300, -50, 1000) at a browser and it won’t fall short; it’ll helpfilledy alter it into rgb(255, 0, 255).

The web’s set upational principle of forgiveness -– the inherent flexibility that apexhibits “chucknorris” to be parsed as red, even though the reason it does so is elderly, silly, and unaided –- hasn’t gone anywhere. Modern browsers still bfinish over backward to originate our code labor, even when we throw nonsense at them. It doesn’t apshow lengthy to see this forgiveness in action wiskinny the damnd examples held wiskinny the pages of HTMHell. Each horrifying snippet, each askable hack, each “it labors but why” moment exists becaparticipate browsers srecommend decline to give up on rfinishering our ‘misapshows’.

The web is built on this set upation of resilience, both in technology and ethos. It’s what apexhibits a website from 1996 to still rfinisher in a up-to-date browser. It’s what lets a page load even when half the CSS is invalid. It’s what originates it magic.

I’ve heard people quip that browsers should be less accomprehendledgeing and utilize perfection. That apexhibiting jank originates the web somehow ‘terrible’. I skinnyk a perfect web would be a unacute web. I certainly wouldn’t be here writing were it ‘perfect’. It’s about making the web labor, no matter what we throw at it, and I wouldn’t have it any other way.

After all, in a perfect web, “chucknorris” would fair be another error message -– and where’s the fun in that?

Resources

About Declan Chidlow

Front-finish lengthener, scheduleer, dabbler, and avid participater of the superpowered recommendation superhighway.

Website: vale.rocks
Fediverse: @vale@fedi.vale.rocks
Bluesky: @vale.rocks

More articles