Avoiding layout shift by putting the CSS in charge - HTTP 203

we film a few of these in a row and no i know i know spoiling the magic i know i've clearly gone away from the studio slept and come back for another day in these genes but that means that this episode now is probably going to be like 12 weeks into the future yeah i think the world's gonna be like that like because we feel like we're on the cusp of a change right now for the worse well well that's the question isn't it [Music] so what i'm going to talk about some of this columns with content columns with content so imagine you needed to do this you wanted to do this three equal columns like with a gap in between them there's a few ways of doing that now like we've we've got a variety of different layouts block layout grid layout flex layout they will all do the trick exactly uh so i wanted to look at a couple of ways of doing it that look kind of similar so got this one yeah yeah display grid auto columns flow whatever gap and then there's this one do we even need the order flow um oh i can't remember it's one of those you know what with this and flex i always just put it in because i can never remember what the default is so i just tappy type it happy there we go so there's there's two things here and like i i have sometimes gone for the first one over the second one because it feels more versatile doesn't the second one have three columns well yes and you would have noticed in the first slide there were three columns yes sorry i for some reason i read columns i was like oh they have to go horizontally you know that you often have rows mate yeah but yeah that's the first one you could have as many columns as you want right it just sort of figures stuff out but i think the second one is the right choice second one yeah and it's to do with how partially how to do the browser how the browser parses content and what happens while the content is loading so say we've got this back to our divs from before yeah um is the next highlighting brock no deliberately because i'm going to introduce this in character by character and the top half is going to be what the parser receives and the bottom half is going to be what the parser creates the the dom that emerges from yes okay exactly so because the browsers can create dom while they're downloading html so we start off nothing nothing nothing happening at this point you know why i mean you know why i do i actually i don't know if i know why i have a hunch going hey what yeah there we go and that's when the password goes right okay we've got a div i know what all the attributes are and this is the point it will go and create that element and stick it on the page we don't have an end tag yet but we do in the dom because there's no such thing as an n tag in the dom that's just the visual representation of a dom the node exists the node it exists and the pointer is inside that node because as we create more stuff we've just added some white space um but nothing else has changed but once again we haven't created an element x we haven't reached it and on we go we've now got a div inside that div and so on and so on we start adding content more divs appear so you end up with a situation where as the page is downloading these divs can appear one by one a lot of it depends on the speed of the connection what else is going on but that is where we see the difference between these two yeah bits of layout because this one will load in like this there we go whereas this one will load in like this now which one is better jake the first one was better wasn't it yeah because it i was actually going to argue that i like this better like not in terms of how it loaded in but the way i declared because it doesn't tie me to a specific layout if i wanted to add a column i can just edit the markup and that is nice developer experience but this is another example of where developer experience comes at the cost of a good user experience exactly and it's and it's easy to see some content like this and go well you know is the browser really going to render it halfway through i mean it can that's the thing you know you can say well probably not fingers crossed that's tends to be a bad way to literally before we start doing this episode i was reading an article on my phone on good internets here in the office and there was a tweet embed that wasn't loading very fast and it moved the entire page in a weird awkward meaningless state almost that was probably down to javascript this time but that could happen here as well like one of those columns could be added later with javascript if your middle column has a lot of content which is usually the column which does uh then there's more chance of the browser doing a mid rendering be quite busy until it gets to the end of the middle column node and then does the right node and then suddenly everything gets squashed which is also an expensive layout if the middle column is big so absolutely it adds up and also if you have a streaming templating language which sounds like a fancy term but what i really mean is php like if you do a database look up in the middle of that column then there's a point where you're going to add more milliseconds of server time yeah and it will encourage the browser to flush and then render and render yeah and this is the kind of thing that you're not going to see on your local development environment it's it's a real gotcha that you really need to turn all of the settings down to the minimum just to see this happen and it doesn't mean someone will have to be on that slow connection in order to see it because it comes down to chance which is a problem but as you say this is something that people will they'll avoid uh doing this for the reason you said like oh i don't want to specify three columns um because what if i have another layout that has four columns i'm gonna have to do another class whole another thing and like you know for however many columns gonna have and i have columns two columns three columns four when i could just have one that seemed to work fine um i would say the the work around for that would be to do something like this props props props props because at this point you probably know how many columns you're going to have and grit has repeat so this is literally grid has repeat there we go there's very little arguments we made that this is in any way worse yeah i i think some people would see the inline style and go oh inline style's bad but we're using it in a semantic way this time so even if you're against it um in terms of inline styling we are using it more in a semantic way here and i think this kind of gets you the best of both worlds gets you that reusable class but um yeah it's it gets you that nice rendering if you want really badly you could make your build system generate that style attack for you so you don't have to count yourself absolutely yeah because three i mean i guess you've got to get past one and two before you get to three yeah i mean but i guess with with you know react pre-act components that's actually quite easy to do you you know your children you can literally count them and add that number to an inline style like it might actually be quite easy you don't even need a proper build system yes so and i can see this happening if you've got like a series of menu items uh like horizontal menu items where like if you're an admin it's got two more but by the time you're you're creating an element you've got to think no is admin all right i know how many things i'm going to create i'll add that add that number in um i would say grid if you're using grid template columns doesn't mean that you've solved this problem no because there are values you can put in grid template columns that do depend on the content and that's really what we're talking about here the the difference is is the layout being defined by the css or is it being defined by the css plus the the content plus the html and where when you're saying you know one fr one if i won if i it's the css saying there is going to be three columns here whereas if the auto version it's like i don't know let's see what's in there yeah and that's when you create the layout problems but here we've got some values max content min content auto fit content auto in fit content just derived from mac's content and content in various ways and it creates that problem here because it's essentially saying i want this column to be related to what's in it yeah and sometimes that's okay especially if it's the first column because it doesn't matter so much but if it's the last column then you're still going to have that thing where everything's wide and then the last thing comes in it it doesn't know how wide it's going to be until it's there and this is what also what they mean that both grid and i think also flex are multi-pass layouts because what they give you can depend on the element's intrinsic size as it's called and that sometimes means that it has to start over because now that it knows the intrinsic size of the last element it actually affects how the first couple elements need to be laid out to make it all work and it has to start over yeah and then maybe it wasn't the last element another one comes and it has to start all over again which makes it sound really bad it's not like you should use grit you should use flex absolutely but it's something to be mindful of and that they have these capabilities just opens up a whole a bunch of new problems that we need to care about i'd like to talk more about flex but first here's a here's an interesting fact that i didn't know what does 1fr mean that i was literally contemplating whether i should ask this because i was thinking about this if one if repeat31 of r actually is always a three column layout of equal size because i don't think it is in all cases i was trying to remember because it one of our means for it's the free space and you can distribute the free space with these weights so if you have one of r var everyone gets one third of the free space if you do two one one the first one gets twice as much as the other two but it's free space and so i was wondering if the that basically is how much space is left after i lay out the elements with their intrinsic size i guess so if i and text i think can be squashed to almost any arbitrary size so it's not a good example with images for example i wonder if it would be different you're kind of right you're kind of right so here's the deal um although it does matter with text so here we've got three equal columns because we've got one fr um but whoop this happens so now that first column has to be that size because it can't wrap that text because it's all one word and now it's become bigger and the other two have had to squash as a result and it's not down to the free space distribution it's down to a very very weird edge case in how one fr is defined because one fr means they should be the same size but one fr doesn't mean one fr when it's in grid template columns or in repeat what one fr actually means is min content 1fr oh really yeah how it's really weird when i saw this it sort of blew my mind uh because you could put zero in there in which case it does this i would if you wanted to have actual equal spending we just use calc 100 divided by number of columns um the okay so the difference between one fr and percentages is that the uh if you use percentages then the gap is going to add to that you would have to manually deduct that you have to deduct the gap you're right whereas with fr it's it's the fraction after the gaps are all done so does fr actually stand for free space uh free action okay so it it actually doesn't have anything with the available space after that it's literally the space that is being laid out it's a fraction of that group with the exception of it being in context i misunderstood something your definition is very close to flexbox i'd say um probably yeah which we should probably talk about because it is entirely content driven there's no way of defining your flexing up front like it's like it's yeah it's always going to be driven by content and this makes it better and worse but it's yes okay it's bad for page layout yeah because it's always going to have that layout issue if you're used if you're doing any kind of flexing within your flexbox and if you're not uh while you're using it you are going to end up with this issue or the potential of this issue where things shift around as they load um in some ways table layout can be better because they will allow us a grid right and you can use i mean even in ie8 you can use divs but use css to give them table like properties yeah and you can use fixed table layouts to say right whatever the first row is that's going to be fixed for it for the rest and and you can get a more stable render than you can with flexbox the much newer layout system um it's got to the point where i only use flexbox for things that grid cannot do and those things do exist yeah wrapping like multiple robes where the robes are independently laid out because they are supposed to not look like a grid grid is the two-dimensional layout and sometimes like if you've got a set of sponsor logos or something that have different sizes and you want them to be centered and have a gap between them and horizontally and vertically but you don't want them necessarily in a grid you just want them horizontal masonry layout yep and that's that's yeah there's a good uh flexbox thing right yeah that's that's what flexbox is for um and it'll be interesting to see how the comments for this video go because you know because i'm telling people don't use flexbox for your page layout you know use grid because it's better at this it has these better layout semantics because all of this content that i've just been talking about this is old content because i wrote this in 2014 and people got very angry about it i'll put a link to this in the description go and have a look at the comments people are telling me i know nothing about anything and i'm stupid and i should be sad they're not ashamed they're not wrong but about this they are wrong like i am stupid and should be ashamed but not for this like this this is because when i wrote this i i talked to like you know i'd come up this theory i thought well this seems bad for all the reasons i've talked about um and i asked him is like does this this right now oh yeah yeah flexbox is bad for this we we need grid but i guess in 2014 the story around grid was very different because it barely existed i guess it was the time where we had a v1 of grids or the v0 or whatever in ie and nobody else had anything so it's it's exactly what it's exactly that it was only an ie at the time and this blog post the examples don't work anymore because it was based on the old ie grid examples and the reason i wrote this post to make the the case for grid is because at the time browsers were dragging their heels a little bit around the grid implementation because we we've done flexbox not that long before and i think that the perception was look people have been dealing with floats forever yeah for you know a decade and we've just given them a new layout system come on that must be good for another 10 years or something so this is really my case we're like no no this is this is not good for this and i think people were getting angry because they were like yeah but it's so much better than what we had i'm like yeah yeah but but we need some everything starts to look like a nail when you have a hammer yep so this whole episode is just like uh i think you'll find uh what's right or maybe i'm not like maybe the comments are gonna be like no you're still wrong jake shut up we're going to continue to use flexbox as i can just say the first time i've seen posted on the 5th of february 2014 only 5 months after the previous first pretty much the cadence coming only five months yeah pretty good going i'm going to hit the 10-year anniversary of this you know my blog soon and it's like yep 11 posts or whatever it's pretty much the same cadence as our podcast pretty much subscribe to our podcast i think it's going to be completely tone deaf by the time it goes out it could be that's as with all of our episodes it could be terrible by the time it goes out it probably is

Channel: Google Chrome Developers

Views: 25,444

Rating: 4.9546742 out of 5

Keywords: purpose: Educate, pr_pr: Chrome, series: HTTP203, type: Interview, content driven layout, what is content driven layout, how to use content driven layout, content driven layout tutorial, http tutorial, what is http, http 203, http, http developer, developer, developers, chrome developer, chrome developers, google chrome, google chrome developers, google, chrome, Jake Archibald, Surma, GDS: Yes

Id: 7EKEav7Io5Y

Length: 16min 53sec (1013 seconds)

Published: Tue Sep 28 2021