Videos → DevTools, the CSS advocate in your browser

Introduction and Welcome0:00

Please welcome next speaker, Miss Chen Hui Jing, the developer advocate from Nexmo, Singapore!

CSS and DevTools: A Love Story0:25

สวัสดีค่ะ I'm very happy to be here at JavaScript Bangkok,

especially since I'm talking about CSS. But don't worry, I'm only going to be here for 25 minutes,

Understanding CSS with DevTools0:39

so please hear me out. And so CSS, right? I've loved CSS ever since I first picked up web development. I like JavaScript also. But I love CSS more, right? Sometimes, when you love something a lot, over time, the feeling might fade. But not so with me and CSS. In fact, I'm even more excited about CSS now than when I first started. And let me explain why, right? Because like every good relationship, both parties must evolve and grow. And CSS has evolved and grown a lot over the years since I first picked it up. I like to think that I also evolved and grown over the years, but that's another conversation.

Flexbox: Demystifying the Sizing1:30

My name is Hui Jing, and today we're going to talk about CSS and how DevTools can help us understand CSS better. Recently, I've been thinking more about how to show people who find CSS confusing, or maybe find CSS frustrating, or maybe you're just new to CSS and wonder "why this doesn't work?" I want to show these people how much easier

it is to do things now than before. A light bulb went off in my head last year when the Flexbox inspector was released in Firefox DevTools, because it showed me what the browser was doing to my items. I always use a grid inspector when I'm building things with grid to show me what the browser was doing to my grid items. But the Flexbox inspector really opened my eyes to the possibilities of what DevTools could be. It's like having a CSS advocate, but inside your browser. Because of the limited time I have, I picked a few specific CSS properties to talk about today.

Flexbox Deep Dive: flex-basis and Sizing Behaviors2:40

Let's start with Flexbox.

Flexbox can be confusing for most people, because the end size of your box is not entirely determined by you. The browser does things to your item. Flexbox is the first layout model that establishes a parent-child relationship, meaning when you put 𝚍𝚒𝚜𝚙𝚕𝚊𝚢: 𝚏𝚕𝚎𝚡 on an element, what happens is it establishes a formatting context for its direct children. The size of your children is determined by three factors: 𝚏𝚕𝚎𝚡-𝚐𝚛𝚘𝚠, 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔, and 𝚏𝚕𝚎𝚡-𝚋𝚊𝚜𝚒𝚜. This is a mental model that's a bit hard to understand, because it's not direct. Like last time when you say, my box, 300 pixels, and you look, oh yeah, okay, my box is 300 pixels. Now sometimes you put a size of like 250 pixels, come out your box not 250 pixels, like, very confusing. I think 𝚏𝚕𝚎𝚡-𝚋𝚊𝚜𝚒𝚜 is this property that a lot of developers misunderstand, because it's not the end size, it's the starting size. If you can't remember anything about Flexbox today, just remember that 𝚏𝚕𝚎𝚡-𝚋𝚊𝚜𝚒𝚜 is the starting point from which your browser calculates the size of your box. Which means, depending on the value of 𝚏𝚕𝚎𝚡-𝚐𝚛𝚘𝚠 or 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔, your end size may not be what you put as the 𝚏𝚕𝚎𝚡-𝚋𝚊𝚜𝚒𝚜.

Flexbox Inspector: Visualizing Flexbox Calculations4:19

This is much easier to understand if the browser tells you what it's doing. So let's look at this.

Let's look at this. This is a container with display flex.

The three items inside, they are the flex children. Their size with flex box. If I highlight this one, if there is no flex property on it,

but the browser applies the default styles. If there is no flex property, the browser will give it a flex grow of zero, flex shrink of one, and flex basis of auto. How do I know this? Because the browser will tell me. If you go computed, and then you click on browser styles, right? You can just search for flex. So it will tell you, okay lah, flex grow zero, flex shrink one, and flex basis auto. Grow means grow zero means,

