CSS Café

Latte in a brown cup with a date and a CSS Café sticker on a wooden tray.

I usually put stickers on my laptop, but since it’s almost full, I placed this one from @css.cafe on my coffee tray instead 😀

25.06.2025 09:14 — 👍 9    🔁 1    💬 1    📌 0

A breakfast buffet featuring rows of pastries and sliced cakes. The front trays display banana bread and blueberry loaf slices on floral-patterned plates. Behind them, wooden boards hold neatly arranged croissants and pain au chocolat.

Nils, Nesim, and Jan (from left to right) stand smiling in front of a CSS Café banner. All three are wearing light pink shirts with a small owl graphic. The setting is a covered courtyard with checkered floor tiles and glass walls. A few other people are visible in the background.

Julia stands at the front of a cozy, wood-beamed room giving a talk to an attentive audience. Behind her, a presentation slide reads: ‘But can you even do anything useful?’

Johannes and Vilde are presenting in front of an audience at an indoor event. A large screen behind them displays the slide title “Ongoing Events.” The room is filled with seated attendees, viewed from the back, and has modern ceiling lights and wooden beams.

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! 🙌

10.06.2025 07:48 — 👍 12    🔁 1    💬 2    📌 0

I saw @miocene.io give a talk (at @css.cafe‬) about building polished practical UI, like transitions on buttons/icons in serious business-y apps.

But wait—isn't she known for CSS art, creating sculptures and paintings with a bunch of divs?

Huh. It's almost like CSS skills are broadly applicable.

08.06.2025 19:51 — 👍 55    🔁 2    💬 0    📌 0

State of CSS 2025 Take the State of CSS survey

The 2025 State of CSS survey is now open! survey.devographics.com/en-US/survey...

04.06.2025 13:45 — 👍 49    🔁 41    💬 1    📌 4

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 ...

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...

30.05.2025 15:22 — 👍 5    🔁 3    💬 0    📌 0

Cascading Layouts A workshop on resilient CSS layouts

We're giving away a free ticket to the CSS Layout Workshop. To be entered in the drawing, comment below with…

- A question you have about CSS layout
- Or a fun demo, trick, or snippet of CSS

The winner will be announced on Friday, April 18!

#css www.oddbird.net/workshops/ca...

15.04.2025 15:45 — 👍 34    🔁 12    💬 7    📌 0

Sanne sinds 1971 Sanne's digitale speeltuin.

These were the links that flew by during today's meetup:

