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

Aug 15, 2023

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

Jake and Surma chat about layouts that put the content in charge, vs layouts that put the CSS in charge, and why that difference matters.

Jake’s ancient article → https://goo.gle/3kLxWBd

More videos in the HTTP 203 series → http://goo.gle/HTTP203
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs

Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast

#HTTP203 #ChromeDeveloper #WebDev

Content

0.08 -> we film a few of these in a row and no

3.76 -> i know i know spoiling the magic

6.16 -> i know

7.279 -> i've clearly

8.48 -> gone away from the studio slept and come

10.4 -> back for another day in these genes but

13.44 -> that means that this episode now

15.599 -> is probably going to be like

17.92 -> 12 weeks into the future yeah i think

20.88 -> the world's gonna be like that like

21.92 -> because

22.88 -> we feel like we're on the cusp of a

24.32 -> change

25.439 -> right now for the worse

27.039 -> well

28 -> well that's the question isn't it

32 -> [Music]

35.84 -> so what i'm going to talk about

38.8 -> some of this

41.92 -> columns with content columns

44.48 -> with content so imagine you needed to do

47.2 -> this you wanted to do this three equal

49.36 -> columns like with a gap in between them

51.6 -> there's a few ways of doing that now

52.879 -> like we've we've got a variety of

54.64 -> different layouts block layout grid

56.64 -> layout flex layout they will all do the

58.559 -> trick exactly uh so i wanted to look at

60.48 -> a couple of ways of doing it that look

62.239 -> kind of similar so got this one

64.64 -> yeah yeah display grid auto columns flow

68.24 -> whatever gap

69.92 -> and then there's this one do we even

71.2 -> need the order flow

72.799 -> um

74.159 -> oh i can't remember it's one of those

76.08 -> you know what with this and flex i

77.52 -> always just put it in because i can

79.439 -> never remember what the default is so i

81.04 -> just

81.759 -> tappy type it happy

83.28 -> there we go

84.479 -> so there's there's two things here and

85.84 -> like i

86.799 -> i have sometimes gone for the first one

88.799 -> over the second one

90.72 -> because it feels more versatile

93.759 -> doesn't the second one have three

95.2 -> columns

96.4 -> well yes and you would have noticed in

98.479 -> the first slide there were three columns

102 -> yes sorry i for some reason i read

104.32 -> columns i was like oh they have to go

105.92 -> horizontally you know that you often

107.68 -> have rows mate yeah

109.92 -> but yeah that's

111.84 -> the first one you could have as many

113.2 -> columns as you want right it just sort

114.799 -> of

115.6 -> figures stuff out

117.84 -> but i think the second one is the right

119.84 -> choice

121.04 -> second one yeah

122.96 -> and it's to do with how

124.799 -> partially how to do the browser how the

126.399 -> browser parses content and what happens

128.959 -> while the content is loading so say

131.12 -> we've got this back to our divs from

132.72 -> before yeah

134.16 -> um is the next highlighting brock

136.8 -> no deliberately because i'm going to

138.239 -> introduce this in character by character

140.48 -> and the top half is going to be

142.64 -> what the parser receives

144.56 -> and the bottom half is going to be what

146.16 -> the parser creates the the dom that

149.12 -> emerges from yes okay exactly

152.08 -> so because the browsers can create dom

154.64 -> while they're downloading html

157.36 -> so we start off

160.959 -> nothing

162.239 -> nothing nothing happening at this point

164.56 -> you know why

165.68 -> i mean you know why i do i actually i

168 -> don't know if i know why i have a hunch

170.08 -> going

171.44 -> hey what

173.84 -> yeah there we go and that's when the

175.36 -> password goes right okay we've got a div

178.48 -> i know what all the attributes are and

179.92 -> this is the point it will go and create

182.08 -> that element and stick it on the page

184.4 -> we don't have an end tag yet but we do

186.239 -> in the dom because there's no such thing

187.84 -> as an n tag in the dom that's just the

189.599 -> visual representation of a dom

191.519 -> the node exists the node it exists and

194.8 -> the pointer is inside that node because

197.04 -> as we create more stuff

199.28 -> we've just added some white space

