DEV Community

Cover image for Intermission... and some fun with HTML4
Alvaro Montoro
Alvaro Montoro

Posted on

Intermission... and some fun with HTML4

This ends the "classic" color formats. By that, I mean the ones that have been around for a while and that all browsers support (at least the comma-notation).

Now, we are going to review some new formats introduced as part of the CSS Color Module Level 4. They are a little less common, a little less supported –or not supported at all, to be exact (at least not at the moment of writing this post)–, and a little less known.

...but before all that, let's talk about an old curiosity from HTML4. A little silly color thing that is no longer part of the standard, but that many browsers still support for legacy reasons.

Fun with HTML4

Note: bgColor attribute is deprecated and should NOT be used. This section is just for fun and to show what's not to do.

In previous versions of HTML, there used to be an attribute and property called bgColor that allowed setting the background color of different tags and elements (e.g. <body> or <table>):

<body bgColor="skyblue">
  ...
</body>
Enter fullscreen mode Exit fullscreen mode

The value of bgColor was supposed to be any color value as specified in this post, but in reality, it accepted anything. This means that any string would be considered and parsed... and brought us one of the most interesting Stack Overflow questions for HTML.

As explained in more detail in this 2004 post from Sam, this happens when browsers try to parse the string as a color (a behavior inherited from Netscape). The basic idea is that the string is broken in 3 equal-size parts, adding zeroes for missing or incorrect characters.

This graph shows a simplified version of how it works (refer to the blog post for more details):

Graph with how bgColor works

And here you can see it working (again don't do this):


Now that we had a little fun break with colors, we are going to review the new color formats and functions new to the CSS Color Module Level 4.

Top comments (0)