How to transform black into any given color using only CSS filters?
The answer:
Use simultaneous perturbation stochastic approximation to probabilistically obtain an approximation of the color through a chain of filter transforms...
stackoverflow.com/a/43960991
Web development.
Conversation
You may have noticed grapheneos.org now includes a logo in the navigation bar. The site reuses the same SVG with a mask of the GrapheneOS logo for the header, footer and Safari tab icon.
Setting the color to match the color of the text for the active page is ridiculous.
1
2
Can use codepen.io/sosuke/pen/Pjo to generate a filter chain closely approximately the color via the probabilistic algorithm above. Tweaking it to use a loop until it gets one with insignificant loss is simple enough and it doesn't take long.
How is the web this screwed up though?
1
3
Replying to
1
Replying to
It has serious issues with browser support despite being around since 2014:
caniuse.com/css-masks
I don't really want to rely on features that are behind prefixes and partially implemented. Currently only using one of those kinds of features and it's a minor optional thing.
1
1
The grapheneos.org footer is placed at the bottom of the viewport even when there isn't enough content to fill the page. We don't use any JavaScript for page styling or workarounds so we actually have to do these things properly with CSS. It's another example of pain.
1
Using 100vh as min-height is our baseline approach but that doesn't actually work consistently / properly. We need the CSS stretch feature (formerly called fill-available and fill, forget the exact history) which isn't fully standardized yet so it's as -webkit-fill-available.
1
Chromium silently broke the design at one point and started showing the footer immediately under the content since they changed the semantics of -webkit-fill-available as the spec evolved. We didn't notice for a while and then had to figure out the weird workaround needed for it.
1
2
Ended up having to set -webkit-fill-available for html in addition to body and that resolved it. Guess you need to apply it all the way up the page in order to fill the available space now. Anyway, depending on underspecified, evolving and often buggy WIP features isn't great.
1
What I really need to figure out is twitter.com/DanielMicay/st. Our site now has a favicon.svg changing color based on whether the browser has dark mode enabled. Chromium prefers favicon.ico since it wants hand-crafted pixel art for 16x16, 32x32, etc. which we don't have anyway.
Quote Tweet
Really annoyed at a combination of Chromium and Safari issues right now.
Safari doesn't have SVG favicon support yet and Chromium won't use an SVG favicon if there's an ICO favicon defined.
Need Chromium to use the SVG favicon so we can extend it to change based on dark mode.
It works in Firefox already since they already gave up on things looking good at low resolutions and started preferring SVG. Also got to learn that CSP is really weird for SVG and doesn't apply to img tags. You'll notice grapheneos.org/favicon.svg gives an inline style CSP error.
1
Yet it works fine without a CSP policy when used as a favicon or included via an img element since the CSP specification says that it doesn't apply to SVG included as img. It has some weird rules. Firefox had a bug where they applied it to SVG for img but they fixed it.
1
Show replies