How to generate old syntax for rgba for CSS?

[jcubic]

I've noticed that the library is using this syntax:

rgb(65.098% 49.804% 34.902% / 0.997);

Where can I use browser support for this syntax? It seems this is quite new. Can you generate older syntax:

rgba(100, 100, 100, 0.997);

Where can I check browser support for this new syntax? I work for a library that works in IE11 (I know it's deprecated but I want my library to work for old browsers even IE11).

[jcubic]

Found it:

color.toString({commas: true, format: 'rgba'});

It's confusing because documentation hides all information except function signatures, and you need to uncheck the checkboxes to see the actual documentation. Clicking on signature just add hash to URL.

This is quite odd and bad DX I would say. Why not remove those checkboxes, I don't see the point of having them. It looks like you don't have documentation at first sight.

[svgeesus]

It's confusing because documentation hides all information except function signatures, and you need to uncheck the checkboxes to see the actual documentation. Clicking on signature just add hash to URL.

I found that confusing too, but click on the colored boxes rather than the text, so just the one call you are interested in expands.

[PeterSR]

Found it:

color.toString({commas: true, format: 'rgba'});

It's confusing because documentation hides all information except function signatures, and you need to uncheck the checkboxes to see the actual documentation. Clicking on signature just add hash to URL.

This is quite odd and bad DX I would say. Why not remove those checkboxes, I don't see the point of having them. It looks like you don't have documentation at first sight.

This does not seem to yield the desired result on my side:

const input = "#9467bd"
const color = new Color(input)
color.alpha = 0.5
console.log(color.toString({commas: true, format: 'rgba'}))
// -> rgba(58.039%, 40.392%, 74.118% , 0.5)

Running 0.4.1-patch

[jcubic]

I have the same issue I would like to have numerical value not percentage, but it works. I only wonder in how many browsers.

[LeaVerou]

It's confusing because documentation hides all information except function signatures, and you need to uncheck the checkboxes to see the actual documentation. Clicking on signature just add hash to URL.

Yeah, we should probably remove those docs. They are also wildly out of date.

This does not seem to yield the desired result on my side:

What is the desired result? It does have commas, and it is rgba() so it's doing everything you asked it to?

I have the same issue I would like to have numerical value not percentage, but it works.

Percentages are generally better as it's a representation that is not designed after 8bit implementation constraints. But you can get numbers, it's just a little more involved:

let lv_magenta = new Color("#ff006688");

// Custom functional format:
lv_magenta.toString({format: {
	name: "rgba",
	commas: true,
	coords: [
		"<number>[0, 255]",
		"<number>[0, 255]",
		"<number>[0, 255]",
	]
}}) // 'rgba(255, 0, 102 , 0.5333)'

or, to reuse the format:

let lv_magenta = new Color("#ff006688");
let rgba_number = {
	name: "rgba",
	commas: true,
	coords: [
		"<number>[0, 255]",
		"<number>[0, 255]",
		"<number>[0, 255]",
	]
};
lv_magenta.toString({format: rgba_number}) // 'rgba(255, 0, 102 , 0.5333)'

We should probably add a shortcut so you can just do format: "rgba-number", I'm just not sure what the use cases are. Why do you need 0-255 numbers?

I only wonder in how many browsers.

All browsers support percentages in rgb() since CSS 1 and in rgba() since rgba() existed...

[jcubic]

I'm not sure how others but the way color works on computer it more intuitive to use 0-255 color range than floating point number, what it should to if the color is between two values? what will the output of 0.3333333333% I feel that percentage is confusing that's why I prefer what system is using.

Another reason is that when creating hex color you can't create more than 255 and it's hard to read. The same as getting inches or yards when measuring the length if you specify the input in meters. Doesn't make sense to me. So at least there should be an easy what to use 0-255 values if I want.

BTW: what is that space before the last comma? I also would like to have clean output, it looks like a bug to me.

[PeterSR]

I actually ended up going with a different color library because I couldn't figure out the call signature and how to get the desired output. I am using Typescript and it would not allow to call toString with a format key that maps to an object. Maybe I was doing something wrong.

And "desired output" was just a reference to @jcubic's rgba(100, 100, 100, 0.997) which I interpreted to be numbers in 0-255 range. This is actually also the format that I need, as it needs to be fed over to another JS framework, not used by CSS.

It would be very nice with such a format shorthand.

[LeaVerou]

I'm not sure how others but the way color works on computer it more intuitive to use 0-255 color range than floating point number, what it should to if the color is between two values? what will the output of 0.3333333333% I feel that percentage is confusing that's why I prefer what system is using.

Not sure why you feel 0-255 is more intuitive, if 0.3333% is hard, why is 84.3333 not hard? Note that the 0-255 are not necessarily integers, exactly because color is not necessarily 8 bit anymore.

BTW: what is that space before the last comma? I also would like to have clean output, it looks like a bug to me.

I just pushed a fix for that in bf36ebc.

I am using Typescript and it would not allow to call toString with a format key that maps to an object. Maybe I was doing something wrong.

Typescript support is still somewhat beta, it was just added in #221. I just pushed a fix for this in d0ab5d1, @MysteryBlokHed @jgerigmeyer hope I did it right.

It would be very nice with such a format shorthand.

I just pushed it in 667c19a ! Feel free to try it out and let me know what you think!
Docs still TBD, would be lovely if someone wanted to help out with that.

[PeterSR]

Thank you! Great work 😃