Placeholder Image

字幕列表 影片播放

  • Okay.

  • Hello.

  • So there's an awful lot of you out here.

  • Wow, it's very, very cool to be here.

  • I was at the 2014 event, and I've done one more since then, so it's very nice to be here.

  • I'm very sad that this is the last of type so pleased to be here.

  • So I'm grateful, Andrew.

  • It's becoming increasingly difficult for me to tell people what it is that I actually do.

  • I kind of that They asked me the semi things for conference badges.

  • So can you put your company down there now, just off doing stuff on the web?

  • So amongst that stuff, I'm a Stasis working group member, and I represent from tears on, and it's really is sort of part of that work is why I'm here talking to you today.

  • I mentioned that.

  • Yes, I was here in 2014 that I wasin fact here talking about CSS grid layout, slightly jumping the gun.

  • It has to be said because CSS grid layout didn't ship into browsers until the spring of 2017.

  • We were all well prepared and I was starting to feel a bit like the CSS vaporware lady by the time eventually got out into browsers, so I was quite pleased when it did eventually happen.

  • So what kind of two years on amazingly well, though I feel like I've now spent half of my life talking about their specifications.

  • Andi, I've shipped stuff, you know, I've got production sites that use grade.

  • A lot of you have probably got production sites that use Ingrid to some extent.

  • Um, and we're starting to see people coming back and saying, Well, they screwed things all really good.

  • But I've discovered that it doesn't do this.

  • Oh, I've got this use case that doesn't really work properly, you know?

  • How are we goingto?

  • How could we do that?

  • So I'm kind of interested, really.

  • In what's next, I really start see myself a za problem solver.

  • Whatever I've done in the industry has Bean about solving problems, and that's why I really love working on CSS because we've got all of these amazing problems to solve everywhere you look, there's a new problem on someone's bringing a problem, which workout to do that and one of the problems that was that we should have immediately started to see and we kind of knew this was going to be an issue.

  • Waas this issue that grid items, you know, you can say display grid, but only the direct Children of the grid become good items, so only they could be laid out on the grid that you've created.

  • If you create a 12 column grid, only the direct Children can sit on that grid and in the level one specifications.

  • We had this idea of sub grids on dhe.

  • It didn't get implemented for anyone and we should have changed her.

  • Maybe that was going to happen and and there is some debate about it.

  • And eventually it was removed from the specifications from the level one suspects that we kind of finish that specifications.

  • But I was very, very keen that this sub good feature wouldn't go away.

  • And as soon as people started using grid, I could see that Yes, people really did need this sub good feature.

  • So this is kind of the really good example off why you might need sub grid.

  • We got a pattern like this.

  • You've got a set of cards and they've got neat headers and footers.

  • I imagine that everyone has had a designer.

  • Bring to them a design like this with all of the same content in all of the boxes.

  • Because that's exactly how all websites work.

  • We have an identical content in every box all the time.

  • And of course you get it.

  • You implement this, you say, Well, that's a nice grid layout.

  • Really easy grid layout, like your basic grid example, will give you that layout, so you build that layout on, then you get into the CMS on this happens and then the designer says no.

  • Those photos are all supposed to line up with each other, and you're like, Yeah, and it's kind of like we've pushed this problem a level deeper because we used to have this problem.

  • We had this problem with floats that you couldn't line at the bottom of the boxes on.

  • Then we got great and we in flex box.

  • We could line the bottom of our boxes.

  • But if your boxes and nested inside a grid item even if they are a grid themselves, you still can't line up the boxes because their independent grids.

  • And this is a fundamental thing about using the display property values of display.

  • Don't inherit so the kind of wine back and understand the actual problem.

  • CSS has got this concept of normal flow or block and inline layout, and that's pretty much the first thing you learn.

  • When you learn CSS, you've got block things and they kind of spread out and take all the space.

  • And you've got in line things like words, and they go next to each other.

  • Now that's normal flow.

  • And it could be worth thinking that essentially, CSS is always trying to go back to this layout method so you can change the value of display.

  • You can make something display flex.

  • You can make something display grid on.

  • Its Children will become flexor good items, but their Children the internals of those boxes, they go right back to normal flow.

  • That's kind of a good thing, because otherwise once you said display grid, you then have to go and say, Oh, you know, these things inside aren't good items.

  • You can't be setting yourself all the way down because generally normal flow is what you want.

  • It means that we can write a page of HTML and just load up in a browser, and it's readable you know most the time.

  • That's actually what you want.

  • So here's a simple flex example.

  • We've got a normal flow heading, and a paragraph didn't have to do anything about their layout.

  • Then I've got this media objects that display flex on the image in the content or flex items, but the content has a heading and some a paragraph that's gone right back there to normal flow.

  • So that's kind of what's happening.

  • And that's why we can't just make things.

  • The nest is somewhere in the structure.

  • Participate in the grid.

  • Our card internals.

  • I have made my card agreed so I could make my grid.

  • I'd like a nest.

  • Agreed to make my grid item a grid itself to each of my cards.

  • A little mini grids, but they don't know about each other.

  • I've got the Firefox.

  • Good.

  • Inspector turned on here now and you can see the grid on that card and you can see how the lines are extending out on did not lined it with all the other cards there.

  • So we have this problem there sometimes where we do want things nested down inside the structure to be able to somehow participate in the grid that we have to find on the parent.

  • Now, we do have a way to make indirect Children use a grid or a flex layout.

  • And some of you might have come across two already.

  • We've got display contents now.

  • Display contents is one of the box generation values.

  • If you say display none, that removes the box and everything inside it.

  • So it is.

  • If that thing was never there on in your design, as you can say, display none on a container.

  • Everything inside gone can't see it.

  • Display contents does a similar thing with the box itself, but leaves the Children alone.

  • So if you've got a box, you say display contents on that box, the box is removed, but the Children stay visible on, then participate in whatever layout they then become a child off.

  • So I've got a little example of that.

  • We've got a grid layout here on nested inside.

  • One of the grid items is actually a UL and nested inside that it's got some list items, so there's the HTML.

  • So I've got a date with the class of grid.

  • That's gonna be my grid container.

  • I think got to devise their direct Children.

  • I've got you.

  • Well, that is also a direct child on that Inside that you?

  • Well, there are some list items that you can see.

  • So there's a CSS the direct grid.

  • Children have that sort of pale background on them.

  • So the you Ella's well on the direct UL Children, they have a pink background so you can see that they're actually a child of you.

  • Well, and no child off the grid.

  • Now, if I wanted to remove the box of the U.

  • L, I need to say display contents on the UL, it vanishes.

  • The list items can now participate in the grid layout and lay themselves out.

  • So that's pretty cool.

  • That solves some sort of pattern, and you can see that's only happening to the box.

  • The Children are still the direct Children of you.

  • Well, they've still got their pink background color because they're still a direct child.

  • Everything else still applies.

  • Just the box of the U.

  • N.

  • Has bean visually removed, but that does not solve our card problem.

  • If we display contents are card, we get this because the card box has been removed on So we now have the components inside the card, the head on the contents in the footer and now bean order placed across the grid.

  • And that's not what we wanted.

  • That might be a pattern that you want sometimes.

  • But it's not the pattern that we're trying to build today.

  • And I can't talk about display content as well without a little warning that although it has pretty good brown to support, there is also a really gnarly accessibility bug.

  • Um, when you say display none, that does actually make the thing invisible for screen readers and so on as well.

  • It's like it goes away, and then you might want to bring it back later.

  • Display content is only supposed to affect the visual display, but due to a book in browsers, it is actually removing elements from the accessibility tree on, therefore rendering it not very useful for the things it would be useful for, which is allowing something to have a semantic box around it for you, no semantic purposes and for accessibility purposes and saying, Hey, I'm a list.

  • It's actually moving that information as well.

  • Browsers are fixing this.

  • I think fair folks have pretty much fixed it.

  • I know Chroma bean, you know, fixing it.

  • I've been seeing the notifications on that issue coming through, so browsers are taking this very seriously.

  • Now it's been pointed out and are fixing the problem.

  • But if you do decide to use display contents, just test very carefully in assistive technology that you haven't made a terrible mess while doing it.

  • However, we'll go back to our cards and a issue of wanting these card internals tow line up using display contents, even if it wasn't boogie and had great Brown's support.

  • That doesn't give us what we want because we want to keep our boxes.

  • We want to keep our card backgrounds s.

  • So what are we gonna do?

  • And it's This issue is where sub grid becomes useful.

  • So this is a value for good template columns and good template rose, and it basically makes it possible for you to declare that the Children of a good item become a sub grid.

  • And that's much easier to understand with some examples on all of the code.

  • These examples is online, and it's with my resources so you can go and have a look and play around wealth and trying to squint it on the screen and work out what's going on so we can make a grid item a grid you can say display grid as far down as you like, but at the moment that grid becomes this unique independent thing.

  • It's a nested grid.

  • It's completely separate the parent.

  • It has different lines for columns on Dhe Rose.

  • If you want that nested thing to line up with apparent, you're gonna have to do some very careful things with the track sizing to make that work.

  • Eso here I've got some CSS defining an outer grid, and that's got the whiteboard on.

  • And there's an item that sits on that grid on the items.

  • Also agreed with column and road tracks, and the serve item sits on that bridge.

  • The surviving the pink thing is on the internal grid, so again, five bucks could inspect if you're working with grid or with flex box.

  • And you know the inspectors in Firefox are fantastic.

  • You really, really do want to be using them.

  • Make everything so much easier when you can see where the lines are off the grid, especially playing around with this stuff.

  • So you turned on the five.

  • That's good, Inspector, and you can see the outer grid there on the parent.

  • You can see how that pink box doesn't line up with those grid lines.

  • It's separate.

  • And if we have a look at the grid on the child, there's a good on the child in the pink box lines up with the lines that are on the child so fairly recently, in fact, been allowed to offset multiple grids.

  • Display them at once very handy if using sub good.

  • So you can kind of see how the lines lineup or don't line up in this case when we're looking at our item.

  • So it basically start started over with a new red.

  • And so what sub grid lets us do It lets us selectively opt grids into the parent grid so we can decide if we want to.

  • Ops are columns or rose or both into using that the parent tracks.

  • So what I've done here, I've said grid template columns, sub grid, and you can see what's happened.

  • The item is now using the columns.

  • They're defined on the parent, and so the pink item is now positioned according to those lines, not to any internal lines on, therefore, it lines up with the rest off the tracks.

  • Now we could do this for Rose.

  • We could say Grid template rose sub grid on here.

  • I'm defining my own column so the columns don't line up.

  • And that's because that's what I've decided.

  • I want behaviour Rose.

  • We're using the two rows road tracks that are created on the item is sort of bean bean stretched over those because we're going across two tracks.

  • We can also create a sub grid in both dimensions, so that will tie our sub grid completely to the tracks that are available for Rose on dhe four columns.

  • So here were saying great template columns, sub grid and good template rose sub grid.

  • And that's really the basics of the spec.

  • It's a very simple thing is essentially just another value for good template columns and grid template Rose that says, you know, I'm not gonna define my own columns.

  • All those.

  • I'm just gonna use the ones that are already there on the parent.

  • Now, as with any specifications, there are some subtleties there.

  • There are some things you might need Thio be aware off one of those is that line numbers.

  • We don't use the line number from the parent because if you did, you'd have to figure out exactly where on the parent your celebrated component was.

  • That might change.

  • It could be a component used all over the place, so line numbers restart inside the sub grid.

  • In that way, a sub grid is no different to declaring the the tracks and use the line numbers.

  • They start from Warren, if you will.

  • In English, which is left to right line, wants me on the left hand side off your secluded component, just working exactly the same way that a normal grid would.

  • So, in this example here, you can see that column line worn is actually online to off the parent grid.

  • Now you might want to know where on the grid your sub grid is.

  • You you might care about.

  • Lanny's up against a line that's actually the apparent are lining up something inside that grid that's against lying the parent.

  • And to do that, if you name your parent lines, they will get passed into the sub grid views line names on the on the parent.

  • They'll get past in, and you can reuse them when your position things inside the sub grid.

  • So, for instance, if on my parents I've named Cole, start and call end when I'm positioning the pink item inside the sub grid, I can say cold starting call end.

  • Rather than worrying about the line numbers, I have a feeling that more people will use named lines once they using sub grid quite a bit, too.

  • Don't don't we see so many people using named lines?

  • It's not saying that tend to get in my email people asking about.

  • I have a feeling that once you start you submitted the name lines that get passed through might be quite useful.

  • So here's the code for that and you can see we name lines with square brackets were naming the line, and then you've got the track size coming after it on.

  • Then our serve item can actually use those those names when we place the item.

  • You might also want some names that just a scope to that secluded item.

  • You might want to give the sub grid lines some names, and now we do that by basically listing the line names after the sub grid keyword who don't have tracks in orderto put our lines between.

  • So you look a bit like that.

  • So you might say you get your sub grid keyword and then you're going to have all of the named tracks in square brackets because that's how we name those things.

  • So there I've just named two lines.

  • So this, with our example, would let us do something like this.

  • I've got my named lines on the parent.

  • I've also named all the lines off my sub grid.

  • And so I've got I can use either to position things.

  • I could use the payment lines.

  • I can use the sub grid lines.

  • It's up to May on.

  • So here's sort of a little worked example of that.

  • I've got my name lines on the permanent now, added my named lines on the Child on that and positioning two items, one using parent lines and one using child lines.

  • So that's sort of a useful way to be able to scope line names to just the so good item itself.

  • I think fairly obviously and logically, the sub good inherits the gaps from the parent, so if you've used the Gap Property, your rogue Apple column gap that's gonna get passed through into the sub grated item, which I think is probably what you'd expect if you've got gaps on the parent in your lining things up against the parent, you probably expect that get passed through into your child item, and you can sort of see how that works here.

  • But sometimes you want things to line up with apparent tracks, but you might actually want to stay close The gap between two items Perhaps you've got, you know, some content with the box below it.

  • You don't want to have a visible gap between the two things.

  • So to enable that we can change the gaps on the sub grid, she just used the Gap properties as normal on that.

  • Submit it item secrets.

  • If you want to know Gap like in this example, I've said Ro Gap zero, setting the gap to zero, and it's a bit like you've added a negative margin, then to the item so it will sort of get into the gap, and it won't expand out of the top of the so good that we really weird enough are useful.

  • It will just go down into any gaps and sort of fill in the gap.

  • If you had said a larger gap than is on the parent, that it's as if you've added a margin and it was sort of, you know, go in.

  • It's like that The line of the grid should have runs down the middle off the gap basically on, and you can sort of get into that by setting the gap 20 or whatever you want.

  • And hopefully it's fairly obvious.

  • I'm looking at this stuff that sizing of items in the sub grid can obviously change the size off the parent tracks.

  • So if you've got a row, which is set to auto, which is the default for for grid tracks and you put more more content and that's good, obviously make the sub graded row grow.

  • But as long as the apparent roses auto that will grow as well.

  • So it kind of works pretty much as you'd expect.

  • It works pretty much like you just nested a grid.

  • You happen to be using your the tracks from the parent, but everything else works in kind of the way it expected had nested one grid inside the other.

  • So if you've already got designs where you're nesting one grid inside the other.

  • So this is how we would get our card.

  • Example to work would basically stretch our card over three tracks off the grid, which means that the footers are now all in the same row, which means they all line up with each other on.

  • And when our footer, which is taller, makes that row bigger, it makes the whole row bigger on.

  • We just get space below the items that that don't have much content, which is really what we wanted.

  • We can also remove the gaps on the power grid on the child if we don't want to have the bigger road gap, which we have between the two items.

  • So this is this is pretty cool.

  • This allows us to create that pattern.

  • It allows us tow nest grids and let them then participate in the sizing really off the parent.

  • And you can do this really as far down as you need to do now.

  • Been playing around this for a while and just off I like to start Think well, Will this solve any other problems that we've got because, you know, this is very obvious use case having a set of cards like this.

  • This was one of the first things that was brought to may.

  • Well, why can't we do this?

  • There's also the example of, you know, maybe having like a 12 column layout and wanting things that a nested further down in the structure to also use that same 12 column layout.

  • They're kind of the obvious sub grid examples, but I think there's a few other things that I've started to realize we could do because we've got Sub Grete on.

  • Yeah, this is one of them if you use an explicit grid.

  • So this is where you say good template columns and define the tracks and good template rose and define the tracks that creates what we call the explicit grid.

  • The difference between that and the implicit grid is the implicit grid is when you just say, oh, create as many rose as you want to fill this, to fill it with content, which I think is a lot of the time.

  • What we do.

  • If you've got a set of cards like this and you just want them toe, keep on filling cards and keep creating grid rose.

  • As many as you need.

  • You would just use the implicit grid.

  • Now in practice, pretty much the only difference between the explicit grid.

  • The implicit grid that people run into is that you can target the end line off the explicit grid with minus one in another dimension, Which does mean that you can, You know, if you're using explicit grid, you can say 12 minus one on our element, and it will span to the end off the grid.

  • So that's what we're doing here.

  • I've got five explicit grid rose.

  • My items that have been placed into that and I've got one item which is positions from grid row 12 minus one and minus.

  • One is the end line of the explicit grid.

  • So it stretches to full height, and that's really what I wanted to happen.

  • But then I have to remember, that line minus one is the end line of the explicit grid.

  • So if I don't know how many of those items I'm goingto have, I don't know how many Rose I'm gonna have, um I have one row or might have 100 Rose.

  • I don't know.

  • And so I can't actually get the row minus one because I'm going to use the implicit grid.

  • I'm gonna create as many tracks as I need, And if I try and do that 12 minus one thing that happens.

  • And that's not what I wanted at all.

  • And this comes up a lot.

  • I get a lot of people asking.

  • Well, how can I span to the end of my implicit tracks?

  • And I'm like, Well, not very easily because we don't know what we've got.

  • So whatever, really What?

  • I want that pink block to be lined up with the rest of cons What have the same size as the rest of columns?

  • They're gonna be flexible, but I want to be able to get to the end off the number of rows of created.

  • So this is what that sort of looks like in terms of the CSS where I'm, you know, I've got no defined, implicit, explicit rose means a grid auto rose to give my rose a height.

  • So when I'm looking at that, they can't talk that end line.

  • The implicit grid.

  • I'm looking at sub grid.

  • I'm thinking I think we can probably solve this with sub grid because we've now got away off saying I want all my columns to be everything lined up in columns but those items to be able t to create implicit tracks, and so it does involve an extra container, but I need something to sub grid.

  • So I've added a container wrapper around my items and that's gonna use a sub grid for columns.

  • So that means that the column tracks are gonna be the same for the the item, which is outside of the wrapper on the items that are inside the wrapper.

  • You can see there where I've got my items on there just creating as many rose as they need inside that sub graded area.

  • So I'm not gonna so good on Rose.

  • I've got a super good on columns.

  • I'm just creating the items, one of it, one after the other, as many as I need.

  • But that pink item is essentially just put in one row off the parent grid.

  • So Incan stretches told us it needs, no matter how many rows are created.

  • And that basically just looks like this.

  • So I've still got no defined expects it rose and I've got the items there, which is a sub grid for the columns so that the pink item could be the same size as all the other items on.

  • I've got the full height, one which is going one toe minus one, but essentially just in one row off the parent grid.

  • Now we can use that.

  • We could do that when we've got sub Grid, because so good, let's is that have used that that one grid on the parent, everything to be lined up, column wise and let me do something different with my Rose.

  • I think if we start playing with this is probably quite a few of the little patterns it on obvious sub good candidates, but there will be able to fix by using sub grid.

  • Now, that's all marvelous.

  • But in my roller CSS vaporware lady, I need to have some bad news.

  • And that's a fact that we don't actually have anything in a live rounds that's gonna be in front of your clients just yet.

  • That's good, isn't it?

  • I like that I'm going to start when someone ships a and I'm not gonna show was all red, but slightly better news Is that fair?

  • Folks have after shipped sub great In nightly, Just last week, we'll live a Firefox.

  • So everything I've shown you here is that they're screenshots screenshots from Far Fox nightly.

  • You can get a copy of for Fuck's nightly and all the examples from this talk will work.

  • So if you don't have a copy of it, please go and download it and have a play.

  • It is really, really important that you do on dhe.

  • I'm gonna quote myself from 2014 or someone quoting me in 2014.

  • You know, if you wait until a speck is done and implemented to have a look and say it's rubbish, well, it's too late browses putting stuff out for us behind flags or in like nightly versions of browsers.

  • They give us a chance to contribute because while a speck is only in, you know when we've got all that red on can I use?

  • That means that so good is not in anybody's hands.

  • Get.

  • It's not out on any production websites.

  • Nothing is gonna break if we have to change something on that's the same for any speck that is in development.

  • It's just, you know, just starting to get out there in one of the browsers is really the best time to be able to play with that and to say, Hang on.

  • I can see a use case that this nearly solves but doesn't quite.

  • Perhaps, perhaps it could.

  • So it's a time for us to contribute.

  • And I think it's more important than ever that Web developers get involved with the Web platform.

  • We got a version of grid to experiment with in the first place, to the reason that I had bridge, you know, and I was playing around with it.

  • Forms off 2011 or so was because it was implemented prefixed in aii 10 and that implementation was pivotal in lying.

  • People like me to play with it and evangelize the speck and hope you try and get the interest of Web developers and actually try and help move this forward.

  • And I think as we have fewer rendering engines were losing places where those experiments might happen, and I think that makes it even more important that us, as the Web development community, use our influence on the browsers of the left, and we do have influence.

  • And so how do we indicate what is that we actually want?

  • But firstly, we just need to tell Brown's is what we want in the platform.

  • We can often just do that by going along to their book trackers.

  • Here is the book in chromium for so good support on dhe just flagging up that there's ah like thing or follow star you can you can click on there to say, You know yes, I think so, but it's important I would like to have it on.

  • Here is a handy Q R code.

  • You can use that Q R code.

  • You will go directly to that book tracker and you can just like that book.

  • Don't leave me to comments on books.

  • You know when we're not here to pester browser engineers.

  • But we're just here to say, Hey, yes, this is something that I need as a Web developer, I would find it useful if you would like to talk a bit more about it and share a bit more information than right up features like so good or anything else that you want to see in browsers, right of your use case right of the problems that your feature will solve because it's seeing those use cases, you know, Web developers After saying Hey, we need this and we need this because of this reason that's very compelling for people on the working group browser vendors to actually think about implementing it and solving a new problem.

  • Sometimes we get a feature that is just in one browser, for example, it's likely that fire folks are going to ship sub grade before anybody else, at which point the entire Web community will say, Yeah, Rachel, that's very nice, but I can use it because it's only sport in one browser.

  • Now we've got feature queries you could potentially use.

  • Sub grid is enhancement.

  • You could ship something like that car design, which does have obviously not lined up headers and footers.

  • That's fine.

  • If the browser house so good, we can check the circuit and we can use sub grid for the brows that supported the ones.

  • A supporter.

  • It looks better now.

  • This is important because if we're using it, then browsers are having a look to see what it is that we're using, because if your brows that doesn't implement something you don't want everyone saying, Well, it looks better in this other browser, so it kind of sends a message.

  • We're using this.

  • We'd like to have it and also use new features when they're behind a flag or in a nightly version of the browser.

  • As a say, this is your chance to be.

  • To test the Web platform, Andi offer feedback.

  • You know you can be a beta tester off this stuff, and you can actually make it better with your feedback.

  • And so what do you do with the feedback?

  • What you might find a bug.

  • You find a browser bug.

  • It's like, Well, the specs that you should do this find a browser book is not logged to go in the log it That's really helpful to the browser engineers who are working on this.

  • If you find something that's missing from the specifications, then come and tell the CSS Working group.

  • All of the CSS working group issues are on.

  • Get up so you can come along to get up.

  • You can search the issues we're pretty good at, and then beans to the market, up with the name of the specs, you can search like CSS quit issues.

  • For example, if you realize that your issue is not locked and we're not talking about it, then you can add a new issue just like you can't against any project.

  • Your CSS is just like any other open source project.

  • It's just a very big one.

  • It's quite a long time to get things sorted, but we are interested in the things that you have to say so you can raise an issue particularly around lay out.

  • You can always then prod me and say, Hey, I've raised this issue, you know?

  • Could you have a look when much rather be out to kind of promote the things that are coming out of the Web development community?

  • It's a lot more powerful than the stuff coming from just right inside the working group.

  • So this is This is just the issues repo there to say.

  • You can see in the square brackets the names of the specs.

  • You go and have a poke around anything that you're particularly interested in, go and have a look and see the sort of things that sort of work that's being done.

  • It can take a while, things to be discussed.

  • But when we do discuss things out of face to face meeting or on our phone conferences, that's all minute ID on the minutes and then posted back to the issue, she can kind of follow along and see what the progress of something is.

  • I'm really very, very keen to encourage people to participate in the Web platform.

  • And if your people who build things using these features, then you're exactly the sort of people who should be contributing on the browser engineers, people work on brows, and the people who write specifications are all very, very clever folk.

  • But a lot of them don't build websites anymore or haven't built websites for a very long time.

  • So kind of your input is really, really important on also, as a person who uses CSS, you get an awful lot back by working on this stuff by getting involved with this stuff.

  • Yeah, I left school at 16.

  • I've got no maths or science background on the things I have learned by just contributing And yes, um, has been told I'm wrong.

  • But having conversations with browser engineers and people have really in depth knowledge of this stuff.

  • You know, I couldn't have learned that stuff on any course.

  • I couldn't have learned that stuff.

  • I have any books, and so contributing has actually given me a a huge amount back.

  • Andi, I really would encourage anyone whether your brand used the industry.

  • You've been doing it for years to see how you can get involved, follow along and do speak up.

  • You might be the only person who's actually spotted that missing use case.

  • You know, you don't have to be doing CSS forever to realize that there's a glaring hole that no one's noticed.

  • So please do get involved and all of my demos and so honor that your mail and I'm around all day.

  • I'm always very, very happy to talk about layout.

  • Thank you very much.

Okay.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

你好,Subgrid!- 瑞秋-安德魯在CSSconf EU 2019 (Hello Subgrid! – Rachel Andrew at CSSconf EU 2019)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字