if there's a lot of space, is not going to grow. We are talking about this particular item here, the last one, right? Got a lot of space, but zero, that's why it doesn't grow. But because the flex shrink is one, right? When there's not enough space, the box will shrink, okay? And the last value, which is flex basis is auto. So what does auto mean?

We can see this because there's the option now to have a flex overlay. If you turn it on, it will tell you what's going on.

Because I said flex basis is the starting size of a flex item, right? When I say auto, it actually resolves to content size. So you can see this number is like 296, fine.

That's how long this sentence is. So this is the starting size of this particular box,

right? When there's a lot of space, it doesn't grow.

The content changed because I got nothing better to do, then I go and make the font size variable. Never mind, let's make it fixed. Let's change it back to like 1.5em.

Yeah, okay, very nice. Okay, there.

It shouldn't change now. Yeah, so it's 328, doesn't change. But when there's not enough space, what's good about the inspector is now it starts to tell you, it tells you that, okay, because flex shrink is one, me, this is like pretend that this is the browser talking to you, right? So the browser is saying, okay, your original content size was this much, and then because your flex shrink is one, I, the browser, I shrunk your box. I shrunk your box by 62.42,

and so the end size into 266. I don't know about you lah, like before I saw these numbers, I don't understand, like, browser, why you do to my item? Why my item the size so weird? But now, then I see the numbers, I'm like, oh, that's why you did.

So this is the part where I think dev tools is very useful to help us visualize this concept, because flex is quite complicated, right? Like three values, and then depending on the number you put, everything different. But when you see it like that, I think it's very easy to understand.

Flex Basis Auto vs. Zero: Content Sizing and Free Space Distribution7:41

Now the interesting thing about flex is that there are few like flex basis makes your item behave quite differently. So auto is one way. When you use flex basis auto, what it means is that, like I said, it uses the content size as the starting point. If we go and look at the other two, this particular item, there is no grow. The other two, right? The grow value is different. This one is a flex grow of one, and this one is a flex grow of two. What flex box does is it distributes free space. And what does free space mean? Free space is the amount of space in the container

after your content is distributed. When you put flex basis auto, the content comes.

What do you mean? When I highlight this, the starting size is the content. And so if you look, the starting size is different, but the amount of growth is related to the flex grow. So you see here, this is 94, let's say 95 lah, round up, okay? For here is about 190, because the grow factor for the second one is two, grow factor for the first one is one. So it grew the free space is distributed two to one, free space. But the final size is not two to one. If you want the final size of your item to be two is to one, right? You cannot use auto.

Flex Basis and Width Interactions9:05

You must use zero. Let's look at this second example.

I, oh. In this second example, the… it's set to grow one,

but the basis is zero. All of them, the basis is zero. So what do you mean when the basis is zero? If you go to layout, a browser tool, content size zero, meaning the browser doesn't count the content size anymore. It just distributes the space according to the flex grow

and shrink factors. I'm trying to get 400, but this is very hard. Cannot. Okay, 400. Pretend it's 400, okay? If you look at this, if you want this type, you want one box to be twice of another, then you can use flex zero. Because now, the first box is 400, the second box is 800. Because when you set the basis to zero, it ignores the content size, and all the space is considered free space to distribute. So that's how flex basis kind of works.

The interesting thing about flex is that one more thing I want to highlight is that when there is no width and no flex basis, it's auto. So it takes content size. But let's say you put a width. If you put a width onto your element,

the width becomes the starting size. And you can see it if you go there, flex auto. Your starting size 200. Okay, I calculate 200. If you have a width, and then you have a flex basis, then flex basis win. So it will ignore the width, and it will use 300.

So this might be hard to understand without the flex inspector, but with the flex inspector, at least you can go and check like, what did the browser use to start with? And I think this is a pretty useful tool

that the browser now gives us that lets us understand this stuff, more complicated CSS properties.

