ok hear me out.
If we put a unique `container-name` on the root of all of our components... that's... perfect scoping, via:
@container unique-name {
button {}
.whatever {}
}
That's platform-level CSS modules. That's the scoping we need! frontendmasters.com/blog/name-on...
After shape() and border-shape, another great feature in the CSS Shape world is on the way.
I will be missing all the hacky-gradients-math-stuff I was doing 😅
#css capable of more and more every year. things that were real headaches keep entering the "worth doing and won't cost your sanity" zone of ui ux
Just had an enlightenment about CSS View transitions. They are much more powerful than I thought AND much easier to use!
You really only have to give your element a unique view-transition-name. This has to be consistent across all pages the element appears on. That’s it!
Frontend News #22
❤️ Detect at-rule support in CSS
👉 pointer-box-offset property
🦄 Creative ways are to select the HTML element
😍 x86 CPU architecture in CSS
Featuring @bram.us, @robinrendle.bsky.social, @tylersticka.com, @dxnny.fun, @rebane2001.bsky.social. 🙏
cssw.io/frontend-new...
YES. The more CSS and design people I add to the feed, the better it gets. The vibes are immaculate.
bless the CSS people. my tech news feed is all AI but the CSS people are still styling and just doing their thing because its fun and they love it and they make neat things. my heroes.
Illustrates CSS specificity issues without `@layer` versus controlled order with `@layer`, highlighting component hierarchy and conflicts.
Your CSS specificity wars are over.
@ layer lets you control the cascade without !important hacks.
The problem with CSS: Specificity decides what wins.
What’s !important: Light/Dark Favicons, “@ mixin”, Object-View-Box, and More, by @dxnny.fun (@csstricks@mastodon.social):
https://css-tricks.com/whats-important-8/
#css #retrospectives
Fun, a CSS competitor! Push those boundaries!
I really didn't like Bsae UI's drawer implementation so I thought I'd try recreating the CSS scroll snap drawer I had a while back
Code snippet demonstrates CSS `@starting-style` for transitioning background color from transparent to green over 1.5 seconds.
🆕 Animate elements from display: none
CSS `@starting-style` lets you define the initial style for elements entering the page, enabling enter animations without JavaScript.
⋅ Combine with transition
⋅ Works with popover and dialog
Learn more 👇
developer.mozilla.org/en-US/docs/...
Everyone’s flexing frameworks while I’m out here vibing like it’s 2003.
Plain PHP and raw CSS, with a splash of Alpine.js for the modern bits. No build steps. No faff. Just pure productivity. 🤷♂️
I think CSS carousels would replicate the behavior better, but they only work in Chrome and they're quite buggy.
Una on stage, slide reads: Key UX principles 1. reduce noise 2. Guide users 3. Personalize
Una on stage showing how interestfor can make hover cards show a user profile when hovering/focusing traditional <a> links
Una on stage showing the styleable parts of <select>
@una.im starts with showing how amazing modern CSS is.
interestfor is super interesting to add hover cards on links, without any JS.
Skeuomorphic Egg Toggle Switch [HTML + CSS + JS]
Organic mechanics. Complex box-shadow layering and border-radius manipulation. Tactile feedback through depth. Source code: freefrontend.com/code/skeuomo...
No spicy takes here, just genuine interest and notes on whatever the heck "Generative UI" is supposed to be.
css-tricks.com/generative-u...
Could a lot of people have voted that as a joke, not realizing that it was a serious poll?
Three overlapping circles represent color mixtures in the OKLab color space: blue, pink, and green with various combinations labeled.
Your design system has 47 color tokens.
But most of them are just... variations of 3 base colors.
color-mix() in CSS generates all those shades from one source.
@mixin --foo(--arg <length>) { @result { &, & > h2, & + p { width: var(--arg); } } } div { @apply --foo(10em); font-size: 10px; } div > h2 { font-size: 20px; } div + p { font-size: 30px; }
🚨 Want mixins in CSS?
Help the CSS WG by telling us what feels natural to you!
Look at the code in the screenshot. What resulting widths would *you* find least surprising for each of div, div > h2, div + p?
Polls:
┣ Github: github.com/LeaVerou/blo...
┗ Mastodon: front-end.social/@leaverou/11...
Now that my favorite feature is well supported, let's create a new set of CSS loaders 🤩
The Squishy Collection: css-loaders.com/squishy/
Single-element implementation powered by shape() (and linear() for the bouncy ones!)
Pick your favorite one 👇
Two framed illustrations show an image without and with an 'object-view-box' CSS property applied, highlighting the cropping effect.
Wouldn't it be great to have native image cropping in CSS?
It actually exists: object-view-box.
Building dynamic toggletips using anchored container queries: "With anchored container queries and other modern #CSS features like attr(), corner-shape, and interest invokers, we can use progressive enhancements to create some really awesome toggletips." piccalil.li/blog/buildin...
So, corner-shape can be animated. Notice the added sprinkle of color-contrast().
css-tricks.com/experimentin...
