Sign in

Arby

@mobalti.bsky.social
44 followers 41 following 58 posts

Frontend Developer mobalti.com

PostsRepliesMedia
Arby @mobalti.bsky.social · 06/10/2026
The problem that they are busy solving problems for tools created to solve the scoping, so they forget the orginal problem :)
020
Arby @mobalti.bsky.social · 25/09/2026
Thanks for the link! I hope that in the future, for features like this, the three engines can collaborate more and ship them around the same time. It’s an existing feature in a new context, so it’s easy to miss! We can’t compare it to a new property where developers expect different browser support.
010
Arby @mobalti.bsky.social · 25/09/2026
justify-self in block layouts is starting to cause implementation problems. It’s an existing property in a new context, so we don’t think to check browser support. Now justify-self: center centers in Chromium, but not Firefox or Safari. (cc @jensimmons.bsky.social @jakearchibald.com @bram.us )
101
Reposted by Arby
Mia [data-css=poetic] @miriam.codes · 16/09/2026
I've heard that CSS subgrid is difficult to progressively enhance – and I disagree! Here's how I create subgrid fallbacks with one small addition. youtu.be/2ESqkg20JaE Join my @smashingconf.com workshop for more maintainable CSS! smashingconf.com/online-works... #CSS
youtu.be
CSS Progressive Enhancement with Subgrid
YouTube video by Winging It
03210
Arby @mobalti.bsky.social · 13/09/2026
Thanks @bram.us , your article on `@property` performance helped shape the profiling section. It was a really useful reference while building this.
010
Arby @mobalti.bsky.social · 13/09/2026
CSS can count, calculate, and shape motion now. I made a sine wave with sin(), sibling-index(), and sibling-count(), then compared it with a compositor-friendly alternative. Full breakdown + live demos ↓ mobalti.com/css-sine-wave/ #CSS
100
Reposted by Arby
Firefox for Web Developers @webdevs.firefox.com · 08/09/2026
The CSS progress() function is now in all major engines! Here's how it works:
511818
Arby @mobalti.bsky.social · 26/08/2026
Great breakdown of when custom properties get computed! I wrote about the same CSS value-computation behavior from the angle of shorthands + custom properties, including how `@property` can help with invalid declarations mobalti.com/the-power-of...
mobalti.com
The Power of CSS Shorthands in the Era of Custom Properties | Arby @mobalti
Encapsulating System Tokens with Shorthand Custom Properties.
020
Reposted by Arby
Firefox for Web Developers @webdevs.firefox.com · 18/08/2026
Firefox 154 landed today, and brings with it some great web platform features: 🎉 CSS text-box 🎉 CSS sibling-index() and sibling-count() 🎉 JS Iterator methods like chunks, window, includes, & join 🎉 HTTP No-Vary-Search …And more! developer.mozilla.org/en-US/docs/M...
developer.mozilla.org
Firefox 154 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 154 that affect developers. Firefox 154 was released on August 18, 2026.
312314
Arby @mobalti.bsky.social · 11/08/2026
The way you handle returning to the system default with a two-state toggle is brilliant!
000
Arby @mobalti.bsky.social · 04/08/2026
It totally depends on the app! For complex apps with long sessions, 3 options (System/Light/Dark) give the best UX, even if they're hidden in a settings menu. But for short session sites like blogs or docs, a simple 2 option toggle right on the main UI is better for instant switching.
040
Arby @mobalti.bsky.social · 31/07/2026
@oddbird.dev @miriam.codes This covers how to handle the invalid declaration edge cases mentioned on stream from @matuzo.at article on @css-tricks.com .
010
Arby @mobalti.bsky.social · 31/07/2026
Wrote a post about combining CSS shorthands with custom properties to encapsulate related system tokens. mobalti.com/the-power-of... #CSS
mobalti.com
The Power of CSS Shorthands in the Era of Custom Properties | Arby @mobalti
Encapsulating System Tokens with Shorthand Custom Properties.
192
Reposted by Arby
Shaw @shaw.city · 24/07/2026
🚀 🚀 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.io
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.
34020
Arby @mobalti.bsky.social · 13/07/2026
Here is what the final example in the article will look like with CSS mixins
Code snippet showing the upcoming CSS mixins syntax.

@mixin --medium() {
  @result {
    block-size: 5rem;
    border-radius: 1.75rem;
    font: 400 1.5rem/2rem system-ui;
    gap: 0.75rem;
    padding: 1.5rem 3rem;
  }
}

@mixin --large() {
  @result {
    block-size: 6.5rem;
    font: 400 2rem/2.5rem system-ui;
    border-radius: 1.75rem;
    padding: 2rem 4rem;
    gap: 1rem;
  }
}