CSS Grid: Exploring grid-template-areas11:12

So the next property I want to highlight is part of CSS grid. CSS grid very complicated. So I'm going to choose like this is one of my more favorite property. It's called 𝚐𝚛𝚒𝚍-𝚝𝚎𝚖𝚙𝚕𝚊𝚝𝚎-𝚊𝚛𝚎𝚊𝚜. So I'm not sure how many of you actually use grid already. Even if you never use grid before, never mind. The basics of grid not that hard to understand. But what we have here is again, you can also toggle the overlay. Let me take this out.

So if you go to layout, you can toggle like if you have multiple grids, you can toggle, and you can change the color whatever, but like purple quite nice. So other than that, you have options. You can either display line number or display area names. Most typically, you want to see the line numbers because like even this grid is not that big, 6×6 is already a bit annoying,

if I want to count, I'm like, oh, I want to put it here, then I'm like, oh, one, two, three, four. So if you have the line numbers, you can just straight away say, oh yeah, I want to put it here. But sometimes, especially if you have a much bigger grid and it's a full page layout, and you have a lot of elements on it, let's say you've got 20 elements, if you want to change the position of any elements,

or when you change a breakpoint, and you want to rearrange the whole page, if you want to go one by one and change the grid item position, it's like cannot lah. It's a waste of time. Then you got like work-life balance and then So yeah, if you do this all the time, then your work and your life no more balance. So this can actually save you time because you can assign specific areas specific names. So the code looks a bit complicated because the dev tool just squish everything together. But what you can do is it allows me, now I display the area names, I can assign specific sections with specific names. And then I can tell the child to go to the area and stay there. So for example, this elephant emoji is in the area called elephant. So the rest of them all have their own names, but if I ever want to change the position, I don't have to look at the children ever again. So now I only got three children. If I got 20 children, I can also ignore all the 20 children. And for example, if I want to change, I say, okay, elephant actually don't need four squares lah. Two squares can already. I can just change the code.

So a dot means like empty space like that.

So I can just change the code directly on the grid temp- on the container code. So let's say you have like five breakpoints because you know you're responsive. So you don't have to go and write media query for each of your individual 20 items. You can just do all your media queries on your grid container itself. So it also makes it easier to maintain. And the fun part about template areas is that if you don't like having many letters,

don't worry, you can also use emoji. So if you change this to like maybe you love elephant,

then use a heart, also can.

So it's a very easy way to label your grid areas

and it's a much easier way to manage, I feel, manage your grid items for a more big and complicated layout. So this grid template areas, if you never tried it before and you are using grid right, I suggest that you just try out lah. Maybe it might be good for you.

CSS Subgrid: Aligning Nested Grids14:44

Another property that I want to talk about that I think even less people have used, maybe you heard of it, is this thing called subgrid. So I think there are quite a lot of articles they always say oh yeah, grid is amazing, you know, grid came out 2017, changed the world. Okay, but that doesn't mean that it was perfect when it first came out. Because when it first came out,

what you couldn't do is that the grid only affects its direct children. If we have content inside the children, you cannot get the content to line up with each other because it's a one level only. So what grid introduced is it allows nested grids, meaning it's like your grid right, then your grid got children, then the children got children, your grid got grandchildren, then your grandchildren got children, your grid got great grandchildren, yeah, all these children right, they can line up with each other. So it's easier to see example again. So if you use again you can,

it's easier to see when you get to highlight right. So once you have a grid,

inside I have two grid items, so they are grid children. But they can also have their own grid which lines up with the parent, okay. Why is everything the same color? Hang on. We can change color because everything same color very hard to see. Orange, blue, blue green. Okay, fine.

