Reorganize the hsl() page

[teoli2003]

This PR is part of openwebdocs/project#92.

The idea here is to simplify the page:

• Reorganize the different syntaxes in one block as we do elsewhere on MDN. In one glance, all the possible syntaxes are visible.
• Put the modern, space-separated, syntax first.
• Get rid of mentions of CSS Color Level4: the developer only needs to know if this is supported or not
• Get rid of the note saying that hsla() is an alias. I put this in the See also section, this will stay prominent in hsla() as we want to lower its use, but not here.
• Describe each parameter separately.

Note that the spec and browser compat sections, although defined correctly, are only partially displayed until mdn/browser-compat-data#15646 is resolved. (This is also the cause of the flaw reported by our Preview URLs bot)

This is the first color function to be reorganized. The idea is to do the same for each of the 7 others.

[github-actions]

Preview URLs

• https://pr14651.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/color_value/hsl

Flaws

URL: /en-US/docs/Web/CSS/color_value/hsl
Title: hsl()
on GitHub
Flaw count: 3

• macros:
  • /en-US/docs/Glossary/color_wheel does not exist
  • /en-US/docs/Glossary/color_wheel does not exist
• bad_bcd_links:
  • no explanation!

External URLs

URL: /en-US/docs/Web/CSS/color_value/hsl
Title: hsl()
on GitHub

• https://hslpicker.com/ (1 time) (Note! This may be a new URL 👀)

(this comment was updated 2022-04-07 11:59:36.442472)

[wbamberg]

Nice.

[wbamberg]

Is there a link to the color wheel we can use here?

[teoli2003]

I've added one for the explanation and link to a color picker for hsl() in the See also section. If I find a better hsl color finder, I'll update the page.

[wbamberg]

👍 thanks!

[teoli2003]

I'm creating two glossary entries (sRGB and color wheel) to link from here (and elsewhere), I will add an example and an extra sentence. I will rerequest review when this is done (the glossary entries will be in separate PRs).

[teoli2003]

@estelle I have a quick question. We have a glossary entry for RGB. What about we improve it to explain sRGB, add a redirect between sRGB and RGB and use this to link sRGB here?

I'm not sure we need two separate glossary entries for RGB and sRGB.

[estelle]

I'm not sure we need two separate glossary entries for RGB and sRGB.

We don't. we just need to update sRGB to explain it and add links from sRGB to sRGB colors.

[teoli2003]

👍 I will update the RGB glossary entry tomorrow (or Friday). (In a different PR).

[teoli2003]

As it is approved, and feedback addressed I'm merging this, we can do follow-ups if needed. (I still need to update RGB and to get the color wheel glossary entry landed, but this will be in separate PRs)