OWD project: Revamp MDN CSS color documentation

[teoli2003]

Summary

Update our pretty old documentation about CSS colors by rewriting <color> and writing a few guides and glossary entries to describe modern concepts like gamut and color schemes.

Background

Our documentation about CSS color is pretty old. Its structure dates from a time when keywords and rgb() were the only possible CSS Colors.

Nowadays, numerous new color schemes have been added, and are listed on the page but without overall explanations. CSS Color Level 5 is adding two more functions color-mix() and color-contrast() that are documented but not linked from <color>. They are implemented behind flags by two browsers and CSS Color Level 5 is part of INTEROP 2022.

New concepts in the world of web development (like gamut and color schemes) are not explained on MDN but only linked to Wikipedia where the explanation is larger than the one needed in web development.

Prioritization criteria

• Effort
  • Small to medium. This is the update/creation of 5 to 10 pages, with some research.
• Dependencies
  • None.
• Community enablement
  • Not really.
• Momentum
  • This will support INTEROP 2022.
• Enabling learners
  • Currently the <color> documentation is complex this will help untangle basic and advanced concepts, as well as having a guide and explanation for the advanced ones.
• Enabling professionals
  • Significant. This is a new development of the web.
• Underrepresented topics / ethical web
  • Not applicable.
• Operational necessities
  • None.
• Addressing needs of the Web industry
  • INTEROP 2022.

[teoli2003]

As a first part, I'm simplifying the <color> page.

This page is extremely long, with long tables and lists. The idea is to move these extensive details to their specific pages. This will lead to the necessity to update the structure of BCD for <color> so that each subpage can have its own spec/bc sections (They are very long now!).

Once this is done, and still on <color>, I can simplify the summary entries for each function (rgb(), lab(), …) in this main page so that they are shorter and don't duplicate the content of the subpage.

The idea is to have the <color> page useful for beginners (to have an overview of the possible syntaxes) and for experts who want to find quickly if they have to use hwb() or lab(), or to remember a syntax they are unsure of.