201.92 -> um but nothing else has changed but once

204.4 -> again

205.28 -> we haven't created an element x we

206.4 -> haven't reached it

208.08 -> and on we go we've now got a div inside

210.4 -> that div

211.68 -> and so on and so on we start adding

213.36 -> content

215.12 -> more divs appear

217.36 -> so you end up with a situation where as

219.44 -> the page is downloading these divs

221.92 -> can appear one by one a lot of it

223.92 -> depends on the speed of the connection

226.319 -> what else is going on but that is where

228.72 -> we see the difference between these two

230.879 -> yeah bits of layout because this one

233.12 -> will load in like this

237.599 -> there we go

239.04 -> whereas this one will load in like this

245.2 -> now which one is better jake the first

247.36 -> one was better wasn't it yeah because it

249.599 -> i was actually going to argue that i

250.959 -> like this better like not in terms of

252.879 -> how it loaded in but the way i declared

254.4 -> because it doesn't tie me to a specific

257.28 -> layout if i wanted to add a column i can

259.12 -> just edit the markup and that is nice

261.28 -> developer experience but this is another

262.96 -> example of where developer experience

265.28 -> comes at the cost of a good user

267.28 -> experience

268.639 -> exactly and it's and it's easy to see

270.72 -> some content like this and go well you

272.96 -> know is the browser really going to

274.8 -> render it halfway through

277.36 -> i mean it can that's the thing

279.04 -> you know you can say well probably not

281.199 -> fingers crossed that's tends to be a bad

282.96 -> way to literally

284.88 -> before we start doing this episode i was

286.72 -> reading an article on my phone on good

289.759 -> internets here in the office

292.16 -> and there was a tweet embed that wasn't

294.72 -> loading very fast and it moved the

296.88 -> entire page in a weird awkward

299.68 -> meaningless state almost

301.36 -> that was probably down to javascript

302.8 -> this time

303.759 -> but that could happen here as well like

305.04 -> one of those columns could be added

306.24 -> later with javascript

308.24 -> if your middle column has a lot of

309.6 -> content which is usually the column

310.88 -> which does uh then there's more chance

313.12 -> of the browser doing a mid rendering be

315.12 -> quite busy until it gets to the end of

317.039 -> the middle column node and then does the

318.8 -> right node and then suddenly everything

320.24 -> gets squashed which is also an expensive

321.84 -> layout if the middle column is big so

323.759 -> absolutely it adds up and also if you

325.919 -> have a streaming templating language

327.759 -> which sounds like a fancy term but what

329.28 -> i really mean is php

331.12 -> like if you do a database look up in the

332.88 -> middle of that column then there's a

334.8 -> point where you're going to add more

335.759 -> milliseconds of server time yeah and it

338.16 -> will encourage the browser to flush and

340.639 -> then render and render yeah and this is

342.56 -> the kind of thing that you're not going

343.759 -> to see on your local development

345.68 -> environment it's it's a real gotcha that

347.919 -> you really need to turn

349.6 -> all of the settings down to the minimum

351.039 -> just to see this happen and it doesn't

352.88 -> mean someone will have to be on that

354 -> slow connection in order to see it

355.28 -> because it comes down to chance

357.52 -> which is a problem

358.96 -> but as you say this is something that

360.72 -> people

361.52 -> will they'll avoid uh doing this for the

364.56 -> reason you said like oh

366.56 -> i don't want to specify three columns um

369.68 -> because what if i have another layout

371.36 -> that has four columns i'm gonna have to

372.4 -> do another class

373.68 -> whole another thing and like you know

376.08 -> for however many columns gonna have and

377.44 -> i have columns two columns three columns

379.039 -> four when i could just have one that

381.68 -> seemed to work fine um

384.08 -> i would say the the work around for that

386.4 -> would be to

388.08 -> do something like this

389.52 -> props props

391.28 -> props props because at this point you

393.919 -> probably know how many columns you're

395.28 -> going to have and grit has repeat

397.919 -> so this is literally

399.44 -> grid has

400.8 -> repeat

401.84 -> there we go there's very little

403.759 -> arguments we made that this is in any

405.6 -> way worse

