Hello World 👽
✍ css-media-vars, augmented-ui, CSS-Sweeper, Space Toggles, & more
🦋 http://janeori.propjockey.io
📝 http://dev.to/janeori
💍 Art
she/her
You can get the OS scrollbar gutter width as an integer in a --CSS-var on :root
https://codepen.io/propjockey/pen/ogzovYg?editors=1100
(to have a gutter at all you'll have to, on mac, turn on scrollbars to "always", etc, and refresh to ever see it non-zero)
But it's bugged in Safari:
https://bugs.webkit.org/show_bug.cgi?id=310597
Try the latest `<color-input>` concept:
⚓️ anchor() progressive enhancement
🤖 workers for color compute
🙈 new animations & interactions
🎨 gamut boundaries, mapping, stretching
☯️ contrast scores
& much more
I had fun doing something that normally feels like a grind because every little idea I had was fulfilled quickly by AI and a bit of tweaking to learn and make it juuuust right
It's not CSS but it's got style 🤙💚
https://dev.to/janeori/customizing-the-macos-terminal-with-help-from-ai-3f91
CSS vars holding arrays should've expanded into multiple parameters for --function calls. Especially because there's a syntax to prevent it.
~~What a bummer!~~
Bummer averted! There's a spread operator coming to restore the behavior optionally 🎉
https://jsfiddle.net/wdmnockj/1/
https://github.com/w3c/csswg-drafts/issues/11190#issuecomment-2596276757
https://issues.chromium.org/issues/390205875
https://drafts.csswg.org/css-values-5/#comma-containing-productions:~:text=For%20example%2C%20font%2Dfamily%3A%20random%2Ditem(%2D%2Dx%2C%20%7Bvar(%2D%2Dlist1)%7D%2C%20monospace)%20will%20work%20correctly%20regardless%20of%20whether%20the%20%2D%2Dlist1%20custom%20property%20contains%20a%20comma%2Dseparated%20list%20or%20not.
The article is also available on other platforms:
Medium: https://medium.com/gitconnected/native-random-values-in-css-3f81457bc81b
DEV (open): https://dev.to/alvaromontoro/native-random-values-in-css-a7e
i built an entire x86 CPU emulator in CSS (no javascript)
you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS
New article: “Passing Data into SVG: Linked Parameters Workaround”
https://kizu.dev/svg-linked-parameters-workaround/
Twelve years ago, I started a draft for an article I never published: there were a few cross-browser issues and the idea was raw and unpolished.
Sometimes, something new interacts with one of these older ideas and leads to something interesting.
This article is about one such case: a hacky technique that allows us to pass some data from #CSS to #SVG and use it to adjust colors or almost anything else.
Twelve years ago, I started a draft for an article. I never published it: there were a few cross-browser issues, and the idea was raw and unpolished. I have many drafts like this in my archives. Sometimes, something new interacts with one of these older ideas and leads to something interesting. This article is about one such case: a hacky technique that allows us to pass some data from CSS to SVG and use it to adjust colors or almost anything else.
Living up to the PropJockey slogan here! :)
"the value of properties, orchestrated"
Watch this new advanced CSS exfiltration hack execute live (in Chrome) in the embedded CodePen demo at the bottom of the article! 16 times more data from a single SVG fetch than the previous hack!
Adam Argyle
Alvaro Montoro
Rebane
Roma Komarov