.button {
  /* Base/default properties (represent the small size variant) */
  block-size: 3rem;
  border-radius: 1rem;
  font: 500 1rem/1.5rem system-ui;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;

  /* Variations using container style queries */
  &:not(.small) {
    @container style(--size-items: medium) {
      @apply --medium();
    }

    @container style(--size-items: large) {
      @apply --large();
    }
  }

  /* Modifier classes for static size instances */
  &.medium {
    @apply --medium();
  }

  &.large {
    @apply --large();
  }
}
010
Arby @mobalti.bsky.social · 13/07/2026
They also help avoid the duplication I mention in this article when modifiers and containers need to share the same property values. mobalti.com/responsive-c...
mobalti.com
Unlocking responsive components with container style queries | Arby @mobalti
Using native CSS to manage component variations across viewport sizes.
120
Reposted by Arby
Andy Bell @bell.bz · 02/07/2026
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!
0157
Arby @mobalti.bsky.social · 26/06/2026
If I had to describe the future of consuming components, it would look like this snippet:
130
Arby @mobalti.bsky.social · 26/06/2026
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
mobalti.com
Unlocking responsive components with container style queries | Arby @mobalti
Using native CSS to manage component variations across viewport sizes.
1172
Reposted by Arby
Adam Argyle @nerdy.dev · 14/06/2026
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
nerdy.dev
Prop For That
Everything JS knows, now CSS knows.
313330
Arby @mobalti.bsky.social · 04/06/2026
Exactly! And you can take it to the next level with nesting to keep everything collocated inside the component ```#CSS .dialog { overscroll-behavior-block: contain; html:has(&:open) { scrollbar-gutter: stable; overflow-block: hidden; } } ```
050
Reposted by Arby
Firefox for Web Developers @webdevs.firefox.com · 19/05/2026
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...
developer.mozilla.org
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.
610921
Arby @mobalti.bsky.social · 19/05/2026
Style queries in all three engines! It’s a big day for the web. Thanks, Firefox! ❤️
090
Arby @mobalti.bsky.social · 11/05/2026
Marketing tries to sell it as a replacement, but in reality it’s more of a collaborator.
010
Arby @mobalti.bsky.social · 07/04/2026
codepen.io/collection/g... I'm working on a new frontend toolkit, and I've been using Pen 2.0 for the examples. Honestly, I'm really impressed by the experience. Great work to everyone on the @codepen.io team. I know how hard it is to make big changes to a platform people already love.
codepen.io
Web Expressive | Examples - a Collection by Arby on CodePen
Examples from Web Expressive, a standard-first frontend toolkit based on the intent of the Material 3 Expressive design language.
031
Arby @mobalti.bsky.social · 30/03/2026
This is a great native capability! It would be even better if it could hook into a media query, similar to transparency preferences, for users who are sensitive to blur.
100
Arby @mobalti.bsky.social · 16/02/2026
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
bugzilla.mozilla.org
2017122 - @container style() queries fail to resolve when the custom property is defined in a separate <style> block or external CSS file.
UNCONFIRMED (nobody) in Core - CSS Parsing and Computation. Last updated 2026-02-16.
110
Arby @mobalti.bsky.social · 05/02/2026
Can’t wait! It’s the missing piece of modern CSS, hope to see this ship in @webdevs.firefox.com stable soon!
010
Arby @mobalti.bsky.social · 16/12/2025
Great article! Practical, realistic examples, and nice to see logical properties used in the examples. Excellent work 👌
010
Arby @mobalti.bsky.social · 03/12/2025
You need to install the `es6-string-html` extension in VS Code for the `/* html */` syntax highlighting to work. marketplace.visualstudio.com/items?itemNa...
marketplace.visualstudio.com
es6-string-html - Visual Studio Marketplace
Extension for Visual Studio Code - Syntax highlighting in es6 multiline strings
282
Reposted by Arby
Arby @mobalti.bsky.social · 14/11/2025
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
011
Arby @mobalti.bsky.social · 14/11/2025
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
011
Arby @mobalti.bsky.social · 09/10/2025
When colors match the emotional tone of the content, the brain perceives less friction between “frame” and “picture.
000
Arby @mobalti.bsky.social · 09/10/2025
CSS `@function` + relative colors = adaptive palettes that match content tone. Demo: codepen.io/mobalti/full... cc @miriam.codes @tabatkins.com @lea.verou.me #CSS
151
Arby @mobalti.bsky.social · 08/10/2025
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.
010
Arby @mobalti.bsky.social · 07/10/2025
min() & max()
110
Arby @mobalti.bsky.social · 29/09/2025
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
0396
Arby @mobalti.bsky.social · 21/09/2025
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
000
Arby @mobalti.bsky.social · 15/09/2025
Cards with animated gradient borders Modern CSS ⚡💪 Gradient from gradient.style CodePen: codepen.io/mobalti/pen/... @codepen.io #CSS
021
Arby @mobalti.bsky.social · 13/09/2025
Congrats, Adam! 🎉👏🔥
010
Arby @mobalti.bsky.social · 29/08/2025
It’s one of my favorite tools, I use it all the time. So excited about the new layer feature. Thanks, Adam! ♥️
010
Arby @mobalti.bsky.social · 15/08/2025
Thanks Miriam!
030
Arby @mobalti.bsky.social · 02/07/2025
Did something similar here, might help codepen.io/mobalti/pen/...
codepen.io
CSS Carousel
A CSS-only accessible carousel demo using modern overflow features—no JavaScript needed. - Scroll Buttons - Scroll Markers - Scroll-State Queries - ...
020
Arby @mobalti.bsky.social · 31/05/2025
That’s great! Feels like libraries have been ignoring logical properties lately, so this makes me really happy!
010
Arby @mobalti.bsky.social · 31/05/2025
So clean with logical properties all over. Great job!
100
Arby @mobalti.bsky.social · 31/05/2025
I read mostly on a Kobo, and Pocket let me send articles straight to it. It’s basically my article database!
020
Arby @mobalti.bsky.social · 31/05/2025
One of Mozilla’s best products is gone. So frustrating!
110
Arby @mobalti.bsky.social · 12/05/2025
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."
010
Arby @mobalti.bsky.social · 01/05/2025
This really helps manage vertical spacing in markdown-style content, especially as we move toward more prompt-based interfaces. Also love the logical values!
000
Arby @mobalti.bsky.social · 29/04/2025
Here’s the same carousel in Firefox. No scroll buttons or markers yet, but still fully functional and accessible.
000