* sinds1971.nl
* sinds1971.nl/csscafe/ (Sanne's demos)
* codepen.io/collection/r...
* www.youtube.com/watch?v=6-25...
* opencollective.com/oddbird-open...
* weloveweb.fdnd.nl

03.04.2025 16:22 — 👍 3    🔁 0    💬 0    📌 0

This happens in less than 9 hours 👇

03.04.2025 06:24 — 👍 6    🔁 4    💬 1    📌 0

Sanne ’t Hooft - Experimenting with CSS anchor positioning, Thu, Apr 3, 2025, 5:00 PM | Meetup +++ Experimenting with CSS anchor positioning +++ by Sanne \`t Hooft +++ Yet another new CSS kid in town—anchor positioning. Connect popovers to buttons in a snap. But the

Join us in 2 days for a dive into side projects that push the limits of what CSS can do — both useless and surprisingly useful.

Sanne `t Hooft will demo the new CSS anchor positioning feature 🎁 — live coding, quirks, and insights included!

👉 www.meetup.com/css-cafe/eve...

01.04.2025 10:14 — 👍 2    🔁 1    💬 0    📌 1

CSS Café meets CSS Day: an in-Person Pop-Up Event!, Sat, Jun 7, 2025, 10:30 AM | Meetup **+++ CSS Café meets CSS Day: an in-Person Pop-Up Event! +++** It's that time of year again—time for [CSS Day](https://cssday.nl/2024), our beloved in-person CSS conferenc

Yes, there are! As is nowadays a tradition, we will gather the Saturday after CSS Day at the Hoxton for a relaxed post-conference cool down 👇🏻
meetu.ps/e/NPwJs/3C5m...

It would be great to have you there! ✨

30.03.2025 12:30 — 👍 3    🔁 0    💬 1    📌 0

High definition CSS color guide  |  CSS and UI  |  Chrome for Developers CSS Color 4 brings wide gamut color tools and capabilities to the web.

Further Reading Material from Manuel:

* High definition CSS color guide developer.chrome.com/docs/css-ui/...
* Accessible Palette: stop using HSL for color systems www.wildbit.com/blog/accessi...
* Björn Ottosson - A perceptual color space for image processing bottosson.github.io/posts/oklab/

20.02.2025 17:51 — 👍 2    🔁 2    💬 0    📌 0

Hexcodle - The Daily Hexcode Guessing Game! Can you guess today's hexcode color? Challenge your color instincts and decode the hexcode with Hexcodle! Inspired by Wordle, but for color enthusiasts.

Color & (Color) Font Tools:

* hexcodle.com
* oklch.com
* lightningcss.dev/transpilatio...
* developer.mozilla.org/en-US/docs/W...
* wakamaifondue.com
* gradient.style
* git.apcacontrast.com/documentatio...

20.02.2025 17:51 — 👍 1    🔁 1    💬 1    📌 0

The science of color & design - Material Design 3 How Material used color science to make design easier and more expressive than ever before.

* Science of Color Design m3.material.io/blog/science...

* OKLCH in CSS: why we moved from RGB and HSL evilmartians.com/chronicles/o...

20.02.2025 17:51 — 👍 0    🔁 0    💬 1    📌 0

Interaction of Color An interactive edition of one of the most influential books on color ever written offers users an entirely new way to experience Josef Albers’s masterwork

Scientific books / resources about colors and color spaces:

* Interaction of Color interactionofcolor.com
* Okay Color Spaces ericportis.com/posts/2024/o...
* Universal Principles of Color muster-schmidt.com/products/uni...

20.02.2025 17:51 — 👍 0    🔁 0    💬 1    📌 0

Talk Videos:

* Read color hex codes www.youtube.com/watch?v=eqZq...
* Better than Lab? Gamut reduction CIE Lab & OKLab www.youtube.com/watch?v=dOsp...
* Webfonts in 2019 www.youtube.com/watch?v=Gy1T...
* Problems solved by OpenType www.youtube.com/watch?v=TreB...

20.02.2025 17:51 — 👍 0    🔁 0    💬 1    📌 0

Color in CSS Or: How I Learned to Disrespect Tennis by Manuel Matuzovic Everybody’s talking about container queries, nesting, scroll-driven animation, and view transitions. In all the excitement for these new modules, one topic is a bit overlooked: color in CSS. Manuel Ma...

Whew, what a ride! 🤯 😅 🚀 🎨

We had plenty of links circulating during @matuzo@front-end.social's talk today - and he sent us a few more reading tips. Here they are:

Slides:

* noti.st/matuzo/2iWUw...

20.02.2025 17:51 — 👍 4    🔁 2    💬 1    📌 0

Manuel Matuzović - Color in CSS Or How I Learned to Disrespect Tennis, Thu, Feb 20, 2025, 5:00 PM | Meetup +++ Color in CSS Or How I Learned to Disrespect Tennis +++ by Manuel Matuzović +++ Everybody’s talking about container queries, nesting, scroll-driven animation, and view

Ever wondered why tennis drags while squash is nonstop action? Or why tennis feels like watching paint dry? 🤨🏆🔥

Then @matuzo.at has the perfect talk for you, happening tomorrow at 5PM CET / 11AM EST at our cozy café ☕ 👇

www.meetup.com/css-cafe/eve...

19.02.2025 15:10 — 👍 7    🔁 3    💬 0    📌 0

Manuel Matuzović - Color in CSS Or How I Learned to Disrespect Tennis, Thu, Feb 20, 2025, 5:00 PM | Meetup +++ Color in CSS Or How I Learned to Disrespect Tennis +++ by Manuel Matuzović +++ Everybody’s talking about container queries, nesting, scroll-driven animation, and view

Ever wondered what a color space is & what a color model? What wide gamut means? If Display-P3 is a color space, a color model, or maybe even both? Also LCH, OKLAB, WTF...?!😖

Then @matuzo.at has the perfect talk for you, happening tomorrow at 5PM CET / 11AM EST ☕ 👇

www.meetup.com/css-cafe/eve...

19.02.2025 11:24 — 👍 6    🔁 3    💬 0    📌 0

reading-flow examples

There Rachel also mentioned this reading-flow examples page: chrome.dev/reading-flow...

And finally, Lippe tried to break the internet with this adventurous contruction: lpnsk.com/gtr/flexbox.... :D

06.02.2025 17:14 — 👍 1    🔁 0    💬 0    📌 0

A solution for the visual and source order disconnect by Rachel Andrew Using grid layout to position items can sometimes result in a disconnected tab order, creating challenges for accessibility. While avoiding reordering has traditionally been the advice, this approach ...

Thank you folks for attending today's meetup. It was wonderful to be back at it!

We didn't circulate too many links this time in the chat, but @rachelandrew.bsky.social's presentation had plenty of links on the slides which you can find here: noti.st/rachelandrew...

06.02.2025 17:14 — 👍 10    🔁 1    💬 1    📌 0

Rachel Andrew - A solution for the visual and source order disconnect, Thu, Feb 6, 2025, 5:00 PM | Meetup +++ A solution for the visual and source order disconnect +++ by Rachel Andrew +++ Using grid layout to position items can sometimes result in a disconnected tab order, cr

This is going to happen tomorrow 😍 👇

www.meetup.com/css-cafe/eve...

05.02.2025 19:52 — 👍 11    🔁 5    💬 0    📌 0

.accent { --hue: blue; --tint: 80; } button { --tint-darker: clamp(10, var(--tint) - 10, 90); background: var(ident(--color- var(--hue) "-" var(--tint, 80))); border: 1px solid var(ident(--color- var(--hue) "-" var(--tint-darker, 70))); }

😍 PSA: ident() is an upcoming CSS feature I’m incredibly excited about and you're about to be too.

It will allow you to compose CSS variables from other variables, making code like this possible. 😍

Spec: drafts.csswg.org/css-values-5...
Proposal (by @bram.us ): github.com/w3c/csswg-dr...

22.01.2025 18:53 — 👍 436    🔁 51    💬 23    📌 6

Hahaha!

And done ✅✨

22.01.2025 17:52 — 👍 2    🔁 0    💬 1    📌 0

Absolutely! Hold our coffee while we fix it...

22.01.2025 17:50 — 👍 2    🔁 0    💬 1    📌 0

Event announcement for the CSS Café meetup: 'A Solution for the Visual and Source Order Disconnect.' The graphic includes a chalkboard-like background with a pink CSS Café logo in the top right. The title is prominently displayed in bold white text. Event details follow: 'Feb 6th 2025 | 5 PM CET by Rachel Andrew.' A photo of a speaker (Rachel Andrew) is shown on the left, framed like a Polaroid. On the right, there is a visual representation of boxes labeled 1–4, showing a reordering process. At the bottom right, there’s an image of a cup of coffee. The theme suggests accessibility and layout discussions with a casual, café vibe.

Join us for the first CSS Café meetup of the year! 🎉

@rachelandrew.bsky.social will show us a new solution for the visual vs. source order disconnect in CSS: the upcoming reading-flow property! 🌐✨

www.meetup.com/css-cafe/eve...

22.01.2025 16:57 — 👍 14    🔁 12    💬 0    📌 1