406.72 -> yeah i i think some people would see the

408.4 -> inline style and go

410 -> oh inline style's bad but we're using it

412.479 -> in a semantic way this time so even if

414.56 -> you're against it um in terms of inline

417.199 -> styling we are using it more in a

419.199 -> semantic way here and i think this kind

421.84 -> of gets you the best of both worlds gets

423.12 -> you that reusable class

424.8 -> but um

426.479 -> yeah it's it gets you that nice

428.24 -> rendering if you want really badly you

430.72 -> could make your build system

432.56 -> generate that style attack for you so

434.56 -> you don't have to count yourself

436.8 -> absolutely yeah

438.72 -> because three i mean

440.72 -> i guess you've got to get past one and

442.16 -> two before you get to three yeah i mean

444.319 -> but i guess with with you know

446.16 -> react pre-act components that's actually

447.759 -> quite easy to do you you know your

449.36 -> children you can literally count them

450.72 -> and add that number to an inline style

452.08 -> like it might actually be quite easy you

453.599 -> don't even need a proper build system

454.88 -> yes so and i can see this happening if

456.56 -> you've got like a series of menu items

458.4 -> uh like horizontal menu items where like

460.56 -> if you're an admin it's got two more

462.8 -> but by the time you're you're creating

464.16 -> an element

465.039 -> you've got to think no is admin all

466.8 -> right i know how many things i'm going

468.16 -> to create i'll add that add that number

469.68 -> in

470.56 -> um

471.919 -> i would say grid if you're using grid

473.919 -> template columns doesn't mean that

475.36 -> you've solved this problem

476.879 -> no because there are values you can put

478.319 -> in grid template columns that do depend

480.4 -> on the content and that's really what

481.759 -> we're talking about here the the

483.12 -> difference is is the layout being

484.96 -> defined by the css

487.52 -> or is it being defined by the css plus

490.08 -> the the content plus the html

492.479 -> and where when you're saying you know

494 -> one fr one if i won if i it's the css

496.16 -> saying there is going to be three

497.68 -> columns here

498.879 -> whereas if the auto version it's like i

500.879 -> don't know

501.84 -> let's see what's in there yeah and

503.52 -> that's when you create the layout

504.879 -> problems but here we've got some values

507.199 -> max content min content auto

509.919 -> fit content

511.44 -> auto in fit content just derived from

513.519 -> mac's content and content in various

515.44 -> ways and it creates that problem here

517.2 -> because it's essentially saying i want

518.959 -> this column to be related to what's in

521.12 -> it yeah

522.32 -> and

523.2 -> sometimes that's okay especially if it's

524.48 -> the first column because it doesn't

525.6 -> matter so much but if it's the last

527.279 -> column then you're still going to have

528.56 -> that thing where everything's wide and

530.56 -> then the last thing comes in it it

532.16 -> doesn't know how wide it's going to be

533.279 -> until it's there

534.56 -> and this is what also what they mean

536.16 -> that

537.04 -> both grid and i think also flex are

539.839 -> multi-pass layouts

541.36 -> because what they give you can depend on

544.399 -> the element's

546 -> intrinsic size as it's called and that

548.56 -> sometimes means that

550.72 -> it has to start over because now that it

552.8 -> knows the intrinsic size of the last

554.72 -> element it actually affects how the

556.24 -> first couple elements need to be laid

557.76 -> out to make it all work and it has to

559.279 -> start over yeah and then maybe it wasn't

561.12 -> the last element another one comes and

562.32 -> it has to start all over again which

564.959 -> makes it sound really bad it's not like

566.48 -> you should use grit you should use flex

568 -> absolutely but it's something to be

568.88 -> mindful of and that they have these

570.72 -> capabilities just opens up a whole a

573.12 -> bunch of new problems that we need to

574.72 -> care about i'd like to talk more about

576.24 -> flex but first here's a here's an

578.16 -> interesting fact that i didn't know

580.08 -> what does 1fr mean

583.2 -> that i was literally contemplating

585.04 -> whether i should ask this because i was

586.32 -> thinking about this if one if repeat31

588.8 -> of r actually is always a three column

591.279 -> layout of equal size because i don't

