Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
| https://twitter.com/davidwebca | |
| Website | https://davidweb.ca |
| https://twitter.com/davidwebca | |
| Website | https://davidweb.ca |
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
Make websites? Are you reading webkit.org? We published 6 articles in the last 5 weeks — aiming for at least one a week from now on. Teaching you all about new technology, proposals for the future, and what’s coming in Safari.
• lh units
• shape()
• text-wrap: pretty
• Safari 18.4
• Item Flow
• Declarative Web Push
Plus release notes for Safari Technology Preview every other week.
What should we write about next?
I’m super excited about `text-wrap: pretty`. It does a lot more to improve typography than you might expect — at least in Safari Technology Preview 216.
It improves all lines of text, not just the last 4. It enhances hyphenation & rag, not just avoiding short last lines.
https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/
Does it bug you that Flexbox always ends up with a very few items in the last row, stretched out extra wide?
What if the layout was balanced kinda like `text-wrap`, using:
```
item-pack: balance;
```
Learn more about this idea, and much more:
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
Web Push is exciting. But it requires service workers and a bunch of custom code that can be different from project to project.
How about instead we standardize on using JSON & leave JavaScript out of it!
Meet Declarative Web Push. Available in iOS and iPadOS 18.4 beta.
This article by @shadeed9 is fantastic. It explores the choice of adding masonry-layout capabilities to CSS Grid vs creating a whole new display type. He created several examples, going through the code needed to create layout variations at breakpoints while still supporting older browsers. What would it be like to use each in the real world?
A highly recommended read!
I’m really proud of this article on Masonry & CSS.
It was incredibly hard to write. We spent weeks writing and rewriting, digging deeper & deeper into the issues at hand, working to make things as easy to understand as possible.
https://webkit.org/blog/16026/css-masonry-syntax/
There’s also a really cool idea about how to add another new feature to CSS Grid. (It would make it super easy to create a common article layout that’s not easy today.)
I can’t wait to hear what you think.