Wrote a post about combining CSS shorthands with custom properties to encapsulate related system tokens. mobalti.com/the-power-of... #CSS

The Power of CSS Shorthands in the Era of Custom Properties | Arby @mobalti

Encapsulating System Tokens with Shorthand Custom Properties.

mobalti.com

🚀 🚀 It's launch day! 🚀 🚀 CodePen 2.0 is officially released! To celebrate, there's: 1. A brand new homepage codepen.io/2 2. An in-depth blog post blog.codepen.io/2026/07/23/t... 3. A Podcast blog.codepen.io/2026/07/23/4... 4. A brand new @keyframe.rs live stream youtube.com/live/sgwPEW1...

CodePen – Online Code Editor For Building & Deploying Websites

Build, share & learn with CodePen 2.0, the best community for developers with an all new online code editor featuring a file system, compiler, realtime & async collaboration, deployment, and more.

codepen.io

I’ll use the quote I did for this page. Miriam has a unique talent of being extremely technical with CSS but communicates that so seamlessly and so inclusively that regardless of what level you’re at now, you’ll be so far beyond that when you learn from her. A true super talent. A bargain!

Mia [data-css=poetic]@miriam.codes · last mo.

Poetic CSS course is live for early-bird registration! Only available during July. Thanks for your patience, we had some last-minute fixes. #css courses.oddbird.net/poetic-css/

Container style queries: a new era of declarative viewport-based UI variations on the web mobalti.com/responsive-c... cc @miriam.codes @tabatkins.com @nerdy.dev #CSS

Unlocking responsive components with container style queries | Arby @mobalti

Using native CSS to manage component variations across viewport sizes.

mobalti.com

Prop For That 📣 An a-la-carte #JS library for #CSS developers that writes meaningful realtime CSS variables to an element: - value of an input - pointer position - size of scrollbar(s) - colors in an image/video - element's visibility - tons more… nerdy.dev/prop-for-that

Prop For That

Everything JS knows, now CSS knows.

nerdy.dev

Firefox 151 is out now, and brings with it some tasty new web platform features: 🎉 Container style() queries 🎉 Web Serial API 🎉 Document Picture-in-Picture API 🎉 keyboardLock on requestFullscreen …and more! developer.mozilla.org/en-US/docs/M...

Firefox 151 release notes for developers (Stable) - Mozilla | MDN

This article provides information about the changes in Firefox 151 that affect developers. Firefox 151 was released on May 19, 2026.

developer.mozilla.org

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

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

CSS `@function` + relative colors = adaptive palettes that match content tone. Demo: codepen.io/mobalti/full... cc @miriam.codes @tabatkins.com @lea.verou.me #CSS

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

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

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

Props Color Finder Updates: - Enhanced contrast for picked colors - Added option to pick the closest named CSS colors - Introduced OKLCH color picking - Enabled LAB Mode for perceptual color matching - Added Quick Pick button (beta) leveraging the EyeDropper API props-color-finder.netlify.app

Check out this AI chat hero section example on @codepen.io with a cool backdrop. It creates a futuristic feel that influences user behavior. It is a perfect fusion of aesthetics and functionality. CodePen: codepen.io/mobalti/full...

Using the Web Audio API, I built this Beat Reactor (audio-reactive) with a 3D text effect. Crafted with Open Props. Check it out on CodePen: codepen.io/mobalti/full... @codepen.io #CSS #HTML