592.8 -> think it is in all cases

594.56 -> i was trying to remember because it one

596.56 -> of our means for

598 -> it's the free space and you can

600 -> distribute the free space with these

601.839 -> weights so if you have one of r var

604.24 -> everyone gets one third of the free

605.76 -> space if you do two one one the first

608.08 -> one gets twice as much as the other two

610.08 -> but it's free space and so i was

611.92 -> wondering if the

613.44 -> that basically is how much space is left

615.6 -> after i lay out the elements

617.76 -> with their intrinsic size i guess so if

620.16 -> i and text i think can be squashed to

622.32 -> almost any arbitrary size so it's not a

624.88 -> good example with images for example i

626.56 -> wonder if it would be different

628.72 -> you're kind of right you're kind of

630.399 -> right so here's the deal um although it

633.279 -> does matter with text so here we've got

635.04 -> three equal columns because we've got

636.56 -> one fr

638.32 -> um

639.279 -> but

640.079 -> whoop

641.519 -> this happens

643.04 -> so now that first column

645.36 -> has to be that size because it can't

646.56 -> wrap that text because it's all one word

648.64 -> and now it's become bigger and the other

651.279 -> two have had to squash as a result

653.92 -> and it's not down to the free space

655.76 -> distribution it's down to a very very

658.399 -> weird edge case in how

660.399 -> one fr is defined because one fr means

663.12 -> they should be the same size but one fr

665.279 -> doesn't mean one fr

666.959 -> when it's in

668.32 -> grid template columns or in repeat

671.04 -> what one fr actually means is

673.6 -> min content 1fr oh really

676.64 -> yeah

677.6 -> how it's

678.8 -> really weird when i saw this it sort of

680.32 -> blew my mind uh because you could put

681.92 -> zero in there in which case it does this

684.959 -> i would if you wanted to have actual

687.44 -> equal spending we just use

689.6 -> calc 100 divided by number of columns

693.04 -> um

695.36 -> the

696.24 -> okay so the difference between one fr

697.76 -> and percentages

700 -> is that the uh if you use percentages

702.8 -> then the gap is going to add to that you

705.519 -> would have to manually deduct that you

707.279 -> have to deduct the gap you're right

709.12 -> whereas with fr it's it's the fraction

711.92 -> after the gaps are all done so does fr

715.2 -> actually stand for free space

716.88 -> uh

718.16 -> free

719.76 -> action

721.279 -> okay so it it actually doesn't have

722.8 -> anything with the available space after

724.72 -> that it's literally the space that is

726.48 -> being laid out it's a fraction of that

728.399 -> group with the exception of it being

730.959 -> in context i misunderstood something

734 -> your definition is very close to flexbox

736.72 -> i'd say um probably yeah which we should

739.44 -> probably talk about because it is

741.6 -> entirely content driven

743.68 -> there's no way of defining your flexing

745.68 -> up front like it's

747.6 -> like it's yeah it's always going to be

749.76 -> driven by content

751.36 -> and this

752.48 -> makes it

755.12 -> better and worse but it's yes okay

758.8 -> it's bad for page layout yeah because

761.04 -> it's always going to have that layout

763.2 -> issue if you're used if you're doing any

764.8 -> kind of flexing within your flexbox and

767.36 -> if you're not uh while you're using it

769.92 -> you are going to end up with this issue

771.279 -> or the potential of this issue where

773.2 -> things shift around as they load um

776.48 -> in some ways

777.839 -> table layout can be better because they

780.24 -> will allow us a grid right and you can

782.56 -> use i mean even in ie8 you can use divs

785.279 -> but use css to give them table like

786.959 -> properties yeah and you can use fixed

788.8 -> table layouts to say right whatever the

791.44 -> first

792.959 -> row is that's going to be fixed for it

794.639 -> for the rest and and you can get a more

796.48 -> stable render than you can with flexbox

799.2 -> the much newer layout system

801.12 -> um

802.8 -> it's got to the point where i only use

805.2 -> flexbox

806.399 -> for things that grid cannot do

809.12 -> and those things do exist

811.519 -> yeah wrapping

812.8 -> like multiple robes where the robes are

814.88 -> independently laid out because they are

