Menu
How exactly is Internet Explorer interpreting them, and under which guideline or set of standards?
For instance:
#FFF
is seem as the color white in Google Chrome, for instance, whereas in Internet Explorer (I tested it on 8 and 9) it appears as black.
I code I used to test this was as follows:
<body bgcolor="#ffffff"> vs. <body bgcolor="#fff">
(I am aware that bgcolor is deprecated, it was just convenient for what I was accomplishing at hand).
I am also aware that this is a bug, and that it can be easily fixed by appending a few digits (all-in-all 6) to the hexcode, but I am just interested in seeing the science behind why it occurs, if there is an explanation for it.
740
I was able to recreate it in IE11 as well. As you know, it is a deprecated attribute. I assume your webpage & the browser are trying to interpret the code as HTML5 and there is a bug in their graceful degradation to handle this. So it just breaks.
As @Aaron Vanston points out, using inline style or CSS, you can still use the shorthand hex to apply a color.
I wouldn't even waste my time writing out bgcolor as an attribute. If I came across it in something I was working on, I'd remove it in favor of
style="background-color: #fff"
or the CSS alternative
body {
background-color: "#fff";
}
Since you are "interested in seeing the science behind why it occurs, if there is an explanation for it"...
TLDR:
'Color-values' are not 'universal'.
The abbreviated/shorthand three-digit hexadecimal #RGB form is described in the CSS specification, not in HTML.
As a result, the three-digit form in an attribute other than "style" or inside a <style> tag is not interpreted as a valid color in some browsers.
https://en.wikipedia.org/wiki/Web_colors
In depth:
I'm starting with the CSS 1 spec, Color units (6.3) (as it introduces some terms/concepts I then don't have to repeat), which specifies:
A color is a either a keyword or a numerical RGB specification.
The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette, and their RGB values are not defined in this specification.
BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive }The RGB color model is being used in numerical color specifications. These examples all specify the same color:
EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* integer range 0 - 255 */ EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */The format of an RGB value in hexadecimal notation is a '
#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example,#fb0expands to#ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.The format of an RGB value in the functional notation is '
rgb(' followed by a comma-separated list of three numerical values (either three integer values in the range of 0-255, or three percentage values in the range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed around the numerical values.Values outside the numerical ranges should be clipped. The three rules below are therefore equivalent:
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */ EM { color: rgb(300,0,0) } /* clipped to 255 */ EM { color: rgb(110%, 0%, 0%) } /* clipped to 100% */RGB colors are specified in the sRGB color space. UAs may vary in the fidelity with which they represent these colors, but use of sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards.
In the context of CSS, with regard to browser-support, the only 2 'interesting' things I could find were:
rgb() methods suffer from Internet Explorer 3's non-support for themAccording to the HTML4 spec, the attribute bgcolor was only for <body>, <table>, <tr>, <th> and <td>. (So as far as the legacy spec is concerned, one can not use it on a <div> for example.)
All of them are of the CDATA-type: %Color;
which was defined as:
<!ENTITY % Color "CDATA" -- a color using sRGB: #RRGGBB as Hex values -->
<!-- There are also 16 widely known color names with their sRGB values:
Black = #000000 Green = #008000
Silver = #C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia= #FF00FF Aqua = #00FFFF
-->
The magic phrase here is: "a color using sRGB: #RRGGBB as Hex values".
If I read this wearing a specification-implementor's hat, I must agree that I don't see short-hand 3-digit #RGB notation specified and I would not have implemented it (neither would I have implemented RGB(DDD,DDD,DDD)).
As for HTML5, the bgcolor attribute is obsoleted for all previous (HTML4) specified elements (see above).
That means that, in regard to specification, the format of valid 'color-codes' is not going to change any time soon..
Conclusion:
Accepting only a named color (from a specified/supported list) or a 'hex triplet' (format #RRGGBB) sRGB color-value on the HTML attribute bgcolor is not a bug; it is per spec!
Cross-Browser solution: .. see spec ☺
If one mistakingly specifies a short-hand color-value for bgcolor on a parsing/rendering engine that doesn't support that, then either nothing happens or a unintended color might show; effectively you have entered 'Chuck Norris'-land..
Most notably for MS IE and MS Outlook, the colors will seem almost black. For example: #ff0 (shorthand) will become #0f0f00 (instead of #ffff00). Another example: #07c will become #00070c, etc.
However some other implementations turn #ff0 into #000ff0 and #07c into #00007c!!
If one mistakingly specifies an RGB(RRR,GGG,BBB) value for bgcolor, all kinds of colors can appear, for example RGB(255,255,255) can become a very dark shade of green source, etc.
So here we have a fun example where Microsoft's Internet Explorer (all known versions, including IE11) did follow the spec and a lot of people still complain..
I found countless bug-rapports regarding "the 3-digit color-value shorthand 'bug' for the bgcolor-attribute" (spanning over 15 years) addressed at for example MS IE, alternative browsers using MS IE HTML parse/rendering engine and the majority of local-app/webbased Email-clients like Gmail, (all versions of) Outlook(-Express), Lotus Notes, Android, etc. etc. etc. (for example 1, 2, 3, 4, 5, etc.)
Why the complaints/bug-rapports?
Because some other browsers (like FireFox, Chrome) did/do support color-values in other formats then #RRGGBB on HTML's attribute bgcolor.
Why do others support it?
I have just 2 guesses: (a) It's a leftover from "BrowserWar 1" where one of the battles was around "My browser can make 'sense' of bigger cr@p-code then the competitor's", but somewhat more likely would be (b) reusing the code from the CSS color-value parser... eventually I would have done that as well
Extra:
Why would anyone anno 2015 still care about bgcolor?
Why does that still generate such an amount of bug-rapports and questions?
The answer is HTML Email...
In theory (to the unsuspecting web-developer) it's 'just HTML and CSS'..
In practice it's amazingly hard (1) to get right. Think: all cross-browser issues that ever existed to the power of 3 !
It has to work on far more E-mail clients on numerous platforms (loads of 'legacy' applications that are actually still in use), it must also work in web-based clients like Gmail, AOL, Yahoo, Hotmail, etc. etc.
Not only must they code for the lowest common denominator imaginable (much techniques were already considered ancient a fat decade ago), they must even try to 'fit in' with the layout/style of some of the web-based clients.
Their typical structure is one big background table, then one div, then one main table, and nested tables if needed...
To put things into further perspective, according to litmus (anno 2014):
"It turns out that the most reliable way of coding background colors is to use the HTML bgcolor attribute with a 6-digit hex code on the table and td level"
Clearly this 'mess' is not going to dis-appear soon and a common thing for a web-developer is to code/design HTML e-mail... Therefore I think that a good complete understanding (and answer to this matter) is still very relevant anno 2015 and the near future.
Hope this helps!
PS: MS IE's filter: progid:DXImageTransform.Microsoft.gradient also doesn't accept 3-digit hex shorthand color values, but now that one is reminded of the notion that 'Color-Values are not Universal', this is less of a surprise (and not a bug unless it was specified that it would accept such values).
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
