Nils Binder
@ichimnetz.com
Frontend Designer @ https://9elements.com • Co organizer @css.cafe • Also, I'm an origami enthusiast spending hours folding paper • He/Him.
Pinned
Nils Binder
@ichimnetz.com
· Nov 4
Blog Posts by Nils Binder - 9elements
Combining finest craftsmanship with elegant design to ship innovative digital experiences.
9elements.com
Hello 🦋-friends!
I am Nils, based in the Ruhr-Area in Germany.
I occasionally write about CSS over here: 9elements.com/blog/author/...
And since I can now use my website as a handle, it is probably time to update it as well. But if you're curious, you find it here: ichimnetz.com
I am Nils, based in the Ruhr-Area in Germany.
I occasionally write about CSS over here: 9elements.com/blog/author/...
And since I can now use my website as a handle, it is probably time to update it as well. But if you're curious, you find it here: ichimnetz.com
@bell.bz They dressed up.
They put on their best little chili hat.
It’s almost Christmas — they’re basically festive now — and you’re still pretending they don’t exist. Brutal.
They put on their best little chili hat.
It’s almost Christmas — they’re basically festive now — and you’re still pretending they don’t exist. Brutal.
November 18, 2025 at 2:25 PM
@bell.bz They dressed up.
They put on their best little chili hat.
It’s almost Christmas — they’re basically festive now — and you’re still pretending they don’t exist. Brutal.
They put on their best little chili hat.
It’s almost Christmas — they’re basically festive now — and you’re still pretending they don’t exist. Brutal.
A bit more niche, but next to fancy things like scroll-driven animations, CSS also introduced new math functions like round() and mod(). With them, you can take a time value like 1045 (without the colon) and calculate the minutes passed since midnight.
bsky.app/profile/ichi...
bsky.app/profile/ichi...
November 17, 2025 at 12:55 PM
A bit more niche, but next to fancy things like scroll-driven animations, CSS also introduced new math functions like round() and mod(). With them, you can take a time value like 1045 (without the colon) and calculate the minutes passed since midnight.
bsky.app/profile/ichi...
bsky.app/profile/ichi...
Build a multi-stage timetable for a conference — fully in modern CSS.
Each hour grows automatically to fit all sessions.
🍾 heavy use of subgrid.
🍾 round() and mod() to place sessions accurately
🍾 scroll-driven animations for sticky stage headings
Each hour grows automatically to fit all sessions.
🍾 heavy use of subgrid.
🍾 round() and mod() to place sessions accurately
🍾 scroll-driven animations for sticky stage headings
November 14, 2025 at 7:06 AM
Build a multi-stage timetable for a conference — fully in modern CSS.
Each hour grows automatically to fit all sessions.
🍾 heavy use of subgrid.
🍾 round() and mod() to place sessions accurately
🍾 scroll-driven animations for sticky stage headings
Each hour grows automatically to fit all sessions.
🍾 heavy use of subgrid.
🍾 round() and mod() to place sessions accurately
🍾 scroll-driven animations for sticky stage headings
Reposted by Nils Binder
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Ex-Masonry Display Type Keyword Poll
See https://github.com/w3c/csswg-drafts/issues/12022 for context.
This poll intentionally leaves out `masonry` as an option, see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-34172962...
docs.google.com
October 27, 2025 at 7:53 PM
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Has anyone else seen this in iOS 26? Sticky and fixed elements shift slightly out of view when scrolling down, then snap back when scrolling up. I made a demo to test it: cdpn.io/pen/debug/Qw... Curious if others can reproduce.
September 23, 2025 at 11:23 AM
Has anyone else seen this in iOS 26? Sticky and fixed elements shift slightly out of view when scrolling down, then snap back when scrolling up. I made a demo to test it: cdpn.io/pen/debug/Qw... Curious if others can reproduce.
September 10, 2025 at 7:31 PM
My colleague @dhoelzgen.dev asked me to build a website for the (re)founded Elixir Ruhr Meetup. Had lots of fun experimenting with scroll-driven animations, border images…
And if you’re brave enough, you can brew up some magic 🧙♂️✨
elixir-ruhr.dev
And if you’re brave enough, you can brew up some magic 🧙♂️✨
elixir-ruhr.dev
Elixir Ruhr Meetup
Join Elixir enthusiasts from the Ruhr Area for inspiring talks, lively discussions, and great company!
elixir-ruhr.dev
August 18, 2025 at 2:04 PM
My colleague @dhoelzgen.dev asked me to build a website for the (re)founded Elixir Ruhr Meetup. Had lots of fun experimenting with scroll-driven animations, border images…
And if you’re brave enough, you can brew up some magic 🧙♂️✨
elixir-ruhr.dev
And if you’re brave enough, you can brew up some magic 🧙♂️✨
elixir-ruhr.dev
Reposted by Nils Binder
“I don’t like CSS” is coded speech for “I never learned CSS”
July 23, 2025 at 2:26 AM
“I don’t like CSS” is coded speech for “I never learned CSS”
Had a wonderful day at @frontendnorth.bsky.social. Thanks a lot for having me.
If you're interested in the slides to my talk, you can find them here:
ichimnetz.com/slides/unwra...
#FrontEndNorth
If you're interested in the slides to my talk, you can find them here:
ichimnetz.com/slides/unwra...
#FrontEndNorth
ichimnetz.com
July 10, 2025 at 5:36 PM
Had a wonderful day at @frontendnorth.bsky.social. Thanks a lot for having me.
If you're interested in the slides to my talk, you can find them here:
ichimnetz.com/slides/unwra...
#FrontEndNorth
If you're interested in the slides to my talk, you can find them here:
ichimnetz.com/slides/unwra...
#FrontEndNorth
Reposted by Nils Binder
Some photos for you from this morning (and not from my potato phone)! 🌅 Huge thanks to our first 4 speakers for your fantastic talks @bell.bz @olu.online @ichimnetz.com @amyrogers.design
#FrontEndNorth
#FrontEndNorth
July 10, 2025 at 2:41 PM
Some photos for you from this morning (and not from my potato phone)! 🌅 Huge thanks to our first 4 speakers for your fantastic talks @bell.bz @olu.online @ichimnetz.com @amyrogers.design
#FrontEndNorth
#FrontEndNorth
Reposted by Nils Binder
Boring! Breaking free of a fixed container and the tools which constrain our creativity with @ichimnetz.com
#FrontEndNorth
#FrontEndNorth
July 10, 2025 at 11:12 AM
Boring! Breaking free of a fixed container and the tools which constrain our creativity with @ichimnetz.com
#FrontEndNorth
#FrontEndNorth
Reposted by Nils Binder
3 tickets off a major milestone for us volunteer organisers! Tell your lovely developer and designer friends, we'd love to see you at Front End North 🙌
£75 - 8 talks - video game social - Sheffield - tomorrow!
frontendnorth.com
£75 - 8 talks - video game social - Sheffield - tomorrow!
frontendnorth.com
July 9, 2025 at 11:30 AM
3 tickets off a major milestone for us volunteer organisers! Tell your lovely developer and designer friends, we'd love to see you at Front End North 🙌
£75 - 8 talks - video game social - Sheffield - tomorrow!
frontendnorth.com
£75 - 8 talks - video game social - Sheffield - tomorrow!
frontendnorth.com
Looks like I’ve found the one and only Station™ 😄
Just landed in Manchester—next stop: Sheffield!
Getting ready for @frontendnorth.bsky.social 🚆✨
Just landed in Manchester—next stop: Sheffield!
Getting ready for @frontendnorth.bsky.social 🚆✨
July 9, 2025 at 6:46 AM
Looks like I’ve found the one and only Station™ 😄
Just landed in Manchester—next stop: Sheffield!
Getting ready for @frontendnorth.bsky.social 🚆✨
Just landed in Manchester—next stop: Sheffield!
Getting ready for @frontendnorth.bsky.social 🚆✨
There was a time when anyone could be an artist 👨🎨 — if they loved the work enough.
Then came the professionals.
Then came the camera.
Today, it’s not paint that’s being replaced. It’s code.
9elements.com/blog/when-sk...
Then came the professionals.
Then came the camera.
Today, it’s not paint that’s being replaced. It’s code.
9elements.com/blog/when-sk...
When Skill Became Obsolete: Art, Code, and the End of the Amateur - 9elements
Combining finest craftsmanship with elegant design to ship innovative digital experiences.
9elements.com
June 13, 2025 at 7:50 AM
There was a time when anyone could be an artist 👨🎨 — if they loved the work enough.
Then came the professionals.
Then came the camera.
Today, it’s not paint that’s being replaced. It’s code.
9elements.com/blog/when-sk...
Then came the professionals.
Then came the camera.
Today, it’s not paint that’s being replaced. It’s code.
9elements.com/blog/when-sk...
Reposted by Nils Binder
Wow – what a meetup!
Huge thanks to everyone who joined our in-person gathering right after #CSSDay.
Special shoutout to @miocene.io, Johannes, and Vilde for the fantastic talks.
We had such a great time and hope to see you all again next year! 🙌
Huge thanks to everyone who joined our in-person gathering right after #CSSDay.
Special shoutout to @miocene.io, Johannes, and Vilde for the fantastic talks.
We had such a great time and hope to see you all again next year! 🙌
June 10, 2025 at 7:48 AM
Wow – what a meetup!
Huge thanks to everyone who joined our in-person gathering right after #CSSDay.
Special shoutout to @miocene.io, Johannes, and Vilde for the fantastic talks.
We had such a great time and hope to see you all again next year! 🙌
Huge thanks to everyone who joined our in-person gathering right after #CSSDay.
Special shoutout to @miocene.io, Johannes, and Vilde for the fantastic talks.
We had such a great time and hope to see you all again next year! 🙌
Getting a shoutout from @ishadeed.com for our min-max calculator at #cssday?
Made. Our. Day. 🥰
min-max-calculator.9elements.com?16,24,320,1200
Made. Our. Day. 🥰
min-max-calculator.9elements.com?16,24,320,1200
June 6, 2025 at 9:32 AM
Getting a shoutout from @ishadeed.com for our min-max calculator at #cssday?
Made. Our. Day. 🥰
min-max-calculator.9elements.com?16,24,320,1200
Made. Our. Day. 🥰
min-max-calculator.9elements.com?16,24,320,1200
Getting ready for CSS Day, part 2! I’ll have some stickers and a few owl shirts with me — if you’re around and want one, come say hi.
June 6, 2025 at 6:15 AM
Getting ready for CSS Day, part 2! I’ll have some stickers and a few owl shirts with me — if you’re around and want one, come say hi.
So excited to be speaking at Front End North this July!
I’ll be talking about “Unwrapping Web Design”
Would love to see you there!
📍 10th July, Sheffield
🎟️ Still some tickets left – and they’re just £75!
#frontendnorth
I’ll be talking about “Unwrapping Web Design”
Would love to see you there!
📍 10th July, Sheffield
🎟️ Still some tickets left – and they’re just £75!
#frontendnorth
June 5, 2025 at 6:04 AM
So excited to be speaking at Front End North this July!
I’ll be talking about “Unwrapping Web Design”
Would love to see you there!
📍 10th July, Sheffield
🎟️ Still some tickets left – and they’re just £75!
#frontendnorth
I’ll be talking about “Unwrapping Web Design”
Would love to see you there!
📍 10th July, Sheffield
🎟️ Still some tickets left – and they’re just £75!
#frontendnorth
Live goal achieved: I (well, mostly my slides) appeared in one of @miriam.codes’s talks—just minutes after I gave that exact talk myself. 🤯
June 5, 2025 at 5:30 AM
Live goal achieved: I (well, mostly my slides) appeared in one of @miriam.codes’s talks—just minutes after I gave that exact talk myself. 🤯
Reposted by Nils Binder
In town for @cssday.nl on June 5–6?
Join the Pre-CSS Day Afternoon Event on June 4 at 16:00 — hosted by CMD Amsterdam 🇳🇱
Talks by @ichimnetz.com & @miriam.codes, plus student CSS showcases ✨
🎟 Free RSVP: gath.io/KwVtysIkOWcU...
Join the Pre-CSS Day Afternoon Event on June 4 at 16:00 — hosted by CMD Amsterdam 🇳🇱
Talks by @ichimnetz.com & @miriam.codes, plus student CSS showcases ✨
🎟 Free RSVP: gath.io/KwVtysIkOWcU...
Pre-CSS Day afternoon event · Gathio
<b>About the presentation:</b><br>
On Wednesday June 4 we organize the one and only unofficial pre-CSS Day Afternoon Event. This event is open to everyone. To all visitors and speakers of CSS Day who ...
gath.io
May 30, 2025 at 3:23 PM
In town for @cssday.nl on June 5–6?
Join the Pre-CSS Day Afternoon Event on June 4 at 16:00 — hosted by CMD Amsterdam 🇳🇱
Talks by @ichimnetz.com & @miriam.codes, plus student CSS showcases ✨
🎟 Free RSVP: gath.io/KwVtysIkOWcU...
Join the Pre-CSS Day Afternoon Event on June 4 at 16:00 — hosted by CMD Amsterdam 🇳🇱
Talks by @ichimnetz.com & @miriam.codes, plus student CSS showcases ✨
🎟 Free RSVP: gath.io/KwVtysIkOWcU...
Reposted by Nils Binder
If you're going to #CSSDay next week (or not), there is also a free-to-attend afternoon event at the Amsterdam University of Applied Sciences.
With @miriam.codes and @ichimnetz.com speaking, the event is looking great.
More info + registration: gath.io/KwVtysIkOWcU...
With @miriam.codes and @ichimnetz.com speaking, the event is looking great.
More info + registration: gath.io/KwVtysIkOWcU...
Pre-CSS Day afternoon event · Gathio
<b>About the presentation:</b><br>
On Wednesday June 4 we organize the one and only unofficial pre-CSS Day Afternoon Event. This event is open to everyone. To all visitors and speakers of CSS Day who ...
gath.io
May 27, 2025 at 5:49 PM
If you're going to #CSSDay next week (or not), there is also a free-to-attend afternoon event at the Amsterdam University of Applied Sciences.
With @miriam.codes and @ichimnetz.com speaking, the event is looking great.
More info + registration: gath.io/KwVtysIkOWcU...
With @miriam.codes and @ichimnetz.com speaking, the event is looking great.
More info + registration: gath.io/KwVtysIkOWcU...
This looks really promising!
Recently, I was late to the game in realizing that text inside <details> gets shown when found.
Now, this takes it even further by giving you even more control over what can be found and made visible!
Recently, I was late to the game in realizing that text inside <details> gets shown when found.
Now, this takes it even further by giving you even more control over what can be found and made visible!
Rethinking Find-in-Page Accessibility: Making Hidden Text Work for Everyone
schepp.dev/posts/rethin...
schepp.dev/posts/rethin...
Rethinking Find-in-Page Accessibility: Making Hidden Text Work for Everyone
Discover how to enhance accessibility and improve find-in-page search functionality using hidden="until-found" for icon-only buttons and hidden text labels.
schepp.dev
February 17, 2025 at 12:11 PM
This looks really promising!
Recently, I was late to the game in realizing that text inside <details> gets shown when found.
Now, this takes it even further by giving you even more control over what can be found and made visible!
Recently, I was late to the game in realizing that text inside <details> gets shown when found.
Now, this takes it even further by giving you even more control over what can be found and made visible!
I built a little tool to check color contrast across an entire palette. 🎨
• Supports both WCAG 2.0 and APCA
• See how all colors compare at a glance
• Import/Export CSS or JSON variables
• Make sure your palette works for everyone
Try it:
palette-tester.9elements.com
• Supports both WCAG 2.0 and APCA
• See how all colors compare at a glance
• Import/Export CSS or JSON variables
• Make sure your palette works for everyone
Try it:
palette-tester.9elements.com
February 17, 2025 at 9:11 AM
I built a little tool to check color contrast across an entire palette. 🎨
• Supports both WCAG 2.0 and APCA
• See how all colors compare at a glance
• Import/Export CSS or JSON variables
• Make sure your palette works for everyone
Try it:
palette-tester.9elements.com
• Supports both WCAG 2.0 and APCA
• See how all colors compare at a glance
• Import/Export CSS or JSON variables
• Make sure your palette works for everyone
Try it:
palette-tester.9elements.com