私の好きな色はチャック・ノリス・レッドです

, the browser will do its best to close it up and render it out.

This forgiveness is the reason behind the funkiness. Browsers simply try to forge ahead with the invalid value and hope it'll work. In the past web browsers all handled invalid values a bit differently, but now it's all outlined in the "rules for parsing a legacy color value" part of the HTML spec. A surmised version of the parsing outlined there is as follows:

1. Initial Cleanup:

   • If an octothorpe (#) is located at the start of the value, it's removed.
   • The colour attribute only accepts hexes, so there isn't a point keeping it.
   • Example: "#FF0000" becomes "FF0000".

2. Replace Invalid Characters:

   • Any non-hexadecimal characters (anything not 0-9 or A-F/a-f) are removed and replaced with '0'.
   • Example: 'abcxyz123' becomes 'abc000123'.

3. Standardise Length:

   • While the string's length is 0 or not divisible by 3, append '0'.
   • Examples:
     • "F" becomes "F00" (padded to length 3).
     • "FFFF" becomes "FFFF00" (padded to length 6).
     • "FFFFFF0" becomes "FFFFFF000" (padded to length 9).

4. Split into Red, Green, and Blue:

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

5. Handle Length:

   • If any component is longer than 8 characters, remove the characters from the left until it's 8 characters long.
     • Example: "123456789" → "23456789"
   • While the length is greater than 2, and all components start with '0', remove the leading '0' from each component.
     • Example: ["000F", "000F", "000F"] becomes ["00F", "00F", "00F"] which then becomes ["0F", "0F", "0F"].
   • If length is still greater then 2 keep 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 create the colour.
   • Example: ["AB", "DE", "12"] becomes ABDE12.

I've written a small tool over on CodePen that will take any inputted value, break down the processing step by step, and output the colour as it would be handled. 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 know this happens and why. The next task is obviously to have some fun with it. Finding words whose computed colours correlate with them is great fun. For example, 'Sonic' gives us a lovely blue like the hedgehog. I've put together a little table of some of these coincidental match ups:

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

Interesting parsing in the modern era

So, that's all well and good, but it's old news. The color そして bgcolor 私たちの解析の冒険を可能にした属性は HTML 4 の名残です。それらは時代遅れです (ただし、驚くほど多くの Web サイトでまだアクティブに使用されています)。とはいえ、そういった癖が完全になくなったわけではありません。 CSS には、無効なカラー値の処理に関して、独自の興味深い特徴があります。最新のブラウザのほとんどは、値を完全に拒否するのではなく、値をクランプします。ブラウザに rgb(300, -50, 1000) を投げても失敗しません。それを rgb(255, 0, 255) に変換すると便利です。

ウェブの基本的な許しの原則、つまり「チャックノリス」を赤として解析できる固有の柔軟性は、たとえそうする理由が古く、愚かで、サポートされていないとしても、どこにも行っていません。最新のブラウザは、たとえ私たちが無意味なことを投げかけたとしても、コードを機能させるために後ろ向きに力を尽くしています。 HTMHell のページ内にある呪われた例の中で、この許しが実際に動作しているのを見るのに、それほど時間はかかりません。それぞれの恐ろしいスニペット、それぞれの疑わしいハック、それぞれの「うまくいくのになぜ」という瞬間が存在するのは、ブラウザーが単に私たちの「間違い」をレンダリングすることを放棄しないからです。

ウェブは、テクノロジーと回復力の両方の基盤の上に構築されています。 精神。これにより、1996 年の Web サイトを最新のブラウザで表示できるようになりました。これにより、CSS の半分が無効な場合でもページを読み込むことができます。それが魔法になるのです。

ブラウザはもっと寛容で完璧を強制すべきだという冗談を聞いたことがあります。ジャンクを許可すると、Web が何らかの形で「悪い」ものになります。完璧なウェブは退屈なウェブになると思います。もしそれが「完璧」だったら、私はここで文章を書いていないでしょう。それは、私たちが何を投げても、ウェブを機能させることです。私にはそれ以外の方法はありません。

結局のところ、完璧な Web では、「chucknorris」は別のエラー メッセージにすぎないでしょう。そして、そのどこが楽しいのでしょうか?

リソース

デクラン・シドローについて

フロントエンドの開発者、デザイナー、開発者、そして超強力な情報スーパーハイウェイの熱心なユーザーです。

Webサイト： 谷の岩
フェディバース: @[email protected]
ブルースカイ: @vale.rocks

その他の記事