[whatwg] CSS2 system colors in legacy color values

Mon May 31 02:51:14 PDT 2010

On 2010-05-31 09:57, Roger Hågensen wrote:
> On 2010-05-23 23:49, Simon Pieters wrote:
>> On Sat, 22 May 2010 21:06:53 +0200, L. David Baron 
>> <dbaron at dbaron.org> wrote:
>>> The "rules for parsing a legacy color value" in
>>> http://www.whatwg.org/specs/web-apps/current-work/complete/common-microsyntaxes.html#rules-for-parsing-a-legacy-color-value 
>>>
>>> specify that CSS2 system colors should be accepted, and that they
>>> should be converted to a simple color.
>>> ...
>>> What was the motivation for adding support for CSS2 system colors
>> IE compat.
>>> (which I would note are deprecated in css3-color) to legacy HTML
>>> color values?  What implementations support them,
>> I think WebKit and IE.
>>> and do they respond to dynamic changes properly?
>> I don't know.
>>
>> It appears that Opera and Gecko don't support system colors. I 
>> wouldn't mind not supporting them, but it could be interesting to 
>> research how many pages it affects.
>
> Interesting to know!
>
> I'm kinda surprised that there is no support for floating point colors 
> though.
> Althought I guess that "rgb(x%, x%, x%) An RGB percentage value (e.g. 
> rgb(100%,0%,0%))"
> is as close as you get to that... Does percentage rgb color support 
> things like 85.41% though?
> I hope so as only rgb(x%, x%, x%) is tentatively gamut independent.
>

Just did some tests! It seems that the latest Firefox, Opera, IE, and 
Chrome at least supports fractional percentages.
So rgb(0%,0%,80.00% equals 0,0,204
and rgb(0%,0%,80.99% equals 0,0,207
and rgb(0%,0%,80.50% equals 0,0,205

I wonder why the specs don't mention this support though,
and I guess that a value of 200% (what, like infared?) would mean twice 
as red as SRGB red (100%),
and in the case of these browsers they clamp anything higher to 255.

PS! To any Chrome folks here, seems like Chrome has a slight rounding 
"bug" compared to the other 3 browsers.

Example code:
<html>
<head>
<title>Percentage Fraction color test</title>
<style type="text/css">
       li {
         color: white;
         background: rgb(0%,0%,80.00%);
         margin: 12px 12px 12px 12px;
         padding: 12px 0px 12px 12px;
         list-style: none
       }
       li.fraction {
         color: white;
         background: rgb(0%,0%,80.50%);
         margin: 12px 12px 12px 12px;
         padding: 12px 0px 12px 12px;
         list-style: none
       }
</style>
<script>
     function getStyle(el)
     {
         if (el.currentStyle)
         {
             return el.currentStyle.backgroundColor;
         }
         if (document.defaultView)
         {
             return document.defaultView.getComputedStyle(el, 
'').getPropertyValue("background-color");
         }
         return "Don't know how to get color";
     }
</script>
</head>
<body>
<ul>
<li id="blue1">This should be RGB 0,0,204 (#0000cc) and it is: 
<script>document.write(getStyle(document.getElementById('blue1')));</script></li>
<li id="blue2" class="fraction">This should be RGB 0,0,205 (#0000cd) and 
it is: 
<script>document.write(getStyle(document.getElementById('blue2')))</script></li>
</ul>
</body>
</html>

-- 
Roger "Rescator" Hågensen.
Freelancer - http://EmSai.net/