Arby

Frontend Developer

[Arby @mobalti]

Creating carousels in CSS has never been smoother, thanks to Scroll Snap and the Scroll-Driven Animations!
CodePen: https://t.co/gCuMhMSPXa
Built with @openprops

#CSS #webdevelopment

[Firefox for Web Developers @FirefoxWebDevs]

CSS style() queries landed in Firefox 151 making them newly available across engines. Here's how they work:

[Arby @mobalti]

@FirefoxWebDevs 🫶

[Arby @mobalti]

@MozDevNet Great job, @FirefoxWebDevs! hope style queries for custom properties land soon, that would be a huge win for the web.

[Arby @mobalti]

@darianevezhyna @Shopify Looks great, love it! Noticed a tiny horizontal overflow on the viewport (likely the canvas).

[Arby @mobalti]

@bramus Looks great, love it!

[Arby @mobalti]

The future of the web is more native than you think!
Check out this customizable select element with an animated backdrop.

CodePen: https://t.co/1MSUwrbEPH

#CSS #WebDevelopment @CodePen

[Arby @mobalti]

@wongmjane @stylexjs I’ll give it a try with the config you shared. Last time I tried the PostCSS setup it didn’t seem to work.

[Arby @mobalti]

@wongmjane @stylexjs I remember Nmn mentioning that Stylex could be used as shared utility classes, but this is the first time I’ve seen it with examples, thanks for sharing!

[Arby @mobalti]

@wongmjane @stylexjs That’s right, I saw that in the docs too. Did you use the same approach for pseudo‑classes and build utilities for them? That part seems a bit tricky.

[Arby @mobalti]

@Copilot Best UX!

[Arby @mobalti]

@function @Una @bramus When colors match the emotional tone of the content, the brain perceives less friction between “frame” and “picture.

[Arby @mobalti]

CSS `@function` + relative colors = adaptive palettes that match content tone.
Demo: https://t.co/EN6R2bPEpc

cc @Una @bramus

#CSS

[Arby @mobalti]

I re-created @openprops shadows with the new CSS function. This spec is wild ♥️ and it solves problems we’ve been chasing in CSS for years.

Demo 👉 https://t.co/5Mz9TW3ToD

#CSS #WebDev

[Arby @mobalti]

@ChallengesCss Totally! `a.btn {}` works the same here.
But I like `:is()` for style colocation, it keeps `.btn` as the main hook.
And with `:where()`, specificity isn’t a worry since it squashes to 0

```
:where(.btn:is(a)) {
text-decoration: none;
}
```

[Arby @mobalti]

Hero in Monochrome
The elegance of OKLCH in action: adaptive color with built-in accessibility
Built with @openprops

CodePen: https://t.co/4XX2qMn5OU

#CSS @CodePen #WebDevelopment

[Arby @mobalti]

@argyleink Rock yo! 😍Missed these pens big time.

[Arby @mobalti]

@wesbos Yes! it’s super powerful. It helps colocate styles.

```#CSS
.card {
/* ... */
[data-theme="dark"] & {
/* ... */
}
}
```
But as always with great power comes great responsibility.

[Arby @mobalti]

Cards with animated gradient borders
Modern CSS ⚡💪
Gradient from https://t.co/W44DmqZlR2

CodePen: https://t.co/RkPwjincZu

@CodePen #CSS