Style queries fail when the container and the query are in separate stylesheets or `<style>` blocks.
Firefox Nightly (149.0a1) 🦊
bugzilla.mozilla.org/show_bug.cgi...
@webdevs.firefox.com @jakearchibald.com #CSS #WebDev
Can’t wait! It’s the missing piece of modern CSS, hope to see this ship in @webdevs.firefox.com stable soon!
Great article! Practical, realistic examples, and nice to see logical properties used in the examples. Excellent work 👌
You need to install the `es6-string-html` extension in VS Code for the `/* html */` syntax highlighting to work.
marketplace.visualstudio.com/items?itemNa...
The future of the web is more native than you think!
Check out this customizable select element with an animated backdrop.
CodePen: codepen.io/mobalti/full...
#CSS @codepen.io @developer.chrome.com
The future of the web is more native than you think!
Check out this customizable select element with an animated backdrop.
CodePen: codepen.io/mobalti/full...
#CSS @codepen.io @developer.chrome.com
When colors match the emotional tone of the content, the brain perceives less friction between “frame” and “picture.
CSS `@function` + relative colors = adaptive palettes that match content tone.
Demo: codepen.io/mobalti/full...
cc @miriam.codes @tabatkins.com @lea.verou.me
#CSS
The ones that impact my codebase most are light-dark() and relative colors. The first gives me more control over theming, and the second helps me move fast by keeping the core color set small.
min() & max()
I re-created Open Props shadows with the new CSS `@function`.
This spec is wild ♥️ and it solves problems we’ve been chasing in CSS for years.
Demo 👉 codepen.io/mobalti/pen/...
cc @miriam.codes @tabatkins.com @bram.us
Hero in Monochrome
The elegance of OKLCH in action: adaptive color with built-in accessibility
Built with Open Props
CodePen: codepen.io/mobalti/full...
#css #html #webDev
Cards with animated gradient borders
Modern CSS ⚡💪
Gradient from gradient.style
CodePen: codepen.io/mobalti/pen/...
@codepen.io #CSS
Congrats, Adam! 🎉👏🔥
It’s one of my favorite tools, I use it all the time. So excited about the new layer feature. Thanks, Adam! ♥️
Thanks Miriam!
That’s great! Feels like libraries have been ignoring logical properties lately, so this makes me really happy!
So clean with logical properties all over. Great job!
I read mostly on a Kobo, and Pocket let me send articles straight to it. It’s basically my article database!
One of Mozilla’s best products is gone. So frustrating!
I really enjoy reading these posts, I've bookmarked so many of them and often use them as refs. My fav is "10 Powerful Ways to Use CSS Variables."
This really helps manage vertical spacing in markdown-style content, especially as we move toward more prompt-based interfaces. Also love the logical values!
Here’s the same carousel in Firefox. No scroll buttons or markers yet, but still fully functional and accessible.
Meet the future of carousels: no JS, just CSS!
✅ Scroll Buttons
✅ Scroll Markers
✅ Scroll-State Queries
✅ Scroll Initial Target
✅ Anchor
As @nerdy.dev said: "It'd be very difficult to make a more accessible carousel than this."
@codepen.io 👉 codepen.io/mobalti/full...
This is awesome! Love how the animation really enhances the UX, it makes it so clear to the user what just happened when they open the `<details>` element. Smooth and smart!
❤️❤️❤️
Awesome! ❤️
Infinite Orbit Animation with CSS Trigonometry &
@property
✅ Pure CSS Orbit Animation → No JavaScript required
✅ Dynamic Tooltips → Auto-adjust position & alignment with Style Queries
Huge thanks to @bram.us for the fantastic article!
@codepen.io
Live demo : codepen.io/mobalti/full...
#CSS
It’s like image optimization. In my opinion, it should be treated on a case-by-case basis.
Another benefit of text-wrap: balance is when the text gets translated to languages other than English. This allows the author to prevent weird behavior if the text becomes longer or shorter.
