Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
The future of CSS layouts
0 Plays2 seconds ago
The article: https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
Working Group issue on item-slack/item-tolerence: https://github.com/w3c/csswg-drafts/issues/10884#issuecomment-2764325410
Working group issue on the unified properties: https://github.com/w3c/csswg-drafts/issues/11480
Rachel's talk on layout and reading order: https://www.youtube.com/watch?v=X6azWrtHS-k
In this episode I explore a new proposal that aims to unify Flexbox and Grid through 'Item Flow' properties. I discuss the current debates around Masonry layouts, the potential for a more cohesive layout system, and the pros and cons of new properties like 'item-wrap' and 'item-slack.' I'll also touch on the importance of maintaining accessibility and logical tab orders.
Recommended
Transcript
Introduction to CSS Layout Unification
00:00:00
Speaker
Hello, my front end friends, and welcome to my podcast, General Musings. My name is Kevin, and in this podcast, I talk about whatever is front of mind for me in any given week, usually in some way that's related to front end development. And this week we will definitely be talking about front end development, specifically about CSS and the future of CSS layout, potentially, maybe, and the unification of Flexbox and Grid, sort of, maybe, not quite, but going in that direction-ish.
00:00:25
Speaker
Yeah, there are interesting times right now with the debates that are going on just with layout in general when it comes to CSS. And my i have some thoughts on it that are somewhat concrete, but not completely concrete.
00:00:39
Speaker
And I find it really helps for me when I think out loud. And so we're doing a podcast episode where I get to do that and try and figure out what I actually think about all of this.
Debating Masonry Layout and Unification
00:00:47
Speaker
And the whole reason this discussion has come up is because Safari, or not Safari, the WebKit team has put out a blog post titled Item Flow Part 1, A New Unified Concept for Layout.
00:01:00
Speaker
And it's interesting. It's this idea that... um it's sort of come from all this discussion over masonry where there's obviously some disagreement on the best approach for implementing masonry and a lot of the introduction to this article just gives that backstory but this i'm going to read this paragraph here where it says a lot has happened since october and that's when The October is brought up because that's when there was the competing ideas sort of came up between just use grid or this new masonry layout.
00:01:34
Speaker
And so for some context on that, just in case you haven't been following all of this discussion, Safari is behind the just use grid where you'd have a grid template columns or a grid template rows of masonry.
Proposing a Unified System for CSS Layout
00:01:46
Speaker
Whereas Chrome thinks there should be a display masonry and that's separate and Nobody's winning right now and winnings the wrong word there But just it seems to be like people that are in one camper and one camp people that are in the other camper and the other one and then a lot of other people like me sort of go back and forth every time we hear certain arguments or go Yeah, that makes sense. I think that one's better and then the other side will be like well What about this? andre like Oh, yeah, that's right. Maybe that would be the better approach and And I think what that this discussion has been really good in that it's highlighted that there's issues potentially with either one of the approaches.
00:02:21
Speaker
And so here I'll start this paragraph again. A lot has happened since October. Now, a third path forward is emerging, a path that would mean the CSS working group doesn't choose either just use grid or new masonry layout.
Introducing Shared Properties for Flexbox and Grid
00:02:34
Speaker
It merges ideas from both with a completely new idea to create a unified system of item flow properties. This article explains what item flow is and the impact on both Flexbox and Grid. And then they're going to have a part two article that talks specifically about masonry.
00:02:48
Speaker
And so the main idea here isn't to drop Flexbox in grid and make one CSS layout thing, but it's to have properties that work for both of
Enhancing Layout Flexibility with Item Properties
00:02:59
Speaker
them.
00:02:59
Speaker
Sort of like we have gap, right? So when gap first came, it was grid gap and could only do gaps in grid. actually came from CSS columns. That's where gap originated, but they brought it into grid. We had the grid gap property.
00:03:11
Speaker
And then eventually that got brought to Flexbox as well. And then we dropped grid gap and then we just have gap and we have it in both of them. And the idea here is, can we use this for other things as well? Which is interesting. And it's a lot of these item specific things. So one of the examples that they give is ah for item direction or item wrap.
00:03:33
Speaker
ah The item wrap one, I'm not 100% behind the argument that they give in in the WebKit article because they talk about, so with item wrap, the idea would be it replaces, it doesn't, i well, I guess it would replace, it would replace flex wrap because you could use item wrap, no wrap, or item wrap wrap, or you have the reverse and work exactly the same way, but you'd be using item wrap.
00:03:57
Speaker
But then with the item wrap, you'd also be able to use it in grid. And the example they give is that instead of doing the, I'm trying to remember the property and i I don't want to scroll up and down this entire time. Oh, here it is.
00:04:11
Speaker
ah So it would be to replace, oh, the grid auto flow. So if you do a grid auto flow of column, it's basically like saying wrap, right? It's sort of like you're creating columns and they're never going to wrap.
00:04:25
Speaker
And they say like, I'm gonna read this. What if you want to lay out all your content in one row when using Grid, but instead of each item gets the same amount of space.
00:04:37
Speaker
ah So for every item to you one FR wide, since the size of the column is extrinsically determined, CSS Grid is the right tool for the job. But because Grid wraps by default, developers often hack Flexbox instead, not realizing they can get the desired effect today from Grid Auto Flow column.
Benefits of a Unified CSS Layout System
00:04:54
Speaker
And I'm just like, well, yeah, but then just use grid autoflow column. like It's not our fault that people don't know that certain things exist. I love grid autoflow column. But at the same time, I also understand that if there's this unified approach, that that just makes it easier because then you if you just know item wrap, no wrap, and it's going to prevent wrapping.
00:05:16
Speaker
um But you'd also have to already have switched the flow direction with grid, I think. Right? Or maybe you're using the repeat syntax. Like, I don't know. I don't quite wrap my mind around how that would work in that situation with grid.
00:05:31
Speaker
um But it doesn't really matter too much. um there's a few Anyway, there's a few other properties too. There's things like item pack. that would be a completely new thing that i think a lot of people would like there's some good visuals to explain how it works um that deal with like making things fit a little bit better ah there's also i'm trying to oh there's the yeah the item pack balance i think is what people would really like which is i've seen a lot of people asking for this so right now with flexbox if you have wrapping you might have like five items across the top and then one item wraps to the bottom
00:06:03
Speaker
and then that one item stretches the entire size. So the idea there is we could do, they're saying item pack, the names for all of these are up for debate, but it'd be item pack balance, and then when the wrapping occurs, it's actually gonna balance the number of items that are on the two rows that are being created.
00:06:20
Speaker
a little bit, I guess, like a text drop balance, that type of idea. And that 100% I could get behind having something like that. um I don't know exactly how that would you work or with Grid though, because Grid sort of already works that way. But anyway, there's there's different ideas that are out there.
00:06:38
Speaker
um And one of they they have a nice chart in it that sort of goes, if we use this, this is how things would change or or function instead of how they currently do.
00:06:50
Speaker
And I think there's a lot of good ideas that are being brought up in here. And I think the idea of a unified system where we have more similarity
Challenges of Merging Flexbox and Grid
00:06:59
Speaker
between them. Even if the behavior between the two isn't exactly the same, if it's similar, developers are gonna like that. Because I really do feel that a lot of developers learn either Flexbox or Grid, they become comfortable Flexbox or Grid, and they don't use the other one, because it feels like it's just this completely other system.
00:07:18
Speaker
And so if we could make something that's a little bit more unified, that works in a little bit more of a similar way, I think that could be really beneficial. It does lead to me wondering, like, could all of this be done just with like a new display property and everything grouped together?
00:07:35
Speaker
ah But I think that might be opening too big of a can of worms. And um yeah, I'm not 100% sure there, but I think the one the one issue still would be.
00:07:46
Speaker
that there's probably going to be certain properties or not properties, certain values for properties that work a bit different between the Flexbox and Grid version. And they have to just because they're two different layout modes.
00:07:59
Speaker
Whenever there's inconsistencies like that, people get a little bit frustrated. I had been talking a bit about this in my newsletter recently as well, just about the CSS mindset where when you need go into different layout modes so display flex display grid or even the position when you change your position to an absolute or a fixed or whatever you're changing the layout mode for that element that the algorithm changes and so like even like a width 1000 pixels isn't a width 1000 pixels all the time right you declare that it should just always be that but then you do a display in in line and the width doesn't do anything and you do a display flex and it might be a thousand pixels but it are
00:08:34
Speaker
if the parent has a display flex, the child might be a thousand pixels or it might be smaller because it might be squishing with the flex shrink on there. So like depending on the situation, things are always going to be a little bit different. And it makes sense most of the time why they're a little bit different.
00:08:50
Speaker
But yeah, I think it's the right idea. But I'm just worried that people are still going to complain about the inconsistencies.
Renaming Item Properties for Clarity
00:08:56
Speaker
But I think that if I think this is one of those things that a browser is going to once again have to put into um production, not production production, but like behind a flag or just in the technical preview slash canary or whatever, just so we can actually play with it. And I'm curious if now that web kit team has put this out i'm curious if they're actually going to start prototyping this or not uh just like everything else is being prototyped with all of these proposals because i think this is something that we need to play with to see if it's actually a good idea because in theory i think will be very different from actually using them uh a few interesting things that have also come up through all of this has been the there's there's one property called the proposal for it was item slack
00:09:43
Speaker
which I really didn't like. i I'll read what it says. The item's Slack property would allow you to control just how picky the layout engine is when determining where to put the next item. For masonry style layouts, this would be the new name for the property previously discussed as grid Slack or masonry Slack.
00:10:00
Speaker
ah Default Slack of 1M means, hey, when you're looking to see which column has an empty space closest to the top as you decide where to put the next item, don't worry about it if the difference is 1M or less. Just consider those tied.
00:10:13
Speaker
For Flexbox, this could be a point from which loose packing to cramming is an extra one, to cramming in an extra item. which is currently set to zero. A value of 1M would mean if it's within 1M of fitting, cram it in, otherwise wrap it to the next line.
00:10:29
Speaker
With flex wrap, this would be fantastic. Like right now, items with flex wrap only wrap when they get to like as small as possible. So if we could have like some cushioning there, where it would actually wrap a little bit earlier before it gets to everything's hitting those minimum sizes. That would be really nice.
00:10:46
Speaker
um And they actually, the CSS working group opened an issue just on the naming specifically for item Slack. And I think, or it actually, it has been resolved. They're going to change the name to item tolerance.
00:10:58
Speaker
So um if you go and check it out, they talked about that. and I think tolerance is a much better name than Slack. just because not even as one of the points brought up was non-English speakers, the word item Slack, like it Slack might not be easy to interpret even as a native English speaker. Like I had to read that to understand it and I didn't feel like Slack was great. So the tolerance I think is a much better name.
00:11:23
Speaker
So we're sort of saying, okay, we can tolerate 1M or 1RAM or 10 pixels or whatever it is difference as you're sort of dealing with these types of things. I think that makes a lot of sense.
00:11:34
Speaker
The other thing that has come up through all of this though, actually, and in that same working group issue, it did come up that during the previous discussions, there's talk of changing them from item everything. So like if I get the list here, um item direction, item wrap, item pack, item slack, item flow, which is a shorthand, that it potentially would be flow. So flow direction, flow wrap, flow pack, flow tolerance, I guess.
00:11:59
Speaker
And when I first read that, I didn't like it. And now that I'm saying it out loud, I think it actually makes more sense. So we'll see about that then. ah Yeah, I think the flow actually does make a lot of sense there, especially flow direction instead of item direction.
00:12:12
Speaker
And then the flow wrap is you want it to the flow wrap, no wrap flow, wrap, reverse, things like that make sense. Flow pack, normal flow packing. Are we densely is everything Densely packed or not. That's a really interesting idea and I'm sort of behind that yeah Yeah, now that I've said these words out loud and this is why I like talking them out loud because sometimes when it's just in your head um It doesn't quite sound the same So yeah, that's kind of interesting with that. The other thing that I found was our there is a working group issue on this that I've commented on But it's for a generic layout item flow control. So this everything we're talking about here. It's actually in the Working draft. No ah Yeah, this is a working draft
00:12:58
Speaker
For CSS, I'm gonna have to, let me just click on that. Flow control, we're good. ah For grid layout module three. So I'll put a link to this also in the show notes.
00:13:10
Speaker
And it talks about this idea of having these item properties, which I guess potentially could be flow properties. And it was Tab Aptkins posted in the GitHub issues about potential other naming convention.
00:13:23
Speaker
which instead of item direction would be item track, instead of item wrap would be item cross, and instead of item pack, item pack would stay the same in item slack. So it was mostly item direction becoming
Impact of New Layout Systems on Accessibility
00:13:34
Speaker
item track and item wrap becoming item cross.
00:13:38
Speaker
and the idea here is to make the properties more semantically meaningful from what i understand um and just there's some nuance a little bit between focusing on like the direction of the items versus the track the items are on and then with item wrap versus item cross the idea is like we're talking about how they're working on the cross axis And because like you can do an item wrap reverse isn't really talking about wrapping because we're putting things reversed and we're not talking about it's actually like a no wrap reverse. Right. So ah there's a little bit of a naming thing there where maybe item wrap or even where the flex wrap probably maybe wasn't the best name to begin with. And this is a chance to correct that. And that's a little bit how I see that argument coming from. And um maybe I'm wrong on that.
00:14:31
Speaker
um where Tab was coming from on that. But my, I put, i I commented on this in the GitHub issue, talking about how the problem with renaming them to new things like item track and item cross, or so we said flow track and flow cross maybe, that is that We, as developers, have already understood things like item wrap, because we have flex wrap, and we have years of using flex wrap.
00:15:02
Speaker
And then to throw item cross in there, I'm super worried people are just going to be like, what what the heck is this? And that rather, and you know, 10 years down the line, maybe we're never using FlexWrap because we don't have to because we have this other property.
00:15:17
Speaker
So like new developers aren't going to come with this baggage, but every current developer has the baggage of what we're used to using. And I think we need to lean into that. If we're trying to make something more unified, that people are...
00:15:30
Speaker
going to adopt and start using that we need it to be as familiar as possible to what they're already used to ah just because like already now i've had multiple people tell me that they've tried to use logical properties in at work and they've put in their pull request and the pull request has been denied because they used a logical property because the person looking at it didn't know what it was.
00:15:57
Speaker
And they said, well, nobody on the team is going to know what it is. So just use the regular property instead. And you're just like, oh, if people aren't or if people are getting their pull requests denied because they're using a logical property, imagine if item cross showed up all of a sudden.
00:16:11
Speaker
and the right um and like obviously we have new things like the item slack or tolerance or whatever there will be new things coming along with all of this that we will have to learn but i just think if there's a familiar if it's replacing a current existing thing where the existing thing doesn't change like flex wrap is if you use item wrap and use FlexWrap within the Flex context, they would be literally interchangeable with one another.
00:16:39
Speaker
Having two different, completely different names there to me adds a level of friction for the adoption of that feature. So that's one thing um that I'm curious about and how it, yeah, where that's going to go, that part of the discussion. And it's something I'm definitely following.
Resolving Tab Order Issues in CSS Layouts
00:16:56
Speaker
The other thing that I think it was Andy Bell brought up on Blue Sky was the part with this where part of the discussion, maybe we're going in the wrong direction right now or not the wrong direction. I think this is a really important topic that should be discussed, but we need to be a little bit careful in that we want to make sure that If this gets implemented, how are we dealing with the just the reordering of things? Because even with this, I believe, even if you're using Flexbox, there's the potential of rearranging items outside of the regular order.
00:17:37
Speaker
And definitely with masonry, that would become a big thing. We already have that with grid if used dense, right? Where things can be out of order. um And this is something that Rachel Andrew brought up, i think it was at CSS Day, where she went over a little bit of the grid versus masonry debate, but then transitioned over to talking about tab ordering and potential for the having something in CSS that could fix when we muck around with order.
00:18:09
Speaker
And I really wish this was getting more traction. and Maybe I should do my own part because I have a platform. So this is part of it. Let's let's start here. and Now that I'm saying, this is why i like the podcast. It gives me an opportunity to ramble and talk out loud and makes me realize things that I probably should have already realized.
00:18:26
Speaker
um So I think I will bring more attention to that. But when we pull things out of order, and then if tab orders get mucked up because of that, it just can ruin user experiences or make them very awkward at at the very least.
00:18:39
Speaker
And so there's this idea that maybe there's something we can do that allows the browser, and this would be a lot of work probably for the browser, but I guess, maybe not, I don't know. ah But it allows the browser to modify the tab order to become visual.
00:18:56
Speaker
So as soon as the things were out of order, if you're as long as you haven't changed tab indexes on anything, that it would follow ah
Future of CSS Layout Systems and Technologies
00:19:05
Speaker
logical ordering. And I don't know how the browser would figure out what logical would mean in terms... I guess there'd have to be a lot of talk and and figuring out of that, because there's probably some edge cases where it would be very hard to determine what actually makes more sense. But...
00:19:20
Speaker
um Yeah, if we're giving users this possibility of rearranging stuff in the masonry layout would definitely i'll make this happen in in how it's being proposed and and working right now, that if things are going out of order, how are we dealing with that? Because this is going to encourage people to place things out of order.
00:19:42
Speaker
And so I do think before that gets implemented, we should probably have a mechanism that deals with that. And so that, I'm surprised, hasn't been getting more attention. So yeah, let let's start talking about that a little bit more.
00:19:55
Speaker
If I can find any, I haven't even looked for it. I've been thinking about it a lot. I haven't looked for it but I'm going to look for um anything i I'll put links to anything in the description I can find on that that can help just spread spread word on that and make that part of part of the discussion. And maybe I'll start planning a YouTube video on it as well ah for the main channel.
00:20:16
Speaker
But yeah, it's interesting time for CSS right now. And that I think this the idea here too with this item thing and this unified layout is like, okay, if we do this properly, we can add masonry in without any overly new ways of doing things. Like, we don't maybe we don't need to reinvent everything as much as we thought.
00:20:39
Speaker
And it would potentially also open up to being like, okay, this would also work in this other imaginary world of something we haven't thought of yet, where we'd still be able to use these types of things within this other context.
00:20:51
Speaker
um You know, maybe, i don't know where CSS is going with it, but as I don't know, with 3D and other things coming in, maybe it would potentially come in with like AR stuff. I don't know.
00:21:02
Speaker
I have no idea at all. But um just ah some I think that's sort of the idea, is like let's stop... making a whole bunch of different stuff and try and just have find the similarities between things and and see how we can make those work. So it's ah interesting times anyway. I'm curious to see where this
Conclusion and Future Updates
00:21:20
Speaker
goes. It's definitely something I'm keeping a very close eye on.
00:21:23
Speaker
So if there's any major progressions in this, I'll do another post on it and talk about what I think about where things are headed. I said post, but you know what I mean, right? ah But yeah, I think that's it for this week. So thank you very much for listening. If you did enjoy it.
00:21:36
Speaker
Well, I'm assuming you did if you're still here listening. So thank you for for listening and thank you for enjoying it. That doesn't sound right. I'm glad you enjoyed it. That sounds a little bit better.
00:21:47
Speaker
And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.