Anthony Frehner

Anthony Frehner

@frehner.me

Web, standards, tooling, sports, video games. https://frehner.me Working @Shopify, on Polaris (web components)

349 followers340 following507 posts

Anthony Frehner reposted

Things I hope to push forward at TPAC: - Declarative fragment / client side include - declarative skeleton/shell - CSS navigation matching - parser/patch reflection in mutation observers - responsive image improvements - connection allowlists - focusreset - CSS module imports Gonna be interesting!

THIS COMMON CSS FEATURE TANKS YOUR PERFORMANCE!!1!1! Ok, how was that for a flamebait headline? For real, though, let's talk about `@property` Do you lazy load content to improve performance? Did you know that, if your lazily-loaded CSS includes `@property`, you're causing a full dom restyle?

View full thread

This would help wonderfully with lazy loading content via your framework of choice (e.g. React.lazy), and/or HTML's new `<template for="">` "out-of-order patching", etc etc I just want teams to own their own `@property` at-rules, lazy load them, and not affect the rest of the page when doing so.

Thoughts? Reactions? Also, I included a whole section of references, because there has been a lot of talk about "scoped" CSS vars, and why they can't work. And I wanted to be clear that this proposal isn't that. Haha.

THIS COMMON CSS FEATURE TANKS YOUR PERFORMANCE!!1!1! Ok, how was that for a flamebait headline? For real, though, let's talk about `@property` Do you lazy load content to improve performance? Did you know that, if your lazily-loaded CSS includes `@property`, you're causing a full dom restyle?

If you have a large DOM / heavy content / lots of features running when that happens, that can really hurt. So, what if we could have a non-global `@property` at-rule to limit the restyling to just what was loaded? frehner.me/blog/non-glo... THIS IS NOT "SCOPED" `@property`!

frehner.meA proposal for non-global @property at-rulesWithout changing how CSS Custom Properties behave, let's see if we can optimize how they perform when lazily loaded and defined within a selector.

I don't want to change how CSS Custom Properties cascade; I don't want to "stop" the value cascade at a certain point. Don't bring the word "scope" into this! haha. I just want a non-global `@property`, that only applies to a selector, and that doesn't cause a full DOM restyle when loaded.

Does your design system still form the style/layout/size of components based on touch vs mouse? If so, what — if any — considerations do you have for dual-input devices that are both touch and mouse capable? Which experience do you give them?

Anthony Frehner reposted

What if there was a Web Components conference?? @stuffbreaker.bsky.social and I are teaming up to get a little more serious about the idea of getting one together. We want to gather data on if there is interest in the community forms.gle/ZGqtYGj7V6q8... Please fill out and share to anyone!

forms.gleInterested in a Web Components conference? Let us know below!Web Components folks have been semi-seriously talking about organizing a conference for years, and with the ecosystem in a real moment of growth and popularity, it's about time! This form is our firs...

Almost wrapped up my next CSS proposal today Maybe tomorrow? Probably not actually, but hopefully this week Really hoping it’s such a minor thing that it’ll be easy 🤞

Siri: “someone sent a long message, read it?” Me: yes, I’m mentally ready for this essay Siri: “are you sure? Are you sitting down for this?” Me: “I’m never going to be fully prepared, but hit me with it” Siri: “Don’t say I didn’t warn you, this one’s a doozy. ‘Thank you for hanging out’”

This is huge for component libraries, written as web components, that have to somewhat recreate native CSS due to environment limitations. 👀

Firefox for Web Developers@webdevs.firefox.com

CSS attr() now works on all properties in Firefox 155. Here's how it works, and how to get the most out of it:

moveBefore support incoming! That’s huge!! Thanks @jovidecroock.com and team

Jovi 🐨@jovidecroock.com

Some noteworthy mentions are - Hydration 2.0 - A LIS algorithm to speed up reordering - createPortal joining core - use/useEffectEvent in compat - getServerSnapshot in uSES - Leveraging moveBefore rather than insertBefore when available

Curious to see how this evolves over time. Very interesting Also: Web platform tests proving its value yet again (and also showing its limitations?)

Cloudflare@cloudflare.social

Agents should use tools that excel at what’s important for an AI model. Kitesurf is Cloudflare’s new stateless, highly scalable, and cost-effective web browser that runs entirely on top of Workers and was designed specifically for the Agentic Cloud. https://cfl.re/4xuaE5n #AgentsWeek

Oh this is maybe fun - a pure CSS way of hiding a “slot” of children if there are any children in that slot that aren’t allowed. For example, a Button Group component that only allows Buttons as children; otherwise the slot is display:none’d Maybe I’ll write a tiny thing about this.

Anthony Frehner reposted

Hi! I'm working on a new HTML feature: filterable select There are two proposed API shapes so far: 1. Nesting <input> in <select> 2. Sibling <input> for listbox <select> w/id ref Option 1 is more ergonomic, but would break selects in older browsers Thoughts? (Both currently in Canary w/flag)

Crazy and somewhat feasible idea of the day (with @nerdy.dev): Decompile CSS Style Queries to Space Toggles for older browser support but written in the better syntax Not a 1:1 comparison, limited in some ways, but if you live in those constraints, could work.

Anthony Frehner reposted

How’s moveBefore coming along? Are libraries adding support for it or still waiting it out? Would be nice to use the connectedMoveCallback lifecycle