I feel you. The (dis)attention to the details is driving me mad.

On an unrelated note:

I upgraded to macOS Tahoe last night. I apologize for the negativity but the UI is just so ugly I instantly regretted the upgrade. And now I learn that it drains the battery, which I noticed during the day today. It's not lasting nearly as long as it usually does. Great. 😭

View transitions, anchor positioning, ​@scope, focusgroup, invokers, popovers, container queries, grid, relative colors, style-able selects, and more.

The web feels like it’s getting so good at exactly the moment our collective worst practices are getting calcified as the default.

Dynamic Tooltip Position with Anchor Positioning A tootlip that follows its anchor while adjusting the position of its tail

Has anyone figured a bulletproof way to use anchor positioning w/ a tooltip pointer? @css-only.dev got far¹²³ but these all depend on the tooltip being opaque.

Just got nerd sniped trying to figure this out!

¹ css-tip.com/tooltip-anch...
² css-tip.com/tooltip-anch...
³ css-tip.com/tooltip-anch...

For people who think it's useless because we can simply define max/min-width are missing the point.

It's not only about that specific case, but also about any combination that involves other values as well.

The following CSS code: .box { border-radius: calc(sign(100cqi - 100%)*2rem); }

💡 CSS Tip!

A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.

css-tip.com/conditional-...

cc @ishadeed.com @una.im

Next week is a massive week for Frontend in Milano:
On Monday, you will find me at the ItaliaJS reunion: discord.gg/5ebTs9kc?eve...
On Tuesday and on Wednesday, see you at Codemotion conferences.codemotion.com/milan2025/
And on Thursday evening, there is the Effect Meetup:
luma.com/ey6avxtv

Lots of questions about how to get the FPS meter to show up and a few other CSS rendering debugging tools

Popover API - Web APIs | MDN The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either using HTML att...

developer.mozilla.org/en-US/docs/W... popover should solve this

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine What exactly is a displacement filter? In this article, Dirk Weber will be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all e...

The idea is explained in a lot of detail in this article www.smashingmagazine.com/2021/09/deep... and you can see the actual displacement map used in the video.

Similar idea to these bulge and ripple tests I made a long time ago codepen.io/thebabydino/... (no Firefox)

This explains so much

Accessibility days Milan! See you there

State of Devs 2025 Take the State of Devs survey

This year's State of Devs 2025 survey is now open! survey.devographics.com/survey/state...

Ok. It’s a nice game. I'm even blabbing on steam deck. That, a Juicy. JHP starts a juggle! #cotw #cotw_hotaru

Learning how CSS-only carousels are going to work YouTube video by Kevin Powell

Scroll Buttons, Scroll Markers, Scroll State Queries, and Scroll Driven Animation are such a powerful set of #CSS features that I hesitate to use the term carousel. Hopefully #safari will follow soon. Now let's dig into some learning with @kevinpowell.co

m.youtube.com/watch?v=g03Y...

This custom property trick solves a common CSS problem YouTube video by Kevin Powell

This custom property trick solves a common #CSS problem @kevinpowell.co

www.youtube.com/watch?v=Stxz...

Corporate sucks. Sorry mate

A Selfie with a tired face

B eing MC at a tech conference isn’t hard.

Says Davide 25 years old.

See you on Monday as a Speaker for Web Day!

A desk with ps5 accessible controller and Mac computers

Playing with #a11y

2025 is time to learn CSS Anchors Positioning
Part of Interop 2025, very likely to land in all browsers this year

I played this educative mini-game today and learned that they are even more powerful than I thought 🤯

Ex: position item close to 2 anchors

anchoreum.com/

Huh 😮

Screenshot of the homepage of the Color and Contrast guide with the tagline: An interactive guide to color & contrast A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast. A very long table of content is displayed on the left, and an orange yellow illustration of stacked rectangles is displayed on the right.

A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast, by Nate Baldwin. It provides short introductions and many links to dig further.
colorandcontrast.com/#/

The relevant code for my solution and the visual result.

Someone asked (yet again) on reddit for that inverted radius tab pattern so here's a pure #CSS solution from me www.reddit.com/r/css/commen...

✨ no extra elements or pseudos needed for effect
✨ only need to set border, background, border-radius

Kill bill vol 1 ost vinyl

The king of fighters 98 ost vinyl

Radiohead, System of a Down, Korn, Dark Tranquillity Vinyls

I’ve updated my Pomodoro technique and working playlist all at once. It’s good not to have a precise counter but to follow the flow till you have to change the vinyl side. Also
Listening to an entire album instead of random songs on Spotify is an experience I suggest reviving sometimes

Braille playing cards

Braille writing instruments

Braille keyboard

Braille lego set

Today, I visited the Google Accessibility Discover Center in Milan. It’s a fantastic journey, and experiencing firsthand all the ways someone can navigate the a11y spectrum is something every crafter should do. ADC is open across Europe. Search for the ones near you and do you a favour, book a visit

CSSWG is talking about

#CSS `superellipse`

for SQUIRCLES
(and more like notches, cutouts and bevels)

try it
noamr.github.io/squircle-tes...

awesome work @nomster.bsky.social and Simon Fraser!

columns-xxs, columns-sm, columns-md, columns-xl, columns-xxl. Fixed (or maybe it’s worse? 😝)

There are a few use cases that I appreciate, like color pickers or swatchers or displaying measurements on a page. However, as I navigate codebases for work, I often question the effectiveness of mixing props and CSS—I'm looking at you, styled-components. It's late to complain though, so 😬

I'm scared to find in the next years: data-columns-xxs, data-columns-sm, data-columns-md, data-columns-xl, data-columns-xxl