Angelika Cathor on Nostr: I got excited at the idea of calc/clamping color lightness in hsl() only to discover ...
I got excited at the idea of calc/clamping color lightness in hsl() only to discover that there is no way to do it that will work in all browsers 😢.
Adding percentages works in Safari, doesn't work in FF and Chrome:
background-color: hsl(from #ff00ff h s calc(l + 30%))
Adding numbers works in FF and Chrome, doesn't work in Safari:
background-color: hsl(from #ff00ff h s calc(l + 30))
Here's a code pen:
https://codepen.io/angelikatyborska/pen/MYgwJyvPlease somebody tell me that I'm wrong?
#CSS #WebDev
Published at
2024-12-01 14:55:04Event JSON
{
"id": "6c7db863f445d64f35575b6ac1c6798c0b7621ad304005fb30ebbdb73524a019",
"pubkey": "82e93ce808b82723f923933f9307dea5b426bb8d23ba293cad3f9af37322004e",
"created_at": 1733064904,
"kind": 1,
"tags": [
[
"t",
"css"
],
[
"t",
"webdev"
],
[
"proxy",
"https://mas.to/@angelikatyborska/113578141585916483",
"web"
],
[
"t",
"ff00ff"
],
[
"proxy",
"https://mas.to/users/angelikatyborska/statuses/113578141585916483",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://mas.to/users/angelikatyborska/statuses/113578141585916483",
"pink.momostr"
],
[
"-"
]
],
"content": "I got excited at the idea of calc/clamping color lightness in hsl() only to discover that there is no way to do it that will work in all browsers 😢. \n\nAdding percentages works in Safari, doesn't work in FF and Chrome:\nbackground-color: hsl(from #ff00ff h s calc(l + 30%))\n\nAdding numbers works in FF and Chrome, doesn't work in Safari:\nbackground-color: hsl(from #ff00ff h s calc(l + 30))\n\nHere's a code pen: https://codepen.io/angelikatyborska/pen/MYgwJyv\n\nPlease somebody tell me that I'm wrong?\n\n#CSS #WebDev",
"sig": "79ee778a0d5c5c4d9fd313c4817f51405807393e4c02081a4d20b0858e703f342643a0e21a10650fb79b33844b3732ba479334795ff3c1e3523b8bc2c841a2a7"
}