817.839 -> supposed to not look like a grid

822.079 -> grid is the two-dimensional layout and

824.16 -> sometimes like if you've got a

826.48 -> set of sponsor logos or something that

829.44 -> have different sizes and you want them

831.04 -> to be centered and have a gap between

833.2 -> them and horizontally and vertically but

835.92 -> you don't want them necessarily in a

837.279 -> grid you just want them

839.04 -> horizontal masonry layout yep and that's

841.44 -> that's yeah there's a good uh flexbox

843.6 -> thing right yeah that's that's what

844.72 -> flexbox is for

846.079 -> um

847.44 -> and it'll be interesting to see how the

849.44 -> comments for this video go

851.519 -> because you know because i'm telling

852.72 -> people don't use flexbox for your page

854.32 -> layout you know use grid because it's

856.48 -> better at this it has these better

858.399 -> layout semantics because all of this

860.959 -> content that i've just been talking

862.48 -> about this is old content because i

864.16 -> wrote this in 2014 and people got very

867.519 -> angry about it

868.72 -> i'll put a link to this in the

869.76 -> description go and have a look at the

871.04 -> comments people are telling me i know

872.88 -> nothing about anything and i'm stupid

875.44 -> and i should be sad they're not ashamed

877.6 -> they're not wrong but about this they

879.519 -> are wrong like i am stupid and should be

882.16 -> ashamed but not for this like this this

884.48 -> is because when i wrote this i

887.12 -> i talked to like you know

888.959 -> i'd come up this theory i thought well

890.56 -> this seems bad for all the reasons i've

892.16 -> talked about

893.12 -> um and i asked him is like

895.04 -> does this this right now oh yeah yeah

896.56 -> flexbox is bad for this we we need grid

899.76 -> but i guess in 2014

901.6 -> the story around grid was very different

903.12 -> because it barely existed i guess it was

905.279 -> the time where we had a v1 of grids or

907.839 -> the v0 or whatever in ie and nobody else

910.56 -> had anything so it's

912.959 -> it's exactly what it's exactly that it

914.56 -> was only an ie at the time and this blog

916.399 -> post the examples don't work anymore

918.32 -> because it was based on the old

920.24 -> ie grid examples and the reason i wrote

923.6 -> this post to make the the case for grid

925.68 -> is because at the time browsers were

926.959 -> dragging their heels a little bit around

928.48 -> the grid implementation because we

930.8 -> we've done flexbox not that long before

933.44 -> and i think that the perception was

936.16 -> look people have been dealing with

937.519 -> floats forever yeah for you know a

940 -> decade and we've just given them a new

941.76 -> layout system come on that must be good

943.519 -> for another 10 years or something

946.32 -> so this is really my case we're like no

947.68 -> no this is this is not good for this

950.399 -> and i think people were getting angry

951.68 -> because they were like yeah but it's so

953.759 -> much better than what we had i'm like

954.8 -> yeah yeah but but

956.72 -> we need some everything starts to look

958.16 -> like a nail when you have a hammer yep

959.92 -> so this whole episode is just like uh i

961.68 -> think you'll find uh what's right

963.199 -> or maybe i'm not like

964.56 -> maybe the comments are gonna be like no

966.48 -> you're still wrong jake shut up we're

967.759 -> going to continue to use flexbox as i

969.68 -> can just say the first time i've seen

971.759 -> posted on the 5th of february 2014 only

974.399 -> 5 months after the previous first pretty

977.519 -> much the cadence

980.88 -> coming

983.199 -> only five months yeah

985.6 -> pretty good going i'm going to hit the

987.44 -> 10-year anniversary of this you know my

989.44 -> blog soon and it's like yep 11 posts or

992.399 -> whatever

993.44 -> it's pretty much the same cadence as our

994.88 -> podcast pretty much

996.56 -> subscribe to our podcast

999.839 -> i think it's going to be completely tone

1001.12 -> deaf by the time it goes out it could be

1003.12 -> that's as with all of our episodes

1006.399 -> it could be terrible by the time it goes

1008.399 -> out it probably is

Source: https://www.youtube.com/watch?v=7EKEav7Io5Y