So as you can see, if you look at just the markup right, there's this one is the big grid, like a grandfather grid. So each of the grid items they have their own children. So a b c d is grandchildren, 1 2 3 also grandchildren. So what you can do is that subgrid right, is not a display property, it's a sizing property. So for your nested grid, you still use 𝚍𝚒𝚜𝚙𝚕𝚊𝚢: 𝚐𝚛𝚒𝚍;. It's in the 𝚐𝚛𝚒𝚍-𝚝𝚎𝚖𝚙𝚕𝚊𝚝𝚎-𝚛𝚘𝚠𝚜 and 𝚐𝚛𝚒𝚍-𝚝𝚎𝚖𝚙𝚕𝚊𝚝𝚎-𝚌𝚘𝚕𝚞𝚖𝚗𝚜 then you use the keyword subgrid. So when you use the keyword subgrid, what you are doing is you are telling the browser that I want the grandchildren to also follow the parent grid. So in this example, I can let the items b and c align with item one and two,

even though they are separate grids, because they are part of a bigger grid. But you don't have to like follow everything. So you can only follow on either the columns or the rows or both. So if you look at just the shading right, you can see that they have their own row sizes. The row size for the blue grid and the red grid, they are different. It's only the column size that's the same because I have set the column size to subgrid. So that's pretty much how it works. And using the dev tools right, you can also see that the subgrids themselves have their own set of line numbers. So let's say I want to place item two.

I will not use four, I will use two because that's what its own set of line numbers is. So this is how dev tools can actually help us better visualize what's going on when we are doing layout, right?

CSS Shapes: Flowing Text Around Non-Rectangular Elements17:53

And the last property that I want to talk about today is called CSS Shapes. And CSS Shapes has been around for a while, but I guess I don't see it that often. Because like a few years ago, I used to work for advertising agency. And my designers will always give me, you know advertising agencies all like that type of print publication, like fashion magazines right, they always have this model and the model almost always ah will stand at it. And then the text will flow around the elbow. But when my designers say, eh can do like yeah, let's can we do this spread on the web and then I look at them like, no.

Because when everything on the web, you must understand, everything on the web is a box. Everything on the web is a rectangle. There's no such thing as shapes. But there is this property called CSS Shapes that let us do this kind of thing. So this is clearly a picture of a star, but I can let my text flow around the star. So the property that makes this work is called CSS Shapes. Oh my god, why am I doing this? Yeah, sorry.

So let's look at it and see how it works. So in order to make the text flow around the shape,

we actually use this property called 𝚜𝚑𝚊𝚙𝚎-𝚘𝚞𝚝𝚜𝚒𝚍𝚎. For now, 𝚜𝚑𝚊𝚙𝚎-𝚘𝚞𝚝𝚜𝚒𝚍𝚎 only works on floated elements. So cannot be helped, you have to float it. But what you can do is that you can use there are a number of shape basic shape functions inside CSS. So there's like 𝚌𝚒𝚛𝚌𝚕𝚎(), there's 𝚎𝚕𝚕𝚒𝚙𝚜𝚎(), and then there's also 𝚙𝚘𝚕𝚢𝚐𝚘𝚗(). So 𝚌𝚒𝚛𝚌𝚕𝚎() is just circle lah, so not very exciting. So I highlight 𝚙𝚘𝚕𝚢𝚐𝚘𝚗() because 𝚙𝚘𝚕𝚢𝚐𝚘𝚗() is just points, it's just coordinates.

So meaning, you can actually plot.

So this star is plotted. And you can change the value and you can see

how the text will move around. So why I want to highlight this is that there's a second property here called 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑. So the difference is 𝚜𝚑𝚊𝚙𝚎-𝚘𝚞𝚝𝚜𝚒𝚍𝚎 will affect the shape that your text flows. Now, if I wanted to change the shape, so if I don't have 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 right, like again huh, everything on the web is a rectangle. So without 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑, is just a rectangle. But if I want to make it a star, I have to clip away the areas that I don't want. So because they are using the same value, which is this 𝚙𝚘𝚕𝚢𝚐𝚘𝚗() function, let's say I make this star,

looks like I've created a very abstract version

