Noam Rosenthal @nomster.bsky.social · 14hAlso a decade ago the alternative (native CSS) was missing a lot of features. 100
Noam Rosenthal @nomster.bsky.social · 14hI think folk were but it was dismissed as "oh you're a use-the-platform boomer" alongside other unpopular preaching. 200
Reposted by Noam RosenthalEric Portis @ericportis.com · 06/10/2026After a decade at Cloudinary, I am looking work. I'm a web developer who's done a lot of devrel, too. I'm good at the front of the front end, great at browsers and standards and deeply understanding and explaining technical topics, and the stem of my T-shaped skills is: "images, on the internet". 12116
Noam Rosenthal @nomster.bsky.social · 03/10/2026We would have had to invent a language agnostic DOM and probably go into a very long process of inventing that, slowing down other web platform additions that relied on converting on a single language for DOM APIs. 120
Noam Rosenthal @nomster.bsky.social · 30/09/2026Yes! Requiring two elements to do this in the past is something I found really irritating and one of the reasons I wanted to work on making border-shape a reality. 021
Reposted by Noam RosenthalEiji Kitamura / えーじ @agektmr.com · 29/09/2026Connection Allowlists announcement blog post has been published. developer.chrome.com/blog/connect...developer.chrome.comConnection allowlists: Secure your web application's network access | Blog | Chrome for DevelopersChrome 152 introduces connection allowlists, a new security mechanism that lets you create a strict network sandbox for your documents and workers. 0175
Noam Rosenthal @nomster.bsky.social · 28/09/2026Probably a pseudo-class (so `:open` or `:streaming`). But otherwise, I agree: Pros - it works. Cons - it can be more elegant. 010
Noam Rosenthal @nomster.bsky.social · 28/09/2026... And see this leftover-free approach. bsky.app/profile/noms... 000
Noam Rosenthal @nomster.bsky.social · 28/09/2026An leftover-free way to hide an element while streaming (chrome only atm, but not for long hopefully) <div> <?start name="buffy" ?> <style>@scope { display: none }</style> <?end ?> <!-- stream the content --> <!-- remove the temp style --> <template for=buffy></template> </div> 141
Noam Rosenthal @nomster.bsky.social · 01/09/2026I wouldn't say it would be more "performant" though. It's a matter of use case. 000
Noam Rosenthal @nomster.bsky.social · 01/09/2026Yea or display:none or a style query with shimmers. The point here is the scoped style change. 110
Noam Rosenthal @nomster.bsky.social · 31/08/2026Also I have an extra `}` here I think but you get the picture 010
Noam Rosenthal @nomster.bsky.social · 31/08/2026To hide an element while it's being streamed, using CSS only: <div> <style>@scope { & { opacity: 0; } } }</style> <!-- stream the content --> <style>@scope { & { opacity: 1; } } }</style> </div> (After I fix some blink bug I'll publish an alternative that doesn't leave footprint in the DOM) 5394
Noam Rosenthal @nomster.bsky.social · 02/08/2026It's one of the reasons people have been pointing out for using SPAs for sure. Not the only one though 040
Noam Rosenthal @nomster.bsky.social · 02/08/2026react.dev/reference/re...react.dev<ViewTransition> – ReactThe library for web and native user interfaces 050
Noam Rosenthal @nomster.bsky.social · 02/08/2026Right, but in this case it feels a bit unnecessary as the navigation URLs are globals anyway and don't change according to other selectors 010
Noam Rosenthal @nomster.bsky.social · 02/08/2026How would you select based on this? Css properties are usually used as values and not as selectors. Style queries help with that but it's usually for things that can cascade rather than for globals like the navigation state 110
Noam Rosenthal @nomster.bsky.social · 31/07/2026The way I was framing this to myself when we started this, is that: - CSS is about styling based on DOM state - Navigation state is part of DOM state - This is about styling based on navigation state Hope this framing is useful! 230
Noam Rosenthal @nomster.bsky.social · 31/07/2026Also if we had this we might still want `@route`. It's a convenient way to specify them separately from usage. 110
Noam Rosenthal @nomster.bsky.social · 31/07/2026There's a spec for that drafts.csswg.org/css-env/#cus... I can't speak to the timeline thoughdrafts.csswg.orgCSS Environment Variables Module Level 1 010
Noam Rosenthal @nomster.bsky.social · 31/07/2026You can't use css variables in conditions and selectors 110
Reposted by Noam RosenthalBramus @bram.us · 30/07/2026One of the things that we at Chrome have been thinking about is a way to do declarative route and navigation matching **in CSS**. Together with @nomster.bsky.social and @dbaron.org I’ve been working on it for the past few months, and next week we’ll be presenting our work at the CSSWG F2F meeting. 6589
Noam Rosenthal @nomster.bsky.social · 30/07/2026That's also fair. I find myself sometimes disliking too many animations, and sometimes getting anxiety from not knowing if my click had any effect due do lack of relevant response. Motion design, UX, and respecting user preferences is a delicate work! 000
Noam Rosenthal @nomster.bsky.social · 29/07/2026Agreed, this demo needs some work. Thanks for the feedback! 100
Noam Rosenthal @nomster.bsky.social · 23/07/2026For 200ms it's probably not that useful outside of a demo. Otherwise, getting an instant indication of a navigation and then morphing it to the content as it arrives is a common pattern. One can argue that this is bad UX; but one can argue that also about freezing until the new content is ready. 000
Noam Rosenthal @nomster.bsky.social · 23/07/2026Thanks @joe.trusktr.io ! Also check out the explainer: github.com/w3c/csswg-dr...github.com 072
Noam Rosenthal @nomster.bsky.social · 18/07/2026Some of the features I have worked on: - Deferred fetching (fetchLater) - Deferred navigation commit (precommitHandler) - Deferred page swap (two phase view transition) - Deferred HTML updates (<template for>) What is the next thing to defer? 3110
Noam Rosenthal @nomster.bsky.social · 17/07/2026Note that we have not discussed this meaningfully with other browsers yet... The idea atm is to try things out and see if the result makes sense. But it does address some issues / steal some ideas from @jakearchibald.com (as are most of the features I've worked on in the last 3-4 years) 080
Noam Rosenthal @nomster.bsky.social · 17/07/2026In general, despite a few outliers where CSS perhaps define behavior that is style-adjacent, CSS is mostly about style and rendering-related things, and the platform lifecycles are optimized with that in mind in terms of perf (and security, as I said before). 000
Noam Rosenthal @nomster.bsky.social · 17/07/2026There might be subtle places where it's good to keep things separate. e.g. how processing stylesheets is tied to rendering / render-blocking, which might not work well for things that have nothing to do with rendering. Note that "hover" and other such behaviors are rendering-related in this sense. 100
Noam Rosenthal @nomster.bsky.social · 16/07/2026e.g. I don't know if people would eat <style> script { fetch-priority: low; } </style> It feels on the radical side of "not going to happen" but you kinda said that yourself :) 110
Noam Rosenthal @nomster.bsky.social · 16/07/2026Yea that would be a big roadblock indeed. Even if we do some acronym acrobatics with CSS you still have the word style everywhere (e.g. <style>, <link rel=stylesheet>). If we'd need a more broad CSP directive for it we might as well call it something else and reuse the syntax, which is back to CAS. 220
Noam Rosenthal @nomster.bsky.social · 16/07/2026Right - but then the way I'd go about it is looking at some of these particular aspects one by one and seeing if it makes sense to CSS them. There's perhaps no generic decision to be made. For example I'd love to see more a11y stuff feel more like styling. But it's a hard one to budge as we know. 101
Noam Rosenthal @nomster.bsky.social · 16/07/2026(*) could be that I'm misunderstanding your proposal (*) this whole idea might have merit but is indeed likely too radical to be actionable in the near term, so my responses here are more of a thought exercise. 010
Noam Rosenthal @nomster.bsky.social · 16/07/2026Yea but here you can do something like script { fetch-priority: low; } And then if we add a fetch priority that does have security implications, will it be automatically be "CSS-able"? Not sure this would have a net positive effect on the platform. 210
Noam Rosenthal @nomster.bsky.social · 16/07/2026It's not particularly a vulnerability, more of an example of something you wouldn't expect your style to do. And then where is the boundary? Need to look at the particular things you'd want to enable with something like this. 100
Noam Rosenthal @nomster.bsky.social · 16/07/2026Right - it does depend on that and some things make more sense as CSS properties than others. The problem with some of these is not that they're "less secure", rather that they're arguably too far from being "style", so it's hard to justify letting a resource with a style privilege to affect them. 110
Noam Rosenthal @nomster.bsky.social · 16/07/2026e.g. would you give something with a style-src CSP directive access to your tab-index/inertness? Maybe. ARIA? Donno. Fetch hints? Prob not. The separation of concerns here is a bit more involved than architectural purity. But as it often goes, I'm with you in spirit. 110
Noam Rosenthal @nomster.bsky.social · 16/07/2026There would need to be *some* separation due to security - i.e. you're giving stylesheets powers that are not related to style so you might not trust the same sources with that power. So this would end up being something CAS-like where the CSS *syntax* is used to define something other than *style*. 210
Noam Rosenthal @nomster.bsky.social · 14/07/2026Also. Apologies - I read your article last night and reading it again I noticed that I have missed a few key bits and ended up repeating them here or ignoring that you've addressed them there. 110
Noam Rosenthal @nomster.bsky.social · 14/07/2026That was one of its issues, it also had a few deep implementation bugs which are expected in software in general, but here they were very difficult to workaround because of its polyfill shape. 100
Noam Rosenthal @nomster.bsky.social · 14/07/2026Also, @lea.verou.me want to host a joint breakout session at TPAC about polyfills? 110
Noam Rosenthal @nomster.bsky.social · 14/07/2026So my 2c is that every conversation about polyfill is actually two separate conversations about these two types of problems/solutions. 200
Noam Rosenthal @nomster.bsky.social · 14/07/2026Where polyfills shine IMO is where they take a *spec'ed and partially available* API and make it available everywhere. `customElementRegistry` was a *speculative* polyfill for a future standard. I feel more ambivalent about those and often prefer that their API surface looks like a userland library. 100
Noam Rosenthal @nomster.bsky.social · 14/07/2026Same goes for moment.js. A super useful library for its time, slowly disappearing into the platform. The nice thing about both lodash and moment is that they never masqueraded as the platform. moment.js extending the Date object would have been terrible. 100
Noam Rosenthal @nomster.bsky.social · 14/07/2026Right, I think my experience with this stuff goes both ways. At Wix we had lodash which at the time was a very useful library, partly acting like a ponyfill, and slowly but surely disappearing into null. At the same time we had polyfill-io that ended up having security issues and hard to find bugs. 200
