Hacker News Reader

Comment by jacobmarble | Hacker News Reader

Looks like support for "system colors" is up to 96% in 2023:

https://caniuse.com/mdn-css_types_color_system-color

This is misleading, and it would be nice if someone would correct it (after figuring out all the whats and whens).

Its support table is for the CSS2 system colours, as defined back in 1997. <https://www.w3.org/TR/WD-CSS2-971104/ui.html#h-18.2>

(Aside: “96.61%” is… well, for the type of browser they’re talking about—ones that support such things as CSS and colour—it should be exactly 100%, if not higher. Decide for yourself the sanity of this usage figure.)

CSS Color Module Level 3 <https://www.w3.org/TR/css-color-3/#css2-system> then deprecated them, for no good reason¹.²

CSS Color Module Level 4 <https://www.w3.org/TR/css-color-4/#css-system-colors> revived the concept of system colours, largely fixing the bad aspects and making it all clearly good. Some of the colours are still deprecated, with some at-risk³ dumbing-down. But there are also some new colours: Canvas and CanvasText.

So the problem is that that MDN compatibility data is talking about CSS2 system colours, not CSS Color Module Level 4, which has much lower support (and may not all have been implemented at the same time: most were probably added around 2019, but some in 2021 and AccentColor and AccentColorText in 2022).

Here are the actual colours, to help anyone who wants to update data (have fun identifying when they were added!):

• New in CSS Color Module Level 4: AccentColor, AccentColorText, ActiveText, ButtonBorder, Canvas, CanvasText, Field, FieldText, LinkText, Mark, MarkText, SelectedItem, SelectedItemText, VisitedText.

• Retained from CSS2: ButtonFace, ButtonText, GrayText, Highlight, HighlightText.

• Deprecated from CSS2: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonHighlight, ButtonShadow, CaptionText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText.

—⁂—

¹ Look, some of the system colours were clearly bad, modelling OS styles that were almost completely gone by this time. I suspect that some people didn’t like some of these too-specific values, and they threw the baby out with the bathwater.

² Earlier revisions mentioned the deprecation as being in favour of the ‘appearance’ property, but this was pretty stupid⁴ even when it was prospective, as first written, long before the ‘appearance’ property bit the dust for that time.

³ See <https://www.w3.org/TR/css-color-4/#deprecated-system-colors>: it defines fallback mappings that reduce the variations, but Firefox and Safari haven’t implemented the dumbing-down, still having the more-nuanced stuff they had from decades go. Hence “Results on these 'same as' equivalence tests are not great, which is why the feature is at-risk”.

⁴ No, seriously, just totally clueless and I have no idea what whoever wrote that was thinking, because it was always a completely different thing with only minimal potential overlap in uses.

And the other almost 4% is "unknown" not specifically unsupported. Those browsers are unsupported ones from ancient Android releases.

That site seems to suggest it’s supported on Firefox as far back as Firefox 2 in 2006, which doesn’t really jibe with the article.

The article points out that while system colors are supported in Firefox (as of the time of the writing of the article), the "color-scheme: light dark" method he was using was not supported, and it looks like that was not supported until Firefox 96 (January 2022).[0]

[0] https://caniuse.com/mdn-css_properties_color-scheme

>until Firefox 96 (January 2022).

Off topic, but the fact you felt a need to datestamp it indicates the Chrome Version Number System is bloody worthless.

+10000 for the "lazy" Dark mode - it's excellent.

Now if only I could find a use for #rebeccapurple again...

a:hover, maybe??

Are you sure that this color is supported in every browser your website is going to be visited? Why not write "#639" instead?

If the browser doesn't support rebeccapurple then there's a whole bunch of other features that also won't work.

You could use the shorthand, but it's really not necessary at this point.

The spec is (unsurprisingly) quite [specific][1] that this color value is exactly "#663399". All browsers which implement CSS Colors have had support for years now and the Color Module itself is now a CR as of a year and a half ago.

Incompatibility isn't exactly a rounding error yet, but we're close.

[1]: https://lists.w3.org/Archives/Public/www-style/2014Jun/0312....

My lazy dark mode solution:

html.dark-mode { filter: grayscale(100%) invert(100%); }

I had some fun inverting and then rotating the hue back around.

This would also create negatives of pictures, right?

Correct. It's great for mostly text content or as a nice quick and dirty fix until you get around to creating a proper dark theme.

Alternatively you can target elements individually, omitting images.

Perhaps there is some fancy selector which excludes images?

If you use just invert(100%), no grayscale, on the body, you can add img { filter: invert(100%) } to reverse images back to their original color. However, if an image has any transparency or translucency, it may be harder to see with what the background color has become.

I've used something to this effect before, and you can use child selectors on e.g images to effectively exclude elements.

Note that the cost of this lazy method is very poor performance (css filter over the entire document), and lack of control over dark colours (inverted colours don't necessarily work best, shifting hue can help but you probably don't want the same as uninverted colours because they tend to be too dark and lack sufficient contrast).

Reply on news.ycombinator.com