Re: Any way to get RGB codes of/for CSS2 system color names???

[Ralph Fox]

On Thu, 10 Jul 2008 21:42:00 +0200, in message <b4pc74lpna9ud8c75...@4ax.com>,
RevX wrote:

> CSS2 supports the retrieval of system colors and use of them
> via names, see:
> http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html

And the CSS2 "system colors" are deprecated in CSS3
• http://www.w3.org/TR/CSS21/ui.html#system-colors
• http://www.w3.org/TR/css3-color/#css-system

> But is there any way (in Javascript) to get the RGB/Hex values
> of these named system colors? And if yes, how?

Tested in Firefox 2.0.0.15...

1. Go to the URL you gave above:

http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html

2. When the page has loaded, enter this into the URL bar...

javascript:window.alert(window.getComputedStyle(document.getElementsByTagName("td")[6],"").backgroundColor);

FYI, document.getElementsByTagName("td")[6] is the cell
in the centre column whose background colour is ActiveCaption.

So to answer your question (at least for Firefox 2.0.0.15)
(i) put an element on your page styled with that system colour;
(ii) then use window.getComputedStyle() on that element.
Limitations: if someone has un-checked the following setting in Firefox
[ ] Allow pages to choose their own colors, instead of my selections above
then this will not get the actual system colours, but the colours which
the user has forced the browser to use.

There are no guarantees that this will continue to work.
If you read the CSS3 draft at http://www.w3.org/TR/css3-color/#css-system
it says...

| Note. The computed value of a System Color keyword value is the keyword itself.

[crosspost and followup to newsgroup mozilla.web-developers.general]

--
Cheers,
Ralph

[RevX]

Thanks for replying,

getComputedStyle() would have worked, but only for Firefox
(and Opera) but not for Internet Explorer, but I needed
a solution for both. So, the solution is to make browser-
specific implementations where Firefox can use something
like this

window.getComputedStyle(myElement,"").backgroundColor;

and for IE I've found this solution on the net:

function getRealBackgroundColor(myElement) {
var oRG=document.body.createTextRange();
oRG.moveToElementText(myElement);
var iClr=oRG.queryCommandValue("BackColor");
return "rgb("+(iClr & 0xFF)+", "+((iClr & 0xFF00)>>8)+", "+((iClr &
0xFF0000)>>16)+")";
}

Cheers,
Michael.

On Sun, 13 Jul 2008 21:05:52 +1200, Ralph Fox <-rf-nz-@-.invalid>
wrote: