How frequently is each color format used? #32
Comments
LeaVerou
added
⚠️ Needs SQL
|
Algorithm:
|
LeaVerou
added
✅ Has algorithm (1/3)
Yes. The function will do the following:
Normally step 3 would be sRGB gamma-correction but for this specific use case, the results are the same so it can be skipped. Oh and the matrix multiply can be the unreadable but short inlined multiplication, not using a function; it will always be a 3x3 matrix. |
LeaVerou
added
✅ Has JS (2/3)
rviscomi
added
✅ Has SQL (3/3)
|
I left a comment about this in the sheet. |
|
Added a tab for color space. |
|
Yeah, something is fishy here.
|
|
Sure, could you clarify if the resolution is to rerun all color queries with the updated JS or if there are any additional queries to write? |
|
I was still investigating. Did you see this comment? |
|
I did, but it's not clear what the resolution is or if I'm blocked on anything. If you're still investigating, what can I help with? |
If it makes it easier, here's some JS that should just return those as a list: let ret = [];
walkDeclarations(ast, ({property, value}) => {
// First remove url() references to avoid them mucking the results
for (let f of extractFunctionCalls(value, {names: "url"})) {
let [start, end] = f.pos;
value = value.substring(0, start) + "url()" + " ".repeat(end - start - 5) + value.substring(end);
}
for (let f of extractFunctionCalls(value, {names: "color"})) {
ret.push(value.substring(...f.pos));
}
}, {
properties: /^--|color$|^border|^background(-image)?$|\-shadow$|filter$/
});
return ret; |
|
Yes, this helps! The good news is, this doesn't appear to be a bug in my code. 🎉 Are they syntax that was meant to be preprocessed and wasn't? Are they errors? They're too many in each stylesheet to be errors... I suppose what we can do is make the code that detects color spaces more robust, so that at least that doesn't have false positives. |
|
|
Thanks! So it seems that from these, there are two categories:
I just pushed a change to make |
|
Thanks! I'll rerun the p3 and spaces queries with the updated JS. Let me know if there's anything else that needs to be rerun/added. See the updated p3 and color space results. |
|
Thanks! Everything else is still valid. In fact, I don't even think the p3 query needed to be rerun, as there was nothing mistakenly recognized as P3. |
|
Interesting. So they are using document order to to the fallback; all colors are specified in sRGB first and then again in display-p3 (regardless of whether the color is outside the sRGB gamut or not; the first few colors are white, black and some greys). Here is one which is (slightly) outside sRGB:
and another,
Apart from a single use of P3 primary red, all of these are either inside sRGB or very slightly outside, and the color differences (I'm going to trust the deltaE 2000) are visible but really not that different. This looks like a careful exploration, to me. |
|
Here the sRGB defaults are set as custom properties on Despite the different approach to fallback though, the first color I checked was exactly the same as the play.date site:
|
|
Fascinating. One single example of a P3 color. Fallback is by document order. Here is that pair:
This looks like experimentation to me, without really understanding how colorspaces work. |
.light-shade
{background: linear-gradient(to right, white, color(blue blend(lime 50%)), black);
/* background-color:#f6f6f6;*/
}Looks like an attempt to use the old color modification function, when it was called |
|
Some oddities there, #nav-main-connect a:hover {
color: color(#787878 lightness(+25%));
}and #contact h1 {
position: absolute;
font-weight: bold;
line-height: 0.8;
font-family: "Conduit",sans-serif;
left: 0;
color: color(white alpha(10%));
z-index: 20;
text-transform: uppercase;
}Again some color modification attempts. |
Oh and another pair where the P3 colors seems to be the sRGB component values changed to P3:
I haven't gone through all of the colors here, partly because of the minified code and many duplicates. |
@supports (color:color(display-p3 0 0 0 / 1)){@media (color-gamut:p3){:root{--accent:color( display-p3 .905882353 .282352941 .196078431 / 1 )}}}Belt and braces here, @supports for P3 syntax, followed by a gamut check to be sure P3 gamut is supported. Noble, but un-necessary as |
|
Astonishing that
|
|
Moving the discussion here to not clog HTTPArchive/almanac.httparchive.org#898
Would it be possible to also have results on what % of pages have at least one of each, or would it require a second query?
This is certainly wrong. I could debug if you give me some URLs, but I suspect it's probably the |
It's possible but it'd require another query. My suggestion would be to focus on fixing query bugs before augmenting with new data if there's still time. Let me know how you'd like to proceed.
https://kudapostupat.com/wp-content/plugins/lightbox/css/frontend/lightbox.css?ver=5.4.2 has 108 instances of
Note that I had to paste the CSS directly because of a CORS issue
The Swiper library and its various versions also comes up a lot in example URLs: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css Hope that helps. Let me know if you need more debugging URLs. |
|
So it looks like this may be a Rework bug. Search for Actually, try inputting this: This is an extract from that stylesheet, and it is parsed as a single rule with two declarations!! |
|
Yeah I agree it seems like a Rework bug. Pasting the pretty-printed version of the CSS seems to be WAI. So making the system colors case-sensitive seems to help. We can also add heuristic checks for this in our JS, eg |
|
I think a better heuristic might be to remove all strings and Btw if we're going the heuristic route, it may be better to just special case |
|
IMO the updated results should be reliable enough. |
rgb(),rgba(),hsl(),hsla(),#rgb,#rgba,#rrggbb,#rrggbbaa,color(...), named colors,currentColor.rgb(r g b / a)instead ofrgba(r, g, b, a)etc.In a way, this is a generalization of #18.
The text was updated successfully, but these errors were encountered: