This is absolutely beautiful and very well done.
> Nothing you own is finished. Everything exists in a state of permanent incompletion, permanently needing.
Design Systems, CSS, Web Components, Photography, Food, HiFi. All the good things in life should be cherished and savoured. Toots are my own - he/him - Gen X - 🇳🇱🇮🇪
Blog: https://dutchcelt.nl
Work stuff: As a Design System Engineer/Architect, I always look at how web stacks implement a design.
Design is never an add-on; it's an integral part of the solution.
| Website | https://dutchcelt.nl |
| Codepen | https://codepen.io/dutchcelt |
| https://www.linkedin.com/in/dutchcelt/ | |
| GitHub | https://github.com/dutchcelt |
This is absolutely beautiful and very well done.
> Nothing you own is finished. Everything exists in a state of permanent incompletion, permanently needing.
CSS has just added an image form of light-dark(). So as well as choosing between a pair of colors based on light or dark mode, you can also choose between a pair of images.
No you can't mix them because parsing would be hard.
#CSS
I spent too much time looking at too many colo(u)rs to try and optimise them for csskit. Here are some interesting findings.
Somehow I never got around to trying out `box-decoration-break` and now there is a new Codepen Editor mode. Good moment as any to play with both.
https://codepen.io/editor/dutchcelt/pen/019cd223-cec0-7eaa-8a52-ffdc2254c059

I know someone that uses her screen reader on her mobile phone, but when she's on her desktop computer, she uses a mangifier. Different contexts, different tools, same person. I know someone that uses voice controls on his computer. He uses direct commands like "Click Contact Us" when he's near the start of his day, and commands like "Click link, twelve" when he's near the end of his day with lower energy and less clear speech and a dry mouth. Different energy/capacity, same tools, same person. I know someone that uses a switch on his computer. He also uses the onscreen keyboard on his computer. The one that he chooses reflects the task he's trying to accomplish and how he can minimize switching between the tools. Different task, same context, same tools, same person. Disability is not black and white... it's every shade of every colour. #Accessibility #Disability
🚩✊️️ TGIF, because Friday is Dependency Deletion Day! It has come to my attention that some folks STILL use lodash because of… cloneDeep?! I see about 150,000,000 weekly downloads for this ancient function on NPM, but come on—we've had structuredClone for some time, and it's better in every way.
👉️ https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone
Can you guess which one is a valid syntax for style queries?
Think about it, then read my last post to find the correct answer (and understand why you got it wrong)
When you don't put `aria-hidden="true"` on decorative SVGs, they'll be announced by some screen readers.
https://matuzo.at/blog/2026/put-aria-hidden-on-presentational-svgs