Why do browsers render "chuck norris" as a colour? | @foone | Twitter

Man, what a fascinating thread on the bizarre reasons that browsers will parse words into colours. To sum it up:

  • Any word will be parsed into a hex code in order for things like color: red to work with backwards compatibility in CSS;
  • The way that conversion works is to change any non-hexadecimal letter into a 0, i.e. "chuck norris" becomes "C00C0 000000";
  • But that leaves codes that are too long for the hex code format, so the next step is to shrink the string down to the maximum six characters;
  • However, rather than just shortening to six characters, first the parser increases the number of characters until the total is divisible by three, then it splits the string into thirds, then concatenates each third into two characters and stitches it all back together again 🤯
    • Why tho? 🤷‍♂️
  • So you end up in a situation where "chuck norris" becomes a vivid red, whilst "chuck norr" is a slightly ill shade of yellow...
  • And all of this matters because of hidden text in email spam (yeah, wow); if colours parse out differently, then spam is harder to identify, so the whole weird algorithm is an offical W3C standard. Brilliant 😂

Explore Other Notes

Newer

We like what we choose

We like what we choose. Not the other way around. [...] If you had grown up somewhere else or some time else, there’s little doubt that you’d prefer something else. The things we […]

Older

The markup de-crapulator

A humorous but useful tool that strips out all the mess that things like Styled Components and React make out of HTML and lets you properly view the source of a page. (and yeah, I use those same […]
  • Man, what a fascinating thread on the bizarre reasons that browsers will parse words into colours. To sum it […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.