hsl with alpha channel separated by a slash

Asked Feb 09 '21 at 07:08

Active Feb 09 '21 at 07:47

Viewed 1,111 times

I was sure that the proper way to use hsla() is something like

background: hsla(0deg, 100%, 50%, 0.5); /* The same as rgba(255, 0, 0, 0.5); */

However, if I create a paragraph with background: rgba(255, 0, 0, 0.5) and shift-click that color in Chrome DevTools (Ctrl+Shift+I), the color is converted to

hsl(0deg 100% 50% / 50%);

Notice that the alpha channel is now separated by a slash and the name of a function is hsl rather than hsla.

Neither w3schools nor MDN mention this notation.

Why Chrome use it?

asked Feb 09 '21 at 07:08

john c. j.

I tried to recreate your code in both Firefox and Chrome and it works as intended. – Krullmizter Feb 09 '21 at 07:32
1

it's the new syntax and soon you should use it and forget the old one – Temani Afif Feb 09 '21 at 07:48

hsl with alpha channel separated by a slash

0 Answers0