@CSS__Cafe

Regular online event, free to attend, w/ talks on various topics around CSS. Organized by @derSchepp & @supremebeing09. @css__cafe@mastodon.social

 Online
css.cafe
Joined April 2020
  • Tweets658
  • Following7
  • Followers2.2K
66Media
CSS as a state machine? NO WAY! Well, actually... 🎤 CSS State Machine — Brecht De Ruyte From :has() to container queries and scroll-driven animations — CSS can now manage and react to state in ways that used to require JS. April 29th in Düsseldorf 👇 meetup.com/engineering-kiosk…
Poster for the Engineering Kiosk Rhine-Ruhr Meetup on Wednesday, April 29th, 2026. It features three speaker portraits: Brecht De Ruyte at the top, and Alaa Reuschenbach and Lucas Dohmen below. The talks are titled “CSS State Machine” and “Performance over Perfection.” The event is sponsored by SIA Consulting, whose logo appears at the bottom right.

ALT Poster for the Engineering Kiosk Rhine-Ruhr Meetup on Wednesday, April 29th, 2026. It features three speaker portraits: Brecht De Ruyte at the top, and Alaa Reuschenbach and Lucas Dohmen below. The talks are titled “CSS State Machine” and “Performance over Perfection.” The event is sponsored by SIA Consulting, whose logo appears at the bottom right.

3
3
282
In town for @CSSDayConf on June 5–6? Join the Pre-CSS Day Afternoon Event on June 4 at 16:00 — hosted by CMD Amsterdam 🇳🇱 Talks by Nils Binder & Miriam Suzanne, plus student CSS showcases ✨ 🎟 Free RSVP: gath.io/KwVtysIkOWcUPPpSUO58…
150
CSS Café retweeted
Una 🇺🇦
@Una16 May 2025
Introducing 🤯 flex-wrap: balance 🤯 Would you use this? ⚠️ Not a "real" feature yet, just something one of our engineers has been working on. (You can try it out in the latest Chrome Canary with the experimental web platform features flag though!)
77
118
26
1,499
93,385
curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG
GSAP
@greensock1 Apr 2025
📬 The monthly GSAP Spotlight has made it's way into your inbox! Featuring our Site of the Month - Cash App by @quentinhocde and @indexstd & a recap of March's best work from the creative dev community. Read it online - r.sib.greensock.com/3g4sxry6… Sign up - gsap.com/newsletter.html
20
94
3
1,803
105,056
These were the links that flew by during today's meetup: * sinds1971.nl * sinds1971.nl/csscafe/ (Sanne's demos) * codepen.io/collection/rBVWNY * youtube.com/watch?v=6-258RYZ… * opencollective.com/oddbird-o… * weloveweb.fdnd.nl/
4
178
Ever wondered why tennis drags while squash is nonstop action? Or why tennis feels like watching paint dry? 🤨🏆🔥 Then Manuel has the perfect talk for you, happening tomorrow at 5PM CET / 11AM EST at our cozy café ☕ 👇 meetup.com/css-cafe/events/3…

Manuel Matuzović - Color in CSS Or How I Learned to Disrespect Tennis, Thu, Feb 20, 2025, 5:00 PM |...

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

meetup.com
2
266
Ever wondered what a color space is & what a color model? What wide gamut means? If P3 is a color space, a color model, or maybe even both? Also LCH, OKLAB, WTF...?!😖 Then we have the perfect talk for you, happening tomorrow @ 5PM CET / 11AM EST ☕ 👇 meetup.com/css-cafe/events/3…

Manuel Matuzović - Color in CSS Or How I Learned to Disrespect Tennis, Thu, Feb 20, 2025, 5:00 PM |...

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

meetup.com
3
302
✂️ Achieve optical balance with CSS text-box-trim → goo.gle/4jcUOFX Chrome 133 lets you tailor the space above and below text, giving developers and designers more control over text layout and appearance.
12
104
35
821
124,793
CSS Café retweeted
Bramus@bramus9 Feb 2025
CSS Custom Functions are coming … and they are going to be a game changer! 👉 brm.us/css-custom-functions
A custom function that returns different values based on light or dark mode being used to visit the page.

ALT A custom function that returns different values based on light or dark mode being used to visit the page.

10
72
18
426
37,995
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's presentation had plenty of links on the slides which you can find here: noti.st/rachelandrew/Aj6atb/

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

noti.st
1
4
159
There Rachel also mentioned this reading-flow examples page: chrome.dev/reading-flow-exam… And finally, Lippe tried to break the internet with this adventurous contruction: lpnsk.com/gtr/flexbox.html :D
98
This is going to happen tomorrow 😍 👇 meetup.com/css-cafe/events/3…

Rachel Andrew - A solution for the visual and source order disconnect, Thu, Feb 6, 2025, 5:00 PM |...

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

meetup.com
3
224
ya'll got so excited, you excited the engineer to start prototyping! xitter.cf/intenttoship/status/18…
Adam Argyle
@argyleink29 Jan 2025
CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it noamr.github.io/squircle-tes… awesome work @nomsternom and @smfr!
1
6
56
6,496
😍 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 variable names from other variables, making code like this possible: 😍 Spec: drafts.csswg.org/css-values-… Proposal (by @bramus): github.com/w3c/csswg-drafts/…
.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))); }

ALT .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))); }

6
26
101
6,239
Join us for the first CSS Café meetup of the year! 🎉 @rachelandrew will show us a new solution for the visual vs. source order disconnect in CSS: the upcoming reading-flow property! 🌐✨ meetup.com/css-cafe/events/3…
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.

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

4
140
CSS Café retweeted
Una 🇺🇦
@Una22 Jan 2025
Dang I'm excited about new semantic attr() capabilities in CSS! I wrote a post about why this feature is so powerful, how it could change the way you build components, and how I would use it. Advanced attr() is rolling out in Chrome 133 starting next week 🥰 una.im/advanced-attr/

una.im | New capabilities for attr()

Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.

una.im
7
29
183
12,191
CSS Café retweeted
Bramus@bramus17 Dec 2024
🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY! 👾 Demo: ie-page-transitions.netlify.… ⌨ Repo: github.com/bramus/ie-page-tr… To configure these, use the meta tags from the olden days + load up the library. Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).
5
8
1
72
7,886
CSS Café retweeted
Bramus@bramus20 Nov 2024
As of Chrome 131 you have more options to style `<details>` and `<summary>`. You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses. developer.chrome.com/blog/st…
8
79
9
610
42,361
The stretch keyword: a better alternative to width: 100% in CSS? fullystacked.net/stretch/ (via @stefanjudis)
6
257
30 years ago, on Oct 10 1994, I first proposed CSS. It's been an adventure to see CSS as a baby, teenager, and aspiring professional. Sometimes misbehaved, but mostly a source of joy and excitement. w3.org/People/howcome/p/casc… @w3c @printcssrocks @WebDesignMuseum @prince_xml
20
98
11
542
41,435
Load more