Bug 17311 – REGRESSION (3.0.4-TOT): Several pseudocolors (CSS2, originally defined by MS) are badly assigned

• Component: CSS
• Status: NEW

[Greg Harewood]

This is a follow-on from bug 16905, which reported and fixed the color "menu".  I opened this bug when I observed that "MenuText" on "Menu" had bad contrast.

See URL for MS color intent explanation. See attached HTML for example of how colors are used.  See attached image for how IE7 renders the above; it is reminiscent of Windows 95.

The state of affairs seems to be that some colors have been completely omitted, some have been misunderstood, and some provide bad contrast in their intended text/background pairings.

- MenuText on Menu is white on light gray.  It should probably be black on light
gray.

- HighlightText on HighLight is black on lilac for me - i.e. themed text
selection color.  This does not appear to be Microsoft's original intent. 
HighlightText on HighLight is the combo that they use for highlighting selected
menu items.  It should, therefore, on Leopard, be white on blue.  The present
choice might equally represent what it has been used for in the field... but
the general consensus is at least light on dark - and this will give better
odds when web designers mix and match colors.

- CaptionText on ActiveCaption is black on black.  This is unreadable.  It is
the combo originally intended to be for title bars on windows, and is white on
dark blue under IE7.

- InactiveCaptionText on InactiveCaption should follow the same theme but be
paler.

[Greg Harewood]

Created attachment 19077 [details]
Example UI rendered with system colors

[Greg Harewood]

Created attachment 19078 [details]
various examples rendered by IE7

[Adam Strzelecki]

Seems that latest WebKit broke CSS system colors and many of them are now BLACK, see attached screenshots diff between Safari 3.0.4 and WebKit r30153

Colors broken (may be not complete):
ActiveCaption was OSX window header bg, in WebKit is BLACK
ThreeDShadow was dark gray as Safari inactive tab color, in WebKit is BLACK
ThreeDDarkShadow was very dark gray, in WebKit is BLACK

Please bring back old assignment from Safari 3.0.4 as our websites gonna likely look awful with new Safari release based on new WebKit.

Regards.

[Adam Strzelecki]

Created attachment 19112 [details]
Site using CSS system colors in Safari 3.0.4 (OK)

[Adam Strzelecki]

Created attachment 19113 [details]
Site using CSS system colors in latest WebKit r30153 (BAD, most of elements are BLACK)

[Adam Strzelecki]

P.S. I wouldn't call it MINOR severity as it ruins L&F of sites using CSS system colors mapping in Safari :(

<rdar://problem/5740573>

Created attachment 19121 [details]
Proposed system colors for Mac

Created attachment 19122 [details]
Patch to implement proposed system colors for Mac

[Adam Strzelecki]

Hmmm... and what was wrong with the colors in 3.0.4 at all? Why it is necessary to change them?

Anyhow I just have one claim to the proposed colors, ThreeDDarkShadow shouldn't be IMHO black, but dark gray.

If you take Digital ColorMeter with safari... IMHO:
ThreeDFace should be the active tab background color
ThreeDShadow should be inactive tab background color
ThreeDDarkShadow should be tabs outline color

... but anyway I'd be more keen to bring back 3.0.4 colors :>

[Greg Harewood]

Hi.

Mostly I think you have a well-considered new plan that is true to the Windows's intent but uses Mac variations where appropriate.  You show HighLight as light blue, but your current implementation actually takes it from the user-chosen text selection color.  Mine's purple.  Looks nice for text, lousy for menus.  (You could hard-code the light-blue.) You don't explain your reasoning, and I grant you that it is frequently used in the field for text highlighting.  BUt it IS intended for highlighting of menu items, and MS's colors reflect that.  If you've made an informed choice on field usage then I'll shut up, but I just wanted you to know.  Quoting from....

http://www.w3.org/TR/css3-color/

"Highlight  -  Item(s) selected in a control.
HighlightText  -  Text of item(s) selected in a control."

A whole item - like a menu item.  In a control.  Like a menu.

This would imply white on bright blue.

That's all.  You guys are doing a great great job here.  Thank you so much!! G.

See also bug 19973.

[Adam Strzelecki]

> highlighting.  BUt it IS intended for highlighting of menu items, and MS's
> colors reflect that.  If you've made an informed choice on field usage then
> I'll shut up, but I just wanted you to know.  Quoting from....
> http://www.w3.org/TR/css3-color/
> "Highlight  -  Item(s) selected in a control.
> HighlightText  -  Text of item(s) selected in a control."

You are absolutely right here. But rest of colors in Nightlies are some bad joke. Come on guys ActiveCaption and CaptionText are both black, doesn't it sound stupid enough to fix at last this bug?

Can you please bring old colors back, please. Maybe except those Highlight & HighlightText, they were all fine. I don't want a bad surprise on new Safari Mac release that will make my system management sites using CSS systems colors unusable on Mac. 

[Jon@Chromium]

Also reported against Chromium, see http://code.google.com/p/chromium/issues/detail?id=2893

[Adam Strzelecki]

Congratulations, now this bug is pushed to official Safari 4 release. Now I got some projects where I use ActiveCaption and CaptionText totally unusable for Safari 4 users.

Thanks a lot!

[Peter Kasting]

Mitz' patch here was never marked for review.  Assigning just so the there's a chance the patch will get un-rotted or the bug moved to some resolution.

[Simon Fraser (smfr)]

CSS3 Colors test:
<http://www.w3.org/Style/CSS/Test/CSS3/Color/20080721/xhtml1/t040501-system-colors-a.xht>