One 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.
Thanks @joe.trusktr.io ! Also check out the explainer: github.com/w3c/csswg-dr...
github.com
Joe Pea@joe.trusktr.io · 2w ago@nomster.bsky.social's Two-Phase View Transitions example here shows an MPA (multi-page application) navigating between to separate pages (two full page loads), with a smooth skeletal loader animation between them. noamr.github.io/two-phase-vt...
Some 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?
📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. css-tricks.com/get-ready-fo... This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!)
Get Ready For the Powerful CSS border-shape Property!
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!
css-tricks.com
The first part of Declarative Partial Updates (`<template for>` out-of-order HTML) is now available, unflagged, in Chrome 150!! developer.chrome.com/release-note... The second part (the new JS setting APIs, include the streaming ones) we're still working on the spec side, but maybe for Chrome 152?
Chrome 150 | Release notes | Chrome for Developers
CSS text-fit property, background-clip border-area, Focusgroup, and more.
developer.chrome.com
Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ css-tip.com/wiggly-range... Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)
Some #cssday photos: @ohhelloana.blog and me, with @meyerweb.com ; a feral crowd of Dutch CSS enthusiasts; @rgadellaa.bsky.social from OWA and me; 4 rival browser chums: @nomster.bsky.social from Chrome, @jakearchibald.com from Firefox, me, and glamorous @patrickbrosset.com from the Edge.
Main #cssday takeaway: web UI is alive and kicking and I love working on it.
@developer.chrome.com Chrome DevRel Team doing some very interesting feedback session on navigation matching at #CSSday. A lot of food for thought. A lot of folks interested 😅 place is packed
Out-of-order streaming HTML is coming to a browser near you! This means you can stream HTML to the browser in any order, which enables web apps to send the most important HTML first, regardless of where it is in the document. This is huuuuuge! 🧵1/3
An AI dystopia is going to look less like terminator/matrix (an evil sentient thing) and more like Brazil (a buggy bloated dysfunctional mess) But maybe neither I donno just sharing random thoughts
Excited to go to @cssday.nl next week as part of the Google team... haven't been to a proper developer conference for 3 years (when speaking at ReactNext 2023) so I really miss the vibe.
Declarative partial updates. Barry Pollard and Noam Rosenthal introduce processing instructions and new setHTML(), appendHTML(), streamHTML() methods for inserting HTML out of order into specific document locations. #html #api developer.chrome.com...
I love the web and feel mixed about AI. But the web platform cannot be judgmental, resistant, or passive to such a real shift in how people consume content. It has to be part of that shift. It doesn't mean that every decision in that direction is good but that should be the tone of the conversation.
So here's an interesting little thing or 2 @nomster.bsky.social , @foolip.org , and myself have been cooking up—along with lots of help from others!: developer.chrome.com/blog/declara... This could lead to some VERY interesting changes in how we write web pages. Would love to hear your thoughts!
Declarative partial updates | Blog | Chrome for Developers
Learn about new out-of-order streaming capabilities and the renewed HTML insertion and streaming methods available for testing from Chrome 148
developer.chrome.com
I feel like "are people going to vibe code their own site/app" is the wrong question. It's "are people going to use sites/apps at all or just get what they want using AI super app thingies?" Aren't both websites and apps tedious mediums like having to store CDs or rewind a VCR?
When shape-outside meets `shape()`, it sparks endless inspiration. As always, @cgqaq.bsky.social has implemented it in Chrome 149 (coming next week)! We’ll be bringing even more amazing CSS features to Chrome, so stay tuned. The Codepen is below👇 Thanks to @una.im @nomster.bsky.social for their help
here is the new CSS Border shape API this is going to unlock so many sick new designs
OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 codepen.io/una/full/ogz... *(just let me have my Mom joke)
Everyone is building things that build things that build things. Who's actually building a thing?
💡 CSS Tip! We've just had the release of @developer.chrome.com 147, which means border-shape was enabled by default! 👀 css-tip.com/border-shape/ Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩
"Fixed Safari gesture support to prevent pages that should not be able to scroll, such as with explicit overflow: hidden, from unexpectedly scrolling. (163660111)" Sounds like a bug I've spent ages working around, 10 years ago when at Wix... I wonder if it fixes it! webkit.org/blog/17862/w...
WebKit Features for Safari 26.4
March has a way of bringing a lot of new things to WebKit — and this year is no exception.
webkit.org
I've created a little AI skill called "web archeologist". It helps trace back existing standards to their original discussions & rationale, rummaging through github, browser bug trackers, old W3C mailing lists, IRC logs etc. github.com/noamr/web-ar... Happy for feedback/bugs/improvements!
GitHub - noamr/web-archeologist: An agent skill to find history/root cause/discussion for existing web standard clauses
An agent skill to find history/root cause/discussion for existing web standard clauses - noamr/web-archeologist
github.com
Out of context reminder: The "CORS errors" we get when we develop a page that accesses localhost are what prevents random untrusted webpages from making calls to open HTTP ports on our computer.
Firefox is joining the shape() game 🤩 It's a good time for some blobs: css-generators.com/blob/ Or maybe a nice wavy divider: css-generators.com/wavy-divider/ And stay tuned for another generator and more shapes next week! 🤫
Firefox for Web Developers@webdevs.firefox.com · 5mo agoFirefox 148 is out now, and adds some great web platform features: 🎉 The HTML Sanitizer API 🎉 CSS shape() 🎉 Trusted Types 🎉 Nav API's addHandler 🎉 Iterator zip & zipKeyed 🎉 ancestorOrigins And more! developer.mozilla.org/en-US/docs/M...
border-shape is coming. Enough with the rectangular web!
Una Kravets@una.im · 6mo agoI've been experimenting with an upcoming CSS feature called border-shape lately. It's really cool what you can do with it: lots of practical applications + it opens a lot of doors for non-rectangular UIs! Try it in Canary w/experimental web platform features on, & read more: una.im/border-shape
Blog post: some inner workings of implementing CSS corner-shape in Blink. @developer.chrome.com developer.chrome.com/blog/impleme...
The corner cases of implementing CSS corner-shape in Blink | Blog | Chrome for Developers
Learn about the complexity of implementing the corner-shape feature.
developer.chrome.com
Element-Scoped View Transitions are gonna be **SO GOOD** There’s still some details to settle, but the main thing is there: run VTs on a subtree of the DOM, allowing parallel VTs. And with `view-transition-scope` you can limit the scope of `view-transition-name` values, allowing VTs to be nested.
