Notches remind me of this bench.
It's basically the hostile architecture of user experience. If I want to full screen anything, part of it is getting cut off.
Better hope nothing important was under that notch.
If you appreciate the features I've helped develop - container queries, cascade layers, mixins & functions, scope, progress & interpretation, logical shorthands - consider supporting that work though open collective:
https://opencollective.com/oddbird-open-source
or bring me in to teach a workshop for your team:
The State of CSS 2025 survey results are now available!
Dipping back into view transitions after seeing @kevinpowell's recent video (https://www.youtube.com/watch?v=f_aqzyIDudI). How would that work on my multitheme website? I used @JaneOri's scalar trick to find the exact radius of the clip-path circle at the origin of the transition (top right corner of the container or viewport) using min, sqrt, pow, tan, atan2… This was a fun little #CSS challenge!
Didn't push this live because there's a ~250ms interactivity delay after the transition. Bleh, gotta fix that first.
Study: When experienced open-source developers used current AI tools, work took 19% longer to complete. In spite of which, the developers *thought* they were working *faster.*
It’s just one study, and they don’t claim anything beyond what they observed. Their results are not predictive. Still....
(There must be a name for the psychological trick we play on ourselves to believe we’re being more productive even when we’re considerably less so.)
Hat tip: Dave Martin
https://metr.org/blog/2025-07-10-early-2025-ai-experienced-os-dev-study/
💡 CSS Tip!
Do you know safe alignment? It's when you make sure your overflowing content is always fully accessible on scroll regardless of the alignment configuration.
https://css-tip.com/safe-align/
It's not something new but you are probably not aware about it.
G̶o̶o̶g̶l̶e̶r̶… ex-Googler.
Believe it or not, the parallels are all there.
@chriscoyier And if you want your SVG dividers looking like mountain ridges and generative I've got you! 😉
https://alistairshepherd.uk/writing/svg-generative-ridges/
One use case for getting the width/height of any element is to be able to count a lot of things.
Here is an example where I am counting the lines of text. There is no JavaScript, and the number adjusts based on the content you enter.
Online Version: https://css-tip.com/count-lines/
But – yes, there is a but – there’s one big caveat with this: Custom Properties that get animated, animate on the main thread (😭) … so be cautious!
See https://brm.us/animate-custom-properties for details.
(Also: go star https://issues.chromium.org/issues/40890539 to signal interest to try and get this fixed)