admin管理员组文章数量:1315101
I'm parsing a color string returned by getComputedStyle
to get R
, G
, B
, and A
values from it.
So far (in Chrome and Firefox), color values always seem to e back in rgb
or rgba
format which is easy to parse:
const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);
I cannot, however, find any promise about color format in any of the specs for getComputedStyle
listed on its MDN page.
Is there any guarantee of color format from getComputedStyle
? Or is it entirely up to browser implementation?
I'd prefer not to have to check for HEX and HSLA values (and really whatever else is possible - I'm not entirely sure).
A quick snippet of code for testing color values in your console:
console.log((str => {
const div = document.createElement("div");
div.style.backgroundColor = str;
document.body.append(div);
return getComputedStyle(div).backgroundColor;
})("magenta"));
I'm parsing a color string returned by getComputedStyle
to get R
, G
, B
, and A
values from it.
So far (in Chrome and Firefox), color values always seem to e back in rgb
or rgba
format which is easy to parse:
const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);
I cannot, however, find any promise about color format in any of the specs for getComputedStyle
listed on its MDN page.
Is there any guarantee of color format from getComputedStyle
? Or is it entirely up to browser implementation?
I'd prefer not to have to check for HEX and HSLA values (and really whatever else is possible - I'm not entirely sure).
A quick snippet of code for testing color values in your console:
console.log((str => {
const div = document.createElement("div");
div.style.backgroundColor = str;
document.body.append(div);
return getComputedStyle(div).backgroundColor;
})("magenta"));
Share
Improve this question
edited Jan 9, 2023 at 17:10
TylerH
21.1k77 gold badges79 silver badges112 bronze badges
asked Apr 8, 2021 at 13:45
Sandy GiffordSandy Gifford
8,1465 gold badges43 silver badges71 bronze badges
6
- I believe since IE6 (hex) everything has exclusively returned RGB/A, but I can't find any official documentation to back that up. – DBS Commented Apr 8, 2021 at 13:50
- @DBS yeah, that's sort of where I am right now. Pretty confident I could get away with it, but in search of that last 10% to help me sleep soundly at night :) – Sandy Gifford Commented Apr 8, 2021 at 13:55
- What happens with transparent? (Which is I suppose, technically, not the same as any rgba bo). – A Haworth Commented Apr 8, 2021 at 13:59
-
@AHaworth in FF:
rgba(0, 0, 0, 0)
– Sandy Gifford Commented Apr 8, 2021 at 14:03 - @AHaworth I've included a code snippet for testing colors – Sandy Gifford Commented Apr 8, 2021 at 14:05
2 Answers
Reset to default 7CSSOM does not state this directly, but instead references css-color-4:
To serialize a CSS ponent value depends on the ponent, as follows:
<color>
If <color> is a ponent of a resolved value, see CSS Color 4 §4.6 Resolving <color> Values.If <color> is a ponent of a puted value, see CSS Color 4 §4.7 Serializing <color> Values.
For the purposes of getComputedStyle()
, both of the above lines mean the same thing. Specifically, section 4.7.2 covers the majority of monly used formats:
4.7.2. Serializing sRGB values
The serialized form of the following sRGB values:
- hex colors
rgb()
andrgba()
valueshsl()
andhsla()
valueshwb()
values- named colors
is derived from the puted value and thus, uses either the
rgb()
orrgba()
form (depending on whether the alpha is exactly 1, or not), with lowercase letters for the function name.
Section 4.7.6 covers system colors (putes to lowercase), transparent
(putes to rgba(0, 0, 0, 0)
) and currentColor
(putes to lowercase currentcolor
).
As css-color-4 introduces several new ways to specify colors, other sections exist for other formats such as §4.7.3 for LCH values, §4.7.4 for the color()
function, and more.
This means that color values from getComputedStyle()
are guaranteed to be in either rgb()
or rgba()
format, depending on the alpha value, only when the specified values are in any of the formats in §4.7.2. But §4.7.2 and §4.7.6 cover the vast majority of use cases in everyday CSS, so they can still be relied on. Considering the other, exotic formats aren't really supported anywhere yet, it's probably not worth testing for them until they enjoy any sort of mainstream use.
Wanted to follow up with some real world examples of puted colors, too long to fit in a ment:
const colors = [
"red",
// other test colors
];
const results = {};
for (const color of colors) {
document.body.style.color = color;
results[color] = getComputedStyle(document.body).color;
}
console.table(results);
In Chrome, running this code produces:
Specified | Computed |
---|---|
rebeccapurple | rgb(102, 51, 153) |
#f092 | rgba(255, 0, 153, 0.133) |
#ff0099 | rgb(255, 0, 153) |
rgb(255 0 153) | rgb(255, 0, 153) |
rgb(255, 0, 153) | rgb(255, 0, 153) |
rgb(255 0 153 / 80%) | rgba(255, 0, 153, 0.8) |
hsl(150 30% 60%) | rgb(122, 184, 153) |
color-mix(in srgb, red, #0000ff 50%) | color(srgb 0.5 0 0.5) |
color-mix(in hsl, red, #0000ff 50%) | color(srgb 1 0 1) |
color-mix(in oklab, red, #0000ff 50%) | oklab(0.539974 0.0962086 -0.0928316) |
hsl(from red 240deg s l) | color(srgb 0 0 1) |
light-dark(white, black) | rgb(255, 255, 255) |
本文标签: javascriptIs color format specified in the spec for getComputedStyleStack Overflow
版权声明:本文标题:javascript - Is color format specified in the spec for getComputedStyle? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741969167a2407729.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论