I didn't realize it was tracked like this, but I have noticed that as of iOS 26, Safari has gotten a huge number of great web features. It has WebGPU of course, but many small things like fixing up missing parts of the OPFS API that make it actually usable now. Now they even have the field-sizing CSS property [0], fixing imo the most glaring ommission from CSS: the inability to make text input boxes grow to fit the input text!
This seems like a bit of a trend with Safari. Around big releases Apple will announce how Safari is the best at X, but other times of the year it gets a lot of flack. I assume this is due to Safari’s more traditional release schedule vs other browsers continuously shipping feature updates.
Cool stuff they're working on tends to take a very long time to reach customers' hands compared to other browsers. Just compare the "stable" and "experimental" graphs on wpt.fyi for Safari.
I can't think of a single good reason why they don't adopt an "evergreen" 4/6-week update model except Not Invented Here syndrome or "it's not Apple-like, we prefer the OS team (and therefore Marketing) dictating our release schedule, users be damned".
Safari has been releasing a lot more often than it used to. My personal gripe with Safari is how they decided to deal with extensions, forcing every developer through their hellish App Store submission experience.
This is not all that surprising. While the Chrome team is out there evangelising things like WebPCIe or whatever, Safari's been shipping features clients actually want, like blurred backgrounds for years before anyone else.
Imagine if the literal army of Chromium/Blink engineers threw their entire weight into making the fundamental building blocks that everybody uses better instead of niche things that only a tiny fraction sites and web apps will ever need.
Hm, I know that Safari doesn't support 64bit wasm, which is a very important feature that Chrome and Firefox both have, but this seems to say they have "100% webassembly support".
interop is a subset of tests chosen beforehand (nowadays, mostly by devs voting in the github issues). This says Safari has reached 100% on the subset of tests agreed upon for interop-25. Those specific tests can be expanded by clicking it in the menu. It'll take you here:
Fascinating tracker. So we started 2025 with nearly every browser under 80% and ending the year with every browser with >98% interop? That's a lot of amazing work done by a lot of teams. Incredible!
Just to clarify the meaning of the measurement, it doesn't mean they're 98% interoperable across everything, it's across the specific set of goals for 2025. (Which is still really good!)
I think they realized that shipping the features out of sync meant nobody could use them until all browsers adopted them, which took years, so now they coordinate
Safari is still the new IE. Well, not really "new", it has been IE all along. It's the only non-evergreen browser that remains, and I don't get why this isn't mentioned every time Safari is brought up. All of their spec implementations are meaningless when the only version that matters is the one forever stuck in whichever oldest iPhone n% of people still use.
Caniuse is pointless, their new "baseline" score is pointless; as long as enough people keep using their (perfectly fine and working) iPhones after official support stops and as long as they are not allowed to install a different browser (engine), that's the only data point you need to look at when choosing which browser features to use.
To answer your question, yes. Apple requires 80% test passage of all the tests on web-platforms-test in order to be considered as a valid browser for iOS so they specifically targeted this suite to reach that milestone
It's a pretty silly requirement because wpt is not really meant to be representative of all web platform standards. It includes tests for non-standard features and the majority of tests are simple unicode glyph rendering tests.
It is funny how we keep asking more and more and more even though we already have it so much better than before. Can we never be happy with what we have?
> It is funny how we keep asking more and more and more even though we already have it so much better than before.
I've been developing web stuff for 15 years now and sometimes I can't believe comments like these. We didn't have it "so much better before". CSS sucked hard and getting things right for three devices was an incredible pain in the ass.
Tables have semantic meaning. They don't support fractional units. Reflowing for mobile is impossible and you need JS hacks like splitting tables. You can't reorder natively.
This is exciting to see! I just used Masonry for a project this past week. While it works quite well and is pretty performant, it is pretty hacky using absolute positioning, wanting to know the aspect ratios of objects beforehand for smoother layout, and having to recalculate everything on resize. I'm looking forward to having a generally available native option one of these days.
Me, too. I like masonry layout too much to wait for CSS to solve the problem, so I've been waiting to remove the last 1.3KB of Javascript from my home page since 2019.
Adding a new element still need dimension of the element and a bit JavaScript.(The whole page use < 100loc unobfuscated JavaScript) But resizing can be handled by css naturally.
I think the issue here is most people don't really have a good way to specify how masonry should work. And thus don't have a good implementation either.
There is ways of create a basic masonery layouts using only pure CSS grid. But dependes on the use case.
Take this example where are mixed cards without images, only text, and with images plus text.
There is an element of tragic comedy to those announcement. While remarkable on their own, everybody knows that one cannot use any new browser feature reliably any time soon due to Apple not shipping continuous updates to the browsers they force upon their users.
I know one of my clients complained something didnt work on their few year old iPad. So.. I don't know what the cutoff is but clearly not everything updates regularly. He did try updating it manually too but couldn't.
A lot of web "design" is about how it looks rather than how usable it is. At no point any stakeholder stops and actually uses the product, they scroll up and down, enjoy the pointless "scroll in" animations and say "kewl". Never mind the text that is at 50% opacity until you scroll to the exact intended point, because nobody actually attempted to read it.
> At no point any stakeholder stops and actually uses the product, they scroll up and down, enjoy the pointless "scroll in" animations and say "kewl".
Actually that's exactly what they do. They like the animations while some people, especially devs, do not. But they don't use it multiple times, because they would be able to see how it gets annoying after the first time.
The defining feature of masonry is that it supports mixed aspect ratios. That's its whole thing. If you aren't mixing landscape and portrait images, you shouldn't be using masonry layout.
Maybe this will be an unpopular opinion, but I really dislike the lane layout, because it is not possible to efficiently take a glance at all elements in the list, one by one.
If you try to go left-to-right, you will quickly realize that at the end of each "line" it is really difficult to know where the next line starts. It is easy to accidentally start again on the same line (and inspect the same elements), or skip one accidentally. Then navigating through the elements one by one requires a considerable amount of cognitive effort, your eyes bounce up and down constantly, and you end up inspecting the same elements multiple times.
If you try to go top-to-bottom, lane by lane, you will then realize that the page also has infinite scroll and you will never go past the first lane.
But if you don't need to systematically examine every element one-by-one, lane layouts are pretty good. Sites like Pintrest use lane layouts because their content isn't meant to by systematically examined, but rather absorbed at a glance. If your content is meant to be systematically examined, using a lane layout would be a bad UX choice. But just because lane layouts can be misused doesn't mean they're a bad layout.
IMO it's annoying to use at all. It just looks "good" (subjective).
Larger images dominate and flashy images become more important to get attention (if bringing focus to an image is the idea). An extremely poor way to present information.
It's not meant to be "efficient," it's meant to allow your eyes to look at the entire page at once to find what you're looking for. A newspaper or photo gallery comes to mind.
(Not GP poster.) I don't really have a problem with masonry layouts, but a newspaper is limited by the paper size and they have incentive to squeeze everything in there (to maximize the spread of "information"). The screen is theoretically infinite (although not for kiosks).
I do have a website with a lot of images, and at the moment everything is in a 3-across grid layout...
I agree, this seems to violate some of the most fundamental concepts of design like least-surprise and using grouping + alignment to give context to readers.
After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG
Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes. Web layouts leave one axis free to expand as far as necessary to fit the content, so there is no sane algorithm for laying out arbitrary content this way. Either you end up with items ordered confusingly, or you end up having to scroll up and down repeatedly across the whole damn page, which can be arbitrarily long. Either option is terrible. Don't even get me started on how poorly this interacts with "infinite scroll".
Yeah, there was a years long debate that effectively ended with: “We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.”
> We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.
I think that’s an exceptionally uncharitable description of what happened. This is a decision the WebKit team has been repeatedly publicly asking people to participate in for over 18 months.
> Help us invent CSS Grid Level 3, aka “Masonry” layout
> P.S. About the name
> It’s likely masonry is not the best name for this new value. […] The CSSWG is debating this name in [this issue]. If you have ideas or preferences for a name, please join that discussion.
> Help us choose the final syntax for Masonry in CSS
> We also believe that the value masonry should be renamed.
> As described in our previous article, “masonry” is not an ideal name, since it represents a metaphor, and not a direct description of its purpose. It’s also not a universally used name for this kind of layout. Many developers call it “waterfall layout” instead, which is also a metaphor.
> Many of you have made suggestions for a better name. Two have stood out, collapse and pack as in — grid-template-rows: collapse or grid-template-rows: pack. Which do you like better? Or do you have another suggestion? Comment on [this issue] specifically about a new value name (for the Just Use grid option).
Masonry was never “in”, no? Mozilla proposed it and were the only ones to implement it, behind a feature flag. Then WebKit proposed an alternative that was discussed at length:
I still prefer the layout look from something like justifiedGallery.js where the heights of each row are the same. Actual masonry with stacking stones would never stack directly on top of each other like this. Calling it masonry just feels unnatural as anything stacked like that would easily be knocked over. "Lanes" is definitely more appropriately named than "masonry". The layout look of a justifiedGallery would be more masonry than the grid-template-rows:masonry setting. yeah yeah, raw css vs js library blah blah
One hack to almost get a justified gallery like that with no javascript is to lay them out with flexbox, setting their width to a percentage or vw value which your backend calculates based on image aspect ratio and desired image height, use flex-grow to stretch them to fill remaining space, and then using background-position: cover to make the images fit the slightly wrong aspect ratio containers.
This will of course slightly crop all your images to make it fit, but in practice as long as you keep your image aspect ratios reasonable and the images small enough on the page it's really quite subtle.
I had hoped that this feature would provide for masonry like that, but one has to make do.
I have often thought layouts should be done by a constraint solver. Then there could be libraries that help simplify specifying a layout, which feed constraints to the solver.
I've done that for desktop apps before. You have to be careful with the effects of sub-pixel rendering and whatnot if your math is continuous, but it's a viable path that I quite like.
Don't use continuous math in either a design system nor a constraint solver that you expect random developers to use. Either case will only lead to problems.
iOS used to do this using the Cassowary constraint solver pre-SwiftUI. It’s the worst thing to work with. So much code turning on and off constraints, dynamically adding constraints when you have new views. And that’s before you get into conflicts
I'm pleased they rename it because grid-lanes opens up more than masonry layouts.
I've been waiting to be able to have a fully responsive layout (where interleave sidebar content in with the page content on small screens, but have it in a sidebar on larger screens) without using any JavaScript, and this finally makes it possible.
The naming was half the discussion on implementing this. There were a lot of people smarter and more knowledgeable than me that had a lot of opinions on the name that I hadn't thought about. I remember one of the reasons was that the word "masonry" wasn't as obvious a concept for non-English speakers.
Masonry grid layout was one of a few interviewing pair programming tests I would give to frontend engineers. I need to see how this works under the hood!
I have to ask, like with all the other browser specific trial implementations: how is cross platform support? If we wanted to make a grid layout that only worked in one browser engine, grid-template-rows: masonry was there for a while now.
Chromium still seems to be working on support it seems based on https://cr-status.appspot.com/feature/5149560434589696 so maybe it'll be useful soon? That page indicates that they're still discussing certain parts of the spec.
It's been on-and-off in all three browsers behind flags etc, but it's been in a constant state of flux over the last three years. One of the most gnarly new CSS features to get right. Lots of great arguments about how to implement it.
I've been using Chromium's display: masonry in some internal apps since they introduced it behind a flag in Chromium 140. Looks like they just have to rename it now?
I have too. And the Safari version that was in the betas/tech previews.
One of the biggest arguments over the last couple of years was what to call it. A lot, lot of ideas put forth as alternatives to "masonry" which wasn't thought to be great for non-English speakers. I'm glad they finally nailed a name for it!
The other big argument was over how to activate it. Is it a grid? Is it a flexbox? Is it a brand new animal?
Now I just need to figure out the best way to implement this semantically with a polyfill for the next 30 months until it's baseline.
I actually started using Safari's `grid-template-rows: masonry` when it came out, but unfortunately Safari TP crashed a lot on me when using that for some reason. Chromium's never had a problem.
I like Josh W Comeau's content, he has a lot of free articles, but his paid CSS course goes through step by step why CSS is the way that it is, worked great for me for understanding it all. My work paid for it though, that's why it's priced so high, but I'm sure he has discounts for individuals.
I guess wire up a codepen demo and try it out. I know the guys writing this were well aware of all the edge cases like that and these are some of the absolute smartest CSS people you can think of who had to write the very detailed spec for this.
I don't think the smooth reflow made it into the current spec, so I guess watch this space?
I guess you can just start loading a first batch, add an intersection observer to the last 3 elements (if you have 3 lanes) and then when one of those intersects you simply start fetching the next.
It’s always nice to see native implementations of functionality pioneered by third-party libraries. Bootstrap, for example, has made this kind layout (somewhat) possible but there is also a Masonry plugin that simplifies it.
It seems that support tracking websites don't know what this is yet. MDN briefly notes it as an option for `display` but there is no other mention of it.
They mentioned tabbing and screen readers quite a few times.
I found the "jumping" ordering quite concerning but further down in the article they mention "tolerance" that seems to be a way to allow the layout to be more consistent in terms of ordering.
Is anyone working on actual css problems instead of this sugar syntax?
Hypermedia suffers because these marketing companies waste time on making sure they can build Pinterest in 10 LoC instead of fixing actual long running hypermedia domains.
Moving this sort of stuff out of JavaScript and arcane hacks allows the browser rendering engines to optimize these common patterns. This is sorta the opposite of syntactic sugar. The syntactic sugar is the libraries that implemented these patterns without rendering support.
Shall we call it syntactic umami perhaps? Or syntactic lipids?
There is no winning, is there? Half of HN wants browsers to revert to document readers and the other half wants HTML and CSS to do what JS can. A small minority then insists that we should get rid of HTML and CSS entirely and start from scratch. The louder the ideas the further away the person is from actually using the tech. I personally would not have the patience for community management.
While I like a Karl Pilkington quote as much as the next guy, I really do want this. I have one specific use case for this layout that's always felt a little bit painful to reach into js for. I can't wait for the day I can simplify that further into native CSS.
> HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s?
This is incorrect. Lots of old stuff was removed or deprecated from the HTML5 specification; elements like `s`, `u` were repurposed from being presentational to semantic:
I don't understand all the busywork goes behind new browser updates, just to retain their market share (since they can afford more engineers, than say Ladybird). Is this needed? It's not rocket science, folks.
All these CSS upgrades have been meant to reduce the need for Javascript for all the things web devs do out there in the real world. It's a good thing.
You should tune out more of the ambient cynicism because it's ignorant and unhinged. People who don't follow any standards discussions, don't talk to web devs, don't read anything except headlines and who are only imitating the attitudes of whatever cynical, depressed social media bubble they fell into.
Psh, rocket science only has to contend with physics, which generally doesn't change much, if at all. The equations used to get humans to the moon didn't change because someone discovered you can send a specially crafted packet and escape the sandbox and steal money from everybody on the Internet.
Is this increasing complexity in the Web layout world worth it? Anyone who wants to use this is going to drop support for older browsers (and, in so doing, older machines that can't run newer OSes and newer browsers).
Personally, I use an 11-year-old machine and have had to add userscript hacks to certain major Web sites to work around bugs in CSS grid (not the "lanes" described here).
At least new JavaScript features can be "polyfilled" or whatever. Maybe sites could check for CSS feature support too? But they seem not to.
For example, the demo page linked in the article fails pretty unusably for me. All the images take up nearly the full viewport width.
What OS are you running that can't run modern versions of browsers, and on what hardware?
Current Chrome runs on Windows 10, which came out 9.5 years ago but was intended to run on older computers, and macOS Monterey, which runs on Macs from ~2014-2015 depending on the model. But even Big Sur before that, the most recent version of Chrome which runs on that is Chrome 138 from just 6 months ago, and that doesn't seem old enough that you need to build userscript hacks.
I'm really curious what you're actually running. Generally speaking, an 11-year-old desktop should be able to run the current browser, and if not, a very recent one.
> Personally, I use an 11-year-old machine and have had to add userscript hacks to certain major Web sites to work around bugs in CSS grid (not the "lanes" described here).
The version of CSS Grid we're using today didn't ship until 2017; a browser from 11 years ago would be using one of the non-standard versions of Grid. For example, Internet Explorer 11 was the first browser to ship a grid implementation.
> At least new JavaScript features can be "polyfilled" or whatever. Maybe sites could check for CSS feature support too?
First, not every site needs to look exactly the same in every browser; that's why progressive enhancement is a thing.
Second, there are multiple ways to create masonry-style layouts that don't require masonry support in the browser using multi-column layout or flexbox.
Third, masonry can be polyfilled using JavaScript [1].
When the web came out it itself was new technology that excluded some older machines. Lynx kind of worked (I used it!) but it was a poor substitute, especially once `<img>` showed up.
You want to platform to be able to make progress and not be frozen in amber by what we had at some "magical" year when things were in some Golidlocks powerful enough but not too complex state. Especially since a lot of progress lately has been fixing long-standing inconsistencies and obvious gaps.
The cost of that is that yes, neither my Apple IIe or my Micro Pentium 90 run the modern web... one day my MBP M1 won't either.
Not updating your browser will net you tons of exploitable vulnerabilities.
How do you expect things to ever change if no one ever updates? Certainly even if you decide to lean towards maximum support it’s still a positive these features are being introduced so you can use them in 10 years.
> How do you expect things to ever change if no one ever updates?
Maybe things should stop changing.
We don't really need ten new CSS attributes every year. Things work. The elegant solution is to announce the project is done. That would bring some much-needed stability. Then we can focus on keeping things working.
> Is this increasing complexity in the Web layout world worth it?
Yes. I held off learning about CSS Grid for a very long time and as soon as I did I was converted. Sometimes I think the web doesn’t get enough credit for its ambition: mobile viewports, desktop viewports, touch interaction, pointer interaction, complex documents, webapps… it’s a lot. But you get some complexity as a side effect. The complexity we do see these days isn’t invented out of whole cloth, it’s standardising and improving layouts people are implementing with JavaScript, often badly.
> Is this increasing complexity in the Web layout world worth it? Anyone who wants to use this is going to drop support for older browsers (and, in so doing, older machines that can't run newer OSes and newer browsers).
If you’ve been at this for a while, it’s important to remember that browsers update a lot faster than they used to. Anchor positioning came out last year, for example, and all of the major browsers support it by now. Very old devices are a problem but security is purging those out faster than used to be the case.
We also have better tools for progressive adoption since you can easily query for things like CSS feature support. In this demo, they didn’t implement fallbacks but in most real sites you’d have something like a basic grid layout which is perfectly serviceable for the fraction of users on old Firefox releases.
Sooner or later, the age of your machine will affect browser compatibility.
It doesn't even take many things to do this — the knock-on support of a bug in a driver that no-one wants to fix, a package that you like that prevents you from upgrading your host OS, web browser developers abandoning something about your GUI (how long before they drop X?) etc.
In the Linux world, the age of your machine is a limit with a blurry edge, but it's still there.
Yes it is. Developers write bad code when they try to work around the lack of features with ill thought out hacks, this results in a bad website for everybody, even those of us that keep our software up to date, and just so happen to have a different screen resolution and a different browser then what the developer tested on.
If enough consumers aren't able to use the website, then business wouldn't use it. The reality is new computers aren't that expensive (I see used M1s for under 1k) and consumers are upgrading.
You mentioned a used model that is over 5 years old as an example of "a new computer", and "1k" as "not expensive for consumers". It is honestly impressive how well you undermined your own point.
> If enough consumers aren't able to use the website, then business wouldn't use it.
I sincerely doubt any business owner would approve of losing even 10% of their potential users/customers if they knew that was the trade-off for their web developer choosing to use this feature, but there are disconnects in communication about these kinds of things -- if the web developer even knows about compatibility issues themselves, which you would expect from any competent web developer, but there are a whole lot of incompetent web developers in the wild who won't even think about things like this.
Props to the Safari team. They surprised us all when they suddenly shot to the top of interop-2025 this October
https://wpt.fyi/interop-2025
I didn't realize it was tracked like this, but I have noticed that as of iOS 26, Safari has gotten a huge number of great web features. It has WebGPU of course, but many small things like fixing up missing parts of the OPFS API that make it actually usable now. Now they even have the field-sizing CSS property [0], fixing imo the most glaring ommission from CSS: the inability to make text input boxes grow to fit the input text!
[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
I thought that was supposed to be fixed by contenteditable plaintext-only. Why was field sizing still necessary?
2 replies →
This seems like a bit of a trend with Safari. Around big releases Apple will announce how Safari is the best at X, but other times of the year it gets a lot of flack. I assume this is due to Safari’s more traditional release schedule vs other browsers continuously shipping feature updates.
Cool stuff they're working on tends to take a very long time to reach customers' hands compared to other browsers. Just compare the "stable" and "experimental" graphs on wpt.fyi for Safari.
I can't think of a single good reason why they don't adopt an "evergreen" 4/6-week update model except Not Invented Here syndrome or "it's not Apple-like, we prefer the OS team (and therefore Marketing) dictating our release schedule, users be damned".
It's an own-goal for no reason.
21 replies →
Safari has been releasing a lot more often than it used to. My personal gripe with Safari is how they decided to deal with extensions, forcing every developer through their hellish App Store submission experience.
> They surprised us all when they suddenly shot to the top of interop-2025 this October
Not all of us were surprised; some of us have been watching the Safari team shipping the latest HTML and CSS features for a few years now.
This is not all that surprising. While the Chrome team is out there evangelising things like WebPCIe or whatever, Safari's been shipping features clients actually want, like blurred backgrounds for years before anyone else.
Imagine if the literal army of Chromium/Blink engineers threw their entire weight into making the fundamental building blocks that everybody uses better instead of niche things that only a tiny fraction sites and web apps will ever need.
Hm, I know that Safari doesn't support 64bit wasm, which is a very important feature that Chrome and Firefox both have, but this seems to say they have "100% webassembly support".
https://webassembly.org/features/
interop is a subset of tests chosen beforehand (nowadays, mostly by devs voting in the github issues). This says Safari has reached 100% on the subset of tests agreed upon for interop-25. Those specific tests can be expanded by clicking it in the menu. It'll take you here:
https://wpt.fyi/results/wasm/jsapi?label=experimental&label=...
The full test-suite of wasm tests are here:
https://wpt.fyi/results/wasm
Fascinating tracker. So we started 2025 with nearly every browser under 80% and ending the year with every browser with >98% interop? That's a lot of amazing work done by a lot of teams. Incredible!
Just to clarify the meaning of the measurement, it doesn't mean they're 98% interoperable across everything, it's across the specific set of goals for 2025. (Which is still really good!)
I think they realized that shipping the features out of sync meant nobody could use them until all browsers adopted them, which took years, so now they coordinate
1 reply →
Safari became the new IE for a while, the amount of problems I've had with Safari CSS animations and SVGs is endless.
It's good they're trying to not make Safari suck as much.
Safari is still the new IE. Well, not really "new", it has been IE all along. It's the only non-evergreen browser that remains, and I don't get why this isn't mentioned every time Safari is brought up. All of their spec implementations are meaningless when the only version that matters is the one forever stuck in whichever oldest iPhone n% of people still use.
Caniuse is pointless, their new "baseline" score is pointless; as long as enough people keep using their (perfectly fine and working) iPhones after official support stops and as long as they are not allowed to install a different browser (engine), that's the only data point you need to look at when choosing which browser features to use.
The only people who think Safari is the new IE are people who weren’t around for IE.
2 replies →
I hope they add WebTransport support soon.
voting for interop 2026 is active now. I see somebody has already submitted a proposal for it
https://github.com/web-platform-tests/interop/issues/1121
My favorite is finally supporting `arbitrary-subdomain.localhost`. Been a real pain in the neck to add Safari-specific fallbacks for my usage of that.
Oh, that's nice for sure! Has it been announced anywhere?
Does it still expand an svg to full size if u omit width and height attributes because u control the size in a parent container? Fuck safari
interop-2025. It does not mean Safari supports all the latest stuff. It means, "for some small subset of stuff here's the percent that's supported".
Of course Safari pushes to have anything they don't want to support not in that subset.
I wonder if Ladybird has explored running these interop tests yet. Or maybe these are just a subset of WPT?
You can edit the "products" represented in the table and add "Ladybird" to the list. [1]
Their result is: 1974740 / 2152733 (91%)
They also have their own dashboards tracking this [2]
[1] https://wpt.fyi/results/?product=ladybird
[2] https://grafana.app.ladybird.org/public-dashboards/2365098a1...
Here's a comparison including the big 3, ladybird, servo, and flow
https://wpt.fyi/results/?label=master&product=chrome&product...
To answer your question, yes. Apple requires 80% test passage of all the tests on web-platforms-test in order to be considered as a valid browser for iOS so they specifically targeted this suite to reach that milestone
It's a pretty silly requirement because wpt is not really meant to be representative of all web platform standards. It includes tests for non-standard features and the majority of tests are simple unicode glyph rendering tests.
3 replies →
They are indeed just a subset of WPT. Although the way subtests are weighted in the score calcustion is slightly different for the "interop" score.
I wish they'd release CSS Gap Decorations: https://developer.chrome.com/blog/gap-decorations
I'm tired of having to use stupid hacks to get nice-looking borders between flex/grid items.
Have you considered using tables?
It is funny how we keep asking more and more and more even though we already have it so much better than before. Can we never be happy with what we have?
> It is funny how we keep asking more and more and more even though we already have it so much better than before.
I've been developing web stuff for 15 years now and sometimes I can't believe comments like these. We didn't have it "so much better before". CSS sucked hard and getting things right for three devices was an incredible pain in the ass.
Tables have semantic meaning. They don't support fractional units. Reflowing for mobile is impossible and you need JS hacks like splitting tables. You can't reorder natively.
4 replies →
How would tables solve the issue they're talking about?
1 reply →
This is exciting to see! I just used Masonry for a project this past week. While it works quite well and is pretty performant, it is pretty hacky using absolute positioning, wanting to know the aspect ratios of objects beforehand for smoother layout, and having to recalculate everything on resize. I'm looking forward to having a generally available native option one of these days.
Me, too. I like masonry layout too much to wait for CSS to solve the problem, so I've been waiting to remove the last 1.3KB of Javascript from my home page since 2019.
Thank you to everyone who is making this happen.
There is way to create masonry without specifying x,y position of every element though. https://codepen.io/mmis1000/pen/gOyZJqE
Adding a new element still need dimension of the element and a bit JavaScript.(The whole page use < 100loc unobfuscated JavaScript) But resizing can be handled by css naturally.
I think the issue here is most people don't really have a good way to specify how masonry should work. And thus don't have a good implementation either.
There is ways of create a basic masonery layouts using only pure CSS grid. But dependes on the use case. Take this example where are mixed cards without images, only text, and with images plus text.
https://codepen.io/zardoz89/pen/KKVEGbw
There is an element of tragic comedy to those announcement. While remarkable on their own, everybody knows that one cannot use any new browser feature reliably any time soon due to Apple not shipping continuous updates to the browsers they force upon their users.
iOS from 2 versions prior don't get latest Safari?
I can't check because my wife's iPhone is, regrettably according to her, "updated to the latest glAss version".
I know one of my clients complained something didnt work on their few year old iPad. So.. I don't know what the cutoff is but clearly not everything updates regularly. He did try updating it manually too but couldn't.
Safari got a big update last week.
Safari in general got an update, or Safari on only the devices Apple deems worthy? Usually Apple limits Safari updates to new phones.
2 replies →
I always thought that the masonry layout looked good but made it harder to get a good overview of the images.
A lot of web "design" is about how it looks rather than how usable it is. At no point any stakeholder stops and actually uses the product, they scroll up and down, enjoy the pointless "scroll in" animations and say "kewl". Never mind the text that is at 50% opacity until you scroll to the exact intended point, because nobody actually attempted to read it.
> At no point any stakeholder stops and actually uses the product, they scroll up and down, enjoy the pointless "scroll in" animations and say "kewl".
Actually that's exactly what they do. They like the animations while some people, especially devs, do not. But they don't use it multiple times, because they would be able to see how it gets annoying after the first time.
The biggest problem is that it's good if your images are all landscape or all portrait, but not when mixed.
The whole point of a masonry layout is if you have different aspect ratios. Otherwise a masonry layout is just a normal grid.
4 replies →
What?
The defining feature of masonry is that it supports mixed aspect ratios. That's its whole thing. If you aren't mixing landscape and portrait images, you shouldn't be using masonry layout.
11 replies →
Maybe this will be an unpopular opinion, but I really dislike the lane layout, because it is not possible to efficiently take a glance at all elements in the list, one by one.
If you try to go left-to-right, you will quickly realize that at the end of each "line" it is really difficult to know where the next line starts. It is easy to accidentally start again on the same line (and inspect the same elements), or skip one accidentally. Then navigating through the elements one by one requires a considerable amount of cognitive effort, your eyes bounce up and down constantly, and you end up inspecting the same elements multiple times.
If you try to go top-to-bottom, lane by lane, you will then realize that the page also has infinite scroll and you will never go past the first lane.
But if you don't need to systematically examine every element one-by-one, lane layouts are pretty good. Sites like Pintrest use lane layouts because their content isn't meant to by systematically examined, but rather absorbed at a glance. If your content is meant to be systematically examined, using a lane layout would be a bad UX choice. But just because lane layouts can be misused doesn't mean they're a bad layout.
I think it's one of those things that looks good, but is annoying to use non-superficially.
IMO it's annoying to use at all. It just looks "good" (subjective).
Larger images dominate and flashy images become more important to get attention (if bringing focus to an image is the idea). An extremely poor way to present information.
Thankfully the feature is just in time for it to fall out of fashion! It really is an awful layout, UX wise. But at least it looks pretty at a glance!
It's not meant to be "efficient," it's meant to allow your eyes to look at the entire page at once to find what you're looking for. A newspaper or photo gallery comes to mind.
Feels very "right-brain". I'm a brain-hemisphere equality advocate. Good for sites like Pinterest. But also Home Assistant.
If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...
Never read a newspaper?
(Not GP poster.) I don't really have a problem with masonry layouts, but a newspaper is limited by the paper size and they have incentive to squeeze everything in there (to maximize the spread of "information"). The screen is theoretically infinite (although not for kiosks).
I do have a website with a lot of images, and at the moment everything is in a 3-across grid layout...
1 reply →
Yes, I have. Printed, which is fundamentally, and literally a different media type with different properties
3 replies →
I agree, this seems to violate some of the most fundamental concepts of design like least-surprise and using grouping + alignment to give context to readers.
I think this looks great too. Finally replicating the efficiency of newspaper layouts. No enforced symmetry, just content in an optimal space. I want.
It looks pretty, but fails at basic usability.
After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG
Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes. Web layouts leave one axis free to expand as far as necessary to fit the content, so there is no sane algorithm for laying out arbitrary content this way. Either you end up with items ordered confusingly, or you end up having to scroll up and down repeatedly across the whole damn page, which can be arbitrarily long. Either option is terrible. Don't even get me started on how poorly this interacts with "infinite scroll".
8 replies →
Funny, I think that looks gorgeous!
NYTimes.com comes to mind...
what's your problem?
I've run the masonry layout (for my personal bookmark website) ever since I've found it in the browser settings.
grid-template-rows: masonry;
is going to be outdated then?
Yeah, there was a years long debate that effectively ended with: “We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.”
https://m.youtube.com/watch?v=yikbSQ6tvlE
> We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.
I think that’s an exceptionally uncharitable description of what happened. This is a decision the WebKit team has been repeatedly publicly asking people to participate in for over 18 months.
> Help us invent CSS Grid Level 3, aka “Masonry” layout
> P.S. About the name
> It’s likely masonry is not the best name for this new value. […] The CSSWG is debating this name in [this issue]. If you have ideas or preferences for a name, please join that discussion.
— https://webkit.org/blog/15269/help-us-invent-masonry-layouts...
> Help us choose the final syntax for Masonry in CSS
> We also believe that the value masonry should be renamed.
> As described in our previous article, “masonry” is not an ideal name, since it represents a metaphor, and not a direct description of its purpose. It’s also not a universally used name for this kind of layout. Many developers call it “waterfall layout” instead, which is also a metaphor.
> Many of you have made suggestions for a better name. Two have stood out, collapse and pack as in — grid-template-rows: collapse or grid-template-rows: pack. Which do you like better? Or do you have another suggestion? Comment on [this issue] specifically about a new value name (for the Just Use grid option).
— https://webkit.org/blog/16026/css-masonry-syntax/#footnote-1
> [css-grid-3] Renaming masonry keyword
— https://github.com/w3c/csswg-drafts/issues/9733
5 replies →
Wasn't Firefox the only browser that actually implemented `grid-template-rows: masonry` anyways?
It sucks whenever browsers backtrack on a W3C standard that reached "Working Draft" status but it doesn't seem like it's gonna impact many people
Besides, it's not being "deprecated". It will continue to work as it does. We just have a better alternative that the big 3 all agreed on.
Masonry was never “in”, no? Mozilla proposed it and were the only ones to implement it, behind a feature flag. Then WebKit proposed an alternative that was discussed at length:
https://github.com/w3c/csswg-drafts/issues/10233
1 reply →
I still prefer the layout look from something like justifiedGallery.js where the heights of each row are the same. Actual masonry with stacking stones would never stack directly on top of each other like this. Calling it masonry just feels unnatural as anything stacked like that would easily be knocked over. "Lanes" is definitely more appropriately named than "masonry". The layout look of a justifiedGallery would be more masonry than the grid-template-rows:masonry setting. yeah yeah, raw css vs js library blah blah
One hack to almost get a justified gallery like that with no javascript is to lay them out with flexbox, setting their width to a percentage or vw value which your backend calculates based on image aspect ratio and desired image height, use flex-grow to stretch them to fill remaining space, and then using background-position: cover to make the images fit the slightly wrong aspect ratio containers.
This will of course slightly crop all your images to make it fit, but in practice as long as you keep your image aspect ratios reasonable and the images small enough on the page it's really quite subtle.
I had hoped that this feature would provide for masonry like that, but one has to make do.
What you’re looking for is described in the article as “bricks” (vs “waterfall”) and is also supported.
1 reply →
The following should be compatible with both approaches:
Firefox and browsers supporting the old syntax will ignore the `display: grid-lanes` as it doesn't recognize it and fall back to the grid+masonry.
Browsers supporting the new syntax will override the `display: grid` with `display: grid-lanes` and ignore the `grid-template-rows: masonry` syntax.
Very cool! I wonder, will it be easy to build interactive interfaces on this primitive, like animations and drag-and-drop?
I have often thought layouts should be done by a constraint solver. Then there could be libraries that help simplify specifying a layout, which feed constraints to the solver.
Recently discussed on HN: https://news.ycombinator.com/item?id=46144039
I've done that for desktop apps before. You have to be careful with the effects of sub-pixel rendering and whatnot if your math is continuous, but it's a viable path that I quite like.
Don't use continuous math in either a design system nor a constraint solver that you expect random developers to use. Either case will only lead to problems.
1 reply →
iOS used to do this using the Cassowary constraint solver pre-SwiftUI. It’s the worst thing to work with. So much code turning on and off constraints, dynamically adding constraints when you have new views. And that’s before you get into conflicts
Kinda odd they didn't call it masonry given it's already been called that forever. At least grid-lanes is reasonably self explanatory.
I'm pleased they rename it because grid-lanes opens up more than masonry layouts.
I've been waiting to be able to have a fully responsive layout (where interleave sidebar content in with the page content on small screens, but have it in a sidebar on larger screens) without using any JavaScript, and this finally makes it possible.
Demo: https://news.ycombinator.com/item?id=46228993
The naming was half the discussion on implementing this. There were a lot of people smarter and more knowledgeable than me that had a lot of opinions on the name that I hadn't thought about. I remember one of the reasons was that the word "masonry" wasn't as obvious a concept for non-English speakers.
Masonry grid layout was one of a few interviewing pair programming tests I would give to frontend engineers. I need to see how this works under the hood!
I wonder how long it takes LLMs to correctly ingest fresh CSS notation like this.
I have to ask, like with all the other browser specific trial implementations: how is cross platform support? If we wanted to make a grid layout that only worked in one browser engine, grid-template-rows: masonry was there for a while now.
Chromium still seems to be working on support it seems based on https://cr-status.appspot.com/feature/5149560434589696 so maybe it'll be useful soon? That page indicates that they're still discussing certain parts of the spec.
It's been on-and-off in all three browsers behind flags etc, but it's been in a constant state of flux over the last three years. One of the most gnarly new CSS features to get right. Lots of great arguments about how to implement it.
I've been using Chromium's display: masonry in some internal apps since they introduced it behind a flag in Chromium 140. Looks like they just have to rename it now?
I have too. And the Safari version that was in the betas/tech previews.
One of the biggest arguments over the last couple of years was what to call it. A lot, lot of ideas put forth as alternatives to "masonry" which wasn't thought to be great for non-English speakers. I'm glad they finally nailed a name for it!
The other big argument was over how to activate it. Is it a grid? Is it a flexbox? Is it a brand new animal?
Now I just need to figure out the best way to implement this semantically with a polyfill for the next 30 months until it's baseline.
I actually started using Safari's `grid-template-rows: masonry` when it came out, but unfortunately Safari TP crashed a lot on me when using that for some reason. Chromium's never had a problem.
What’s the best resource for getting a handle on all modern CSS for someone who hasn’t paid attention since flex box
I like Josh W Comeau's content, he has a lot of free articles, but his paid CSS course goes through step by step why CSS is the way that it is, worked great for me for understanding it all. My work paid for it though, that's why it's priced so high, but I'm sure he has discounts for individuals.
This should be a good start: https://nerdy.dev/cascading-secret-sauce
There are a lot of resources.
I am a fan of: https://www.youtube.com/@KevinPowell
Kevin is a no-nonsense no-hype educator. He will keep you up to date without a lot of engagement hacking.
how does it work with animations? like if i transition:all and then remove a middle img does the other elements get animated?
I guess wire up a codepen demo and try it out. I know the guys writing this were well aware of all the edge cases like that and these are some of the absolute smartest CSS people you can think of who had to write the very detailed spec for this.
I don't think the smooth reflow made it into the current spec, so I guess watch this space?
https://www.w3.org/TR/css-grid-3/
How would you query the location where you need to load more data when scrolling down (the highest empty spot)?
I guess you can just start loading a first batch, add an intersection observer to the last 3 elements (if you have 3 lanes) and then when one of those intersects you simply start fetching the next.
Hmm, I think we only need to observe the `elements.at(-numberOfLanes)`, as it should be the first to enter the screen anyway.
I suppose just checking scroll height of the container? Once you're x pixels above the bottom, fetch more. Not the smoothest, but doable
You just append new <figure> elements to the <main> in the example and it will automatically put them in the appropriate column.
Your answer doesn't appear to relate to what I asked. You need to know when to query the backend for more data if it's an infinite scrolling setup.
2 replies →
It’s always nice to see native implementations of functionality pioneered by third-party libraries. Bootstrap, for example, has made this kind layout (somewhat) possible but there is also a Masonry plugin that simplifies it.
I think Apple should make Safari stable downloadable option for all platforms.
I’m old enough to have installed Safari on Windows XP. I’m not sure it has been enough years since this Apple failed product.
experiencing how text renders differently, slowly, with my potato battleship
There are WebKit-based browsers for Linux: https://webkit.org/downloads/
This might actually happen indirectly. Kagi’s new browser uses WebKit. macOS only now, but eventually it’ll come to windows
I have been using Kagi Orion on macOS and iPhone, so far so good.
That makes sense. Safari is so smooth now in iOS. Moved from Firefox.
Any ideas how I can track support for this in firefox?
It seems that support tracking websites don't know what this is yet. MDN briefly notes it as an option for `display` but there is no other mention of it.
Is there anything to be said about accessibility? Found the word only once in the comments.
They mentioned tabbing and screen readers quite a few times.
I found the "jumping" ordering quite concerning but further down in the article they mention "tolerance" that seems to be a way to allow the layout to be more consistent in terms of ordering.
sweeeeeeeeeeeet
[dead]
Is anyone working on actual css problems instead of this sugar syntax?
Hypermedia suffers because these marketing companies waste time on making sure they can build Pinterest in 10 LoC instead of fixing actual long running hypermedia domains.
Moving this sort of stuff out of JavaScript and arcane hacks allows the browser rendering engines to optimize these common patterns. This is sorta the opposite of syntactic sugar. The syntactic sugar is the libraries that implemented these patterns without rendering support.
Shall we call it syntactic umami perhaps? Or syntactic lipids?
Oh, how cool! Another barrier to a new browser gaining user base!
To quote the wise Karl Pilkington: "Do we need 'em?"
HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s?
There is no winning, is there? Half of HN wants browsers to revert to document readers and the other half wants HTML and CSS to do what JS can. A small minority then insists that we should get rid of HTML and CSS entirely and start from scratch. The louder the ideas the further away the person is from actually using the tech. I personally would not have the patience for community management.
That said, CSS masonry looks solid.
While I like a Karl Pilkington quote as much as the next guy, I really do want this. I have one specific use case for this layout that's always felt a little bit painful to reach into js for. I can't wait for the day I can simplify that further into native CSS.
How was this masonry layout possible back in the 90s?
Tables.
> HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s?
This is incorrect. Lots of old stuff was removed or deprecated from the HTML5 specification; elements like `s`, `u` were repurposed from being presentational to semantic:
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- s
- strike
- tt
- u
- xmp
- noembed
- plaintext
I don't understand all the busywork goes behind new browser updates, just to retain their market share (since they can afford more engineers, than say Ladybird). Is this needed? It's not rocket science, folks.
All these CSS upgrades have been meant to reduce the need for Javascript for all the things web devs do out there in the real world. It's a good thing.
You should tune out more of the ambient cynicism because it's ignorant and unhinged. People who don't follow any standards discussions, don't talk to web devs, don't read anything except headlines and who are only imitating the attitudes of whatever cynical, depressed social media bubble they fell into.
Psh, rocket science only has to contend with physics, which generally doesn't change much, if at all. The equations used to get humans to the moon didn't change because someone discovered you can send a specially crafted packet and escape the sandbox and steal money from everybody on the Internet.
Is this increasing complexity in the Web layout world worth it? Anyone who wants to use this is going to drop support for older browsers (and, in so doing, older machines that can't run newer OSes and newer browsers).
Personally, I use an 11-year-old machine and have had to add userscript hacks to certain major Web sites to work around bugs in CSS grid (not the "lanes" described here).
At least new JavaScript features can be "polyfilled" or whatever. Maybe sites could check for CSS feature support too? But they seem not to.
For example, the demo page linked in the article fails pretty unusably for me. All the images take up nearly the full viewport width.
> I use an 11-year-old machine
What OS are you running that can't run modern versions of browsers, and on what hardware?
Current Chrome runs on Windows 10, which came out 9.5 years ago but was intended to run on older computers, and macOS Monterey, which runs on Macs from ~2014-2015 depending on the model. But even Big Sur before that, the most recent version of Chrome which runs on that is Chrome 138 from just 6 months ago, and that doesn't seem old enough that you need to build userscript hacks.
I'm really curious what you're actually running. Generally speaking, an 11-year-old desktop should be able to run the current browser, and if not, a very recent one.
I am using a machine older than eleven years old and can still run the newest version of Firefox and Chrome.
I don't think the world needs to cater to people that refuse even basic internet hygiene.
I routinely use an 11 year old computer too. I can not see why "userscript hacks" would be needed.
> Personally, I use an 11-year-old machine and have had to add userscript hacks to certain major Web sites to work around bugs in CSS grid (not the "lanes" described here).
The version of CSS Grid we're using today didn't ship until 2017; a browser from 11 years ago would be using one of the non-standard versions of Grid. For example, Internet Explorer 11 was the first browser to ship a grid implementation.
> At least new JavaScript features can be "polyfilled" or whatever. Maybe sites could check for CSS feature support too?
First, not every site needs to look exactly the same in every browser; that's why progressive enhancement is a thing.
Second, there are multiple ways to create masonry-style layouts that don't require masonry support in the browser using multi-column layout or flexbox.
Third, masonry can be polyfilled using JavaScript [1].
[1]: https://masonry.desandro.com/
When the web came out it itself was new technology that excluded some older machines. Lynx kind of worked (I used it!) but it was a poor substitute, especially once `<img>` showed up.
You want to platform to be able to make progress and not be frozen in amber by what we had at some "magical" year when things were in some Golidlocks powerful enough but not too complex state. Especially since a lot of progress lately has been fixing long-standing inconsistencies and obvious gaps.
The cost of that is that yes, neither my Apple IIe or my Micro Pentium 90 run the modern web... one day my MBP M1 won't either.
[dead]
Not updating your browser will net you tons of exploitable vulnerabilities.
How do you expect things to ever change if no one ever updates? Certainly even if you decide to lean towards maximum support it’s still a positive these features are being introduced so you can use them in 10 years.
> How do you expect things to ever change if no one ever updates?
Maybe things should stop changing.
We don't really need ten new CSS attributes every year. Things work. The elegant solution is to announce the project is done. That would bring some much-needed stability. Then we can focus on keeping things working.
6 replies →
> Is this increasing complexity in the Web layout world worth it?
Yes. I held off learning about CSS Grid for a very long time and as soon as I did I was converted. Sometimes I think the web doesn’t get enough credit for its ambition: mobile viewports, desktop viewports, touch interaction, pointer interaction, complex documents, webapps… it’s a lot. But you get some complexity as a side effect. The complexity we do see these days isn’t invented out of whole cloth, it’s standardising and improving layouts people are implementing with JavaScript, often badly.
> Is this increasing complexity in the Web layout world worth it? Anyone who wants to use this is going to drop support for older browsers (and, in so doing, older machines that can't run newer OSes and newer browsers).
If you’ve been at this for a while, it’s important to remember that browsers update a lot faster than they used to. Anchor positioning came out last year, for example, and all of the major browsers support it by now. Very old devices are a problem but security is purging those out faster than used to be the case.
We also have better tools for progressive adoption since you can easily query for things like CSS feature support. In this demo, they didn’t implement fallbacks but in most real sites you’d have something like a basic grid layout which is perfectly serviceable for the fraction of users on old Firefox releases.
> Maybe sites could check for CSS feature support too? But they seem not to.
Certainly can: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...
What does the age of your machine have to do with browser compatibility issues? Are you running a stale OS and a stale browser on that OS?
Sooner or later, the age of your machine will affect browser compatibility.
It doesn't even take many things to do this — the knock-on support of a bug in a driver that no-one wants to fix, a package that you like that prevents you from upgrading your host OS, web browser developers abandoning something about your GUI (how long before they drop X?) etc.
In the Linux world, the age of your machine is a limit with a blurry edge, but it's still there.
Yes it is. Developers write bad code when they try to work around the lack of features with ill thought out hacks, this results in a bad website for everybody, even those of us that keep our software up to date, and just so happen to have a different screen resolution and a different browser then what the developer tested on.
If enough consumers aren't able to use the website, then business wouldn't use it. The reality is new computers aren't that expensive (I see used M1s for under 1k) and consumers are upgrading.
You mentioned a used model that is over 5 years old as an example of "a new computer", and "1k" as "not expensive for consumers". It is honestly impressive how well you undermined your own point.
> If enough consumers aren't able to use the website, then business wouldn't use it.
I sincerely doubt any business owner would approve of losing even 10% of their potential users/customers if they knew that was the trade-off for their web developer choosing to use this feature, but there are disconnects in communication about these kinds of things -- if the web developer even knows about compatibility issues themselves, which you would expect from any competent web developer, but there are a whole lot of incompetent web developers in the wild who won't even think about things like this.
10 replies →