of a star, what I can do is I can copy this same property. Because when you edit directly here, the dev tools will change the value for you, which is great, it's very helpful. Because what I can do is you can either copy and paste this and put in your code, or you can copy and paste, put inside 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑, and then your text will match it. So this is again, I find something that dev tools can help us

understand how these properties work. Because if I didn't see this, I'll be trying to change the 𝚜𝚑𝚊𝚙𝚎-𝚘𝚞𝚝𝚜𝚒𝚍𝚎 and then I'm like, how come the text move but my shape never move? Because wrong property. See? So this is how I feel that dev tools can be very useful, not just to help us debug, but also like teach us how CSS works.

So I think time quite good,

Demo: Building Layouts with Modern CSS21:16

so let's see this demo, let's how this demo works because

I work for this company called Nexmo. Nexmo does communications API. So I kinda have to talk about this a little bit.

This is recorded huh? Oh shit. Maybe I get fired. Then I looking for a job. Just kidding. Anyway, so if let's say you want to build a layout like this. I try to use like the properties that I talked about in the example. So if you want to build something like this.

I don't know how many of you actually played this game before. If you have a Nintendo Switch or 3DS, you know. If you don't know, then nevermind. It's actually very fun. You can go and Google. It's called Okami.

But a layout like this, for example, right?

Where you want to do this left right left right thing.

If I highlight the markup, right? In the past, how we do this is we have to either change the order of the markup, or then you do this like float left float right nonsense. But your markup, if you wanted the image and the text to flip alternately, you couldn't use the same markup. But with the property, for this one, I use flexbox. With flexbox, you can. You can keep the order of the markup. So if you look, it's header image text.

Even for the next one, it's still header image text. So this is what the newer properties allow us to do. It actually can help us maintain a more semantic markup. That's one of the things. Let's say okay, let's hope this works, man. If not, this is like fail. So, "Help, I'm hungry."

So this is our interface, right?

Let's go and look at agent.

Yeah. Usually, this is our chat interface. Your new messages always start at the bottom, right? So I think in the past, without flexbox lah, let's say. You probably needed to use JavaScript to do it, because you have to calculate the height of your window, and then you have to set your position accordingly. This one, this layout, right? Doesn't need any JavaScript. It's just flexbox. So if I respond like "Too bad, no more food."

Like the new messages can be pushed to the bottom using flexbox. So that's something that we couldn't do before, but we can do now. I need to plug this so that I can keep my job. So yeah, anyway, if you are interested in doing this kind of thing, or you want to like send SMS, can use this coupon code, and for like $20 of credit, I think. Yeah, oh my god, I'm terrible at my job. Anyway, moving on. So let's look at the other interface, right? So this is like a live chat, then it come out. But let's say you are on the agent side. You are building admin dashboard, right? When there's not enough content, but you still want like my input, I want it to be all the way at the bottom. Last time, how I would do it is I have to go and calculate, I have to fix the height of the header, and then fix the height of the input, and then use I calculate 100%, then minus the height, minus this. Now, you don't have to do this because that's actually very fragile. Like if suddenly one day I decide to change or like I have extra words, and my header become wider, right? Then cannot already. It won't stick to the bottom nicely. But again, using flexbox, right? I can do something like this quite easily, because what I do is I just make the chat area grow.

And these are things that we couldn't do before, but we can do now.

The Power of DevTools and Exploring New CSS Properties25:07

And like personally, right? I feel that there's a lot more that DevTools can do to help us understand CSS. There's newer CSS properties, like logical properties, or if you're doing something like this, like I like to do this mixed writing mode thing, it's very hard to visualize. DevTools can help us like figure it out. So my wish is actually for more people to just try out these new properties. Like you don't have to use all of them, but just know that there are a lot more possibilities in your toolbox now. And I really hope that DevTools can help you figure out things, just like it helped me figure out things. Thank you.

Thank you very much, Miss Chen.