[Music]
hello Berlin it's such an incredible
privilege to be here and the 10th
anniversary of CSS convey you now I was
here in Berlin at CSS convent je s Conte
for the very first time in my life last
year and it was one of the most amazing
experiences of my life so I really want
to thank the organizers for bringing me
out again and organizing this
spectacular event now I know I
discovered from a colleague of mine Alex
lakatos somewhere in the audience that
the dev tools console can totally be
styled up with CSS case in point this
glorious CSS only talk title in the
console so my name is Wei Jing and I'm a
developer advocate with next MOU if
you've never heard of us well Alex built
this coffee app that some of you will be
using tomorrow to order coffee my
colleague Gavin will also be speaking at
JS conf we're really friendly people and
next Mon does communications api's and
Duke just come say hi if you've got a
minute
right I'm also an avid lover of emojis
and this these pretty much sum up what
Who I am as a person if you're curious
about any one of them you can ask me
about them later and lastly just to
prove a point
that Firefox supports the most CSS
properties in the console I mean it's
vertical writing in the console so I
don't know about you but I love it now
[Applause]
when I started building stuff on the web
I quickly realized that aligning stuff
horizontally was way more easy than
aligning stuff vertically and I started
thinking about why that was now
historically web technology started off
from text document beginnings and a lot
of the initial HTML tags and CSS
properties focused mainly on text
formatting for languages you know like
English and French that were laid out
predominantly from horizontally from top
to bottom so boxes on the web and the
web is made up of boxes right boxes on
the web behaved very similarly but that
was clearly insufficient for what most
designers and developers had in mind
when it came to doing layout on the web
so when I refer to modern CSS layouts
I'm talking about layouts that are built
with Flex box with grid with the box
alignment properties because
conceptually these are the properties
which were crafted especially for doing
layout on the web they were very
different from the prior techniques that
we had like say you know HTML tables for
layout or even floats because those were
more clever uses of properties whose
intended purpose was not for layout to
begin with but resourceful developers
like yourselves found plenty of
workarounds and hacks to work with
whatever features were available at the
time and today we have a much more
robust tool set for doing layouts on the
web so the first thing I want to cover
today is content-based sizing or what I
call letting the browser do more now the
concept of automatic sizing has always
existed
on the web I mean browsers have always
managed to figure out how much space
content should take up without any
intervention from us the content just
reflows without overlapping but what is
introduced in this relatively newer
CSS spec called CSS intrinsic and
extrinsic module level three is that it
introduces some keywords that allow us
to apply automatic widths on to our
elements on the page so now the sizing
properties of width and height
take in three additional keyword values
namely min content max content and
hopefully better support in the future
content so if we look at this first
block of content here I've sized them
with min content and I hope you can sort
of see I'll just pull this up a bit it's
size with min content and min content is
the small
sighs that a box can take which doesn't
lead to overflow so inline content if I
could point your direction here you'll
see that the inline content will break
into multiple lines now line breaking
has a lot more new ones than most people
give it credit for because depending on
the language that is being used
on-screen min content is going to end up
looking very differently and the lines
will break differently as well for a lot
of languages moans mostly the
latin-based scripts like English or
German line breaks will occur at word
boundaries where spaces or punctuation
are used to explicitly separate the
words one key thing to note is that the
browser will not break words so in this
instance the word content plus the . at
the end is treated as a single
unbreakable entity and that is that is
why the this particular box size the
width ends up being the this width of
the content plus the . but for languages
like Chinese or Japanese the line break
is per character usually but not always
because there's there are rules about
certain characters that they are not
allowed to start or end on a line and
East Asian languages also use something
known as a full width punctuation so
let's say I add a comma here so a full
width punctuation will take up the
amount of space as a standard square
hand character so now the min content
becomes 2 m/s instead of 1 now there are
also some Southeast Asian scripts like
thigh which do not have spaces between
words so if you look at the second set
of content that is sized with Max
content and let's talk about Max content
for a bit
max content is a boxer's ideal size in a
given axis when there's unlimited space
so usually what's going to happen is
that the content is going to take up as
much space as required to lay itself out
on one line without breaking so if you
look at the thigh sentence here you'll
notice that no spaces so if you don't
read I and I don't know if anybody beats
Chi in the audience you probably won't
know
we're where the words gonna break but
the longest word in that sentence is
Priok right here and that's what ends up
being the main content of this by
language block so now fit content if you
can see here unfortunately it's not
supported in the browser because if you
look at it the inspector is gonna tell
you oh hey sorry invalid property value
but the content does work in a grid
format in context and so that's what
we're going to be looking at with these
last three pieces of content now I've
got three languages and fit content is
not a fixed value like the previous two
keywords of mean content and Max content
it is a range where the minimum value is
min content while the maximum value is
either the max content value or the
value that you put inside this function
whichever is smaller so this makes more
sense if I show you what's going on now
I think it's better to look at the
second and third because they've exactly
the same content so if I shift this and
we run out of space it's gonna shrink
shrink shrink until it's the main
content width for both but if we expand
it it will grow until so the value that
I've used now here is 300 pixels so it's
going to be 300 I know it's really
really small take my word for it that's
300 same goes for the thigh the thigh
content as well but if I change the fit
content cap to something slightly larger
I'm gonna change it to 500 and then go
grow some more you'll notice that it
doesn't it doesn't reach 500 it actually
stops at the max content in this case
it's 462 in this case it's 320 something
so that's how these three content-based
sizing values work now the next thing I
want to talk about is flexbox
you know the layout model where no one
knows exactly the size of anything but
hopefully I can help shed some light on
this apparent mystery now when we we
want to learn about flexbox Firefox
really shines through because as of now
it's the own
a browser that has a flexbox inspector
so we can find it by going to the layout
panel and you can toggle it by clicking
on this toggle here you can also choose
to click on this I would call it a tag
maybe in the inspector and what happens
when we toggle it is that it will show
you the outline of each of your Flex
items and any free space available as
this kind of a texture thing and if we
look at the layout panel they also tell
you the Flex direction and the wrap
status but more importantly the Flex
Park inspector will tell you what it
does to flex items when they grow or
shrink and we'll cover this in more
detail in the next couple of examples
and one thing I want to remind everyone
is that the specification actually
recommends that we use key word values
on flex items because they cover the
most common use cases and they reset the
values within the three flex flex
properties appropriately so what's going
to happen is that these key words are
initial none auto and a positive integer
which gets resolved to the Flex grow
factor so initial is the default value
for Flex items if say I set a deal
display flex on the parent and then I
don't do anything to the children it
gets a value of display flex and we can
sort of figure out what the browser does
when it encounters such keywords by
going to the computer tab and then you
turn on browser styles because these are
styles that the browser sets we never
explicitly set them you can filter for
flex and what you'll find is that
they'll tell you oh flex grow factor
zero flex rank is one flex basis is auto
when the Flex values initial if I change
this to something else let's say flex
none right which makes your flex items
completely inflexible
and you go back to the computer tab will
tell you that oh now Fred flex go is
your flex shrink is now also zero and
auto and so on so this is pretty useful
if you want to figure out what the
browser's actually doing the exact
algorithm
the browser uses to calculate flex item
sizing is fairly complicated but it is
outlined in the specification if you're
interested now I think the sizing gets
confusing until we get a clearer
understanding of what's going on with
the Flex basis property specifically for
for example if I put a fixed value of a
hundred pixels as the Flex basis it's
not surprising that some people will
expect to see a box of a hundred pixels
because we're very used to being in
control of our sizing instructions but
flex basis is actually the starting
point from which the size of the box is
calculated the key word key to remember
here is the starting point because if
the Flex item is allowed to grow or
shrink odds are the final size will not
be a hundred pixels so let's take a look
at this next example it's a rather basic
example and if you just look at it on
face value it seems like the browser's
allocating space very arbitrarily maybe
based on content but so let's break down
exactly what's happening so a reminder
here is that remember the browser
doesn't break words right so here we've
got two Flex containers and both of them
have a display Flex set on the parent
container nothing on the children which
means they have a flex value of initial
that resolves to 0-1 and auto zero means
that it's not gonna grow beyond whatever
space is required so this space it won't
grow to fill up the space and won't grow
to fill up the space because the Flex
grow you don't know we do not allow the
Flex item to grow but it does have a
flex shrink value of one which means
that if there isn't enough space all the
items are gonna start shrinking at the
same rate so the moment I hit this with
both the second and third items are
going to start shrinking so by the time
I hit this this sort of a layout that we
saw just now you'll notice that the
second item in the in the set has
already shrunk but the one here has not
shrunk at all and that's what that's the
reason why even though there's exactly
the same content the sizing is different
now with a flex basis of auto what's
going to happen is
that this value resolves to content
which is an automatic size based on the
content within the Flex item and
typically this is equivalent to the max
content size so when there is no
explicit with set on a flex item and the
Flex basis is also set to auto the
browser is going to use the content size
as the starting point to calculate the
width of the Flex item but if you have
an explicit with set so I'm gonna do
that for this particular item I'm gonna
set a width of 200 the width becomes the
starting point for the for the
calculation of the Flex item and the
flexbox inspector will tell you this it
will tell you oh hey
base size 200 but if I have an explicit
Flex basis set 0 1 300 this time then
the Flex basis takes precedent trumps
everything and now you'll tell you that
oh the starting size now is 300 instead
so that's basically how it works now if
you look at this the first column
naturally cannot shrink anymore because
you know that's the main content of word
but if we shrink both items will start
to shrink together but eventually
because there's exactly the same amount
of content in both the second both
second items they end up being the same
main content at the end of the day and
the next the next bit I want to explain
is the difference between a Flex basis
of OTO and a Flex basis of 0 because the
B this results in the size of your Flex
items behaving rather differently so now
again I have two sets of 3 items but
this time they both they have the same
content they match in content both sets
of Flex items are allowed to grow and
shrink except that they get different
growth factors so for the first item the
grow factor is 1 the second item growth
factor is 2 third item growth factor is
0 same goes for the second set the
distinction is that Flex basis is auto
for the first set Flex basis is 0 for
the second set so what happens now
is that the available free space is for
the first set of items is calculated
from the total width of the container -
the width of the content in all three
items so this bit of space here and this
bit of space here is the available free
space so this is easier to look at
numbers in this instance so when I when
we select this it tells us that oh some
the Flex item has grown and it has grown
by say about 71.5%
pixels so there's some sub pixel
rounding error so it may not be exactly
exact but you know 0.1 pixels I think is
fine so this is the first this is the
amount of free space that the browser
gave the first item if you look at the
second item it's about 142 143 so it's
exactly double the amount of free space
given but if you look at the final size
it's about 300 to 400 so it's they are
not double of each other if you'd like
the effect of having a flex item that is
double oven and another you'll have to
set the Flex basis to zero which is
what's going to happen in this second
set here when you set the Flex basis to
zero content size is zero so the amount
of free space that the browser starts
allocating is actually the width of all
three the width of the total container -
whatever
main content width is for this
particular third item because that's the
amount that's as small as it's gonna get
the browser's not gonna not gonna break
words so free space is calculated here
and all of this space is up for grabs
so if you look at this it the
flexibility the Flex grow is 300 and
about 314 and for the second item it's
628 so this is exactly double of the
first item so if that's the effect
you're looking for you probably have to
look out for your Flex basis and that's
that's something that I wanted to
clarify another thing another useful
thing with these new modern layouts is
the ability to use box alignment
properties to align items
again we're gonna turn on the Flex
overlay so we can see what's going on
turn it um and the flexbox inspector
again allows us to visualize the space
and how it the free space is distributed
among the items so box alignment
properties were actually meant to be
used across layout models even though
for now they're only applicable for flex
and grid it's written in the spec that
eventually block formatting contexts can
also use them so look out for something
like this in the future hopefully now my
trick for remembering which properties
I'll apply to each axis is that I
personally I associate the word justify
with like text processing text editors
like Microsoft Word where they got those
four icons in the toolbar and that used
first to shift text around in a
horizontal axis so for a language like
say English or German when I see justify
I think oh that's the direction that
text flows and because they're only two
axes right so naturally the other word
which is a line goes along the vertical
axis that really helped me remember who
will help maybe it helps you remember I
don't know but when we're using flexbox
only four out of the six available
alignment properties are available
because justify items and justify self
do not apply
they are meant to justify a box within
its containing block along the main axis
but when you have a flex formatting
context this more than one item in the
main axis so it's a really work what we
can use though is justify content so
what justify content does is that it
allows us to adjust the Flex items along
the main axis so in this particular
instance is the horizontal axis and
there are two categories of values so
we've got things like Center and and
these start Center and end these are
positional keywords which adjust the
Flex children's absolute position within
the Flex container and then we we also
have the space set space around space
between and space evenly and these
disperse the extra space between the
Flex children now when it comes to the
cross axis or the vertical axis
the items are stretched to the full
height of a flex line the moment you
apply a display flex on the parent so
this is these are not the original
heights of my items if I want to see
what the original heights are I'm gonna
apply a turn this off gonna apply a
align items
property let's do end these are actually
the original heights of my elements
right and one interesting value that I
don't see used very often is baseline
because if you have something like what
I have here it's a variety of sizes
variety alignments a variety of font
sizes you see that the text is kind of
like mountainous and it's pretty hard to
read so if you have say text within flex
items that are related to each other and
you want your audience to say comprehend
something from the words you could
consider using baseline and it makes
everything a bit more readable I thought
this property this value was
particularly interesting and one more
thing is align content so what you can
do is say your Flex container is larger
than the size of your Flex lines I'm
just put an arbitrary value of say 90 V
H right so you're gonna get these
unsightly gaps and what the aligned
content property does is that it allows
us to pack the Flex lines so if I set a
value of say star it sort of packs all
your flex lines up to each other if
that's the effect that you want and then
you can sort of shift the entire block
along your Flex container as well so
these flex a lot these box alignment
properties are really handy when it
comes to aligning boxes along a vertical
axis which is something that was really
challenging in the past and now let's
cover some common use cases this is I
know this is probably an example that
everyone has shown but I want to show it
because I really like it and that is
Ottomans again they are your friend if
you had one item in your Flex container
instead of using the box alignment
properties you can just set a margin of
auto to Center it one line
your problems because unlike in the
current implementation of margins in a
block formating context using margin
auto well center the item vertically as
well and if you have an additional item
so let me replicate box in box and when
I highlight it you'll notice that it too
has an equal amount of margin around it
right so this is potentially an easy way
of sort of aligning your stuff like
centering your items now more common a
more practical use case I would say is
like a navigation bar where sometimes
you need in this end link all on its
lows lonesome on the right and rather
than struggling with you know floating
left floating white right whatever you
can just use a margin-left:auto to kick
it all the way to the right and call it
a day you can also make use of the
alignment properties to make sure
everything is centered vertically so
it's like a two line maybe three line
fix for a very common design use case
and then there's also this cut cut style
layouts because you know everyone likes
to design cars these days Rachel did a
very expensive demo earlier so my point
here is just that you can change the
Flex direction whenever necessary so for
example this car I've set the Flex
direction to column and if you like this
button to sort of kiss the bottom of the
container what you do is that you would
want to grow your main content and then
that works of course like Rachel said
it's probably better to just use sub
grid but if you can't use some green
then this is potentially a good solution
for another common design that we have
to build most of the time in our day
jobs and now I think I'm running out of
time so moving on to the next thing I
want to talk about this rather
fascinating thing that I discovered when
I was playing around with CSS modern CSS
layouts is that flexible sizing or what
I call responsive design powered up it's
we've covered some flexible sizing units
when we talk about flex and all these
sizing units are also available in grid
and
what green also introduced us is this
thing called fr unit which is a fraction
of free space it also introduces a
min/max function which is a range of
values so with this with Fr with min Max
with fit content and auto we now have a
set of values that allow us to have
variable rates of change previously what
we've done is we've always used relative
units like percentages or maybe the
newer viewport units but the limitation
is that they make all your elements
change size at the same rate so I'm
gonna show an example so this is a this
is something that size with percentages
so the width of my cat picture is 65
percent while the width of the content
is 35 percent it kind of only works well
within a very limited range so from here
to maybe here it's kind of okay but if
you go any smaller than like you know
the image is too small the words are
weird and then when you go big like no
the image is too big the words are too
small so this is kind of a limitation of
having the same rate of change for all
your items
so what flexible sizing I find extremely
interesting is so to explain it I'm
gonna do some isolated use cases so
first thing let's compare our units
versus auto now because rachel has
already covered how useful the grid
inspector is so I just want to reiterate
her point this morning is that if you're
going to be playing around with grid
whether you're just starting out or
you're already using it for production
you know Firefox probably is your best
bet because of the grid inspector and
again you can toggle it by clicking the
grid tag or you can go to the layout and
that's where you get to select because I
have tons of grids you get to select
multiple grids if if you're using
nestande grids or like multiple grids on
the same page this is pretty useful for
you to check so that's the inspector but
now we're actually going to talk about
how these variable sizing units behave
so green this is the legend green SFR
blue is auto and like I mentioned fr is
a fraction of left over space in a grid
container so whenever there is extra
space
anything sighs with Fr is gonna take all
the content first but it's also the
first to have space taken away when
there's not enough space Otto will take
up as much space as necessary without
breaking lines so it's kind of like max
content but not as rigid so both of
these values they actually do take up
free space when it is available now the
difference you can see the difference
when they're there they work together so
when there's fr fr takes up all the
available space and Otto just you know
stays in its own lane like max content
and that's fine when there's not enough
space however so now I'm referring to
this third set of content fr is gonna
shrink first it's gonna keep shrinking
until it hits its minimum size before
space starts taking getting taken away
from Otto so that's the difference in
the behavior at the end of the day they
all still shrink to a minimum size of
main content but the Otto will hold its
width while all the free space is
absorbed and taken away by fr sized
columns first that's the one thing to
keep in mind the second set of values
that I want to compare is actually fit
content and min content so again it's
orange versus gold so fit content and
min max actually behave very similarly
in that they are both a range of values
with a minimum and a maximum limit so
min max takes two arguments as you can
see here I've set it to a minimum size
of 200 a maximum size of 400 and we've
also covered what fit content does
earlier so I'm not gonna talk about that
so let's just do this resizing thing
again because isn't this what everybody
does now I'm just kidding so when
there's a lot of space fr just takes up
everything I think we've already
established that but when there isn't
enough space again fr is the first to
lose content now if we look at the first
example you'll notice that the moment fr
is done shrinking Auto and fit content
shrink at the same way so essentially
they behave very similarly it's the same
rate
but if you look at the second set where
this gold box is min content and then
it's Auto infant content so I'm going to
do this a bit slowly Auto will auto had
more space hadn't had free space
allocated to it so it's gonna give it up
first give up give up give up give up
when you hit they both they don't shrink
anymore
space starts getting taken away from min
Max because min max is arranged between
400 and 200 so it can move between those
those values it gets taken away but at
some point auto and fit content also
start shrinking specifically what this
point is I can't tell you but what I can
tell you is that all three of these
items are going to hit their minimum
size at the same time so the moment it
goes goes goes hit at the same time so
the the minimum size is 200 so just to
prove a point it is 200 and min content
so I found this really really
interesting and it's the same it's the
same case if you compare Auto and min
Max min max with fit it's the fact that
they behave similarly but there is a
variable weight of change now in a
growth this is in a shrink scenario in a
growth scenario when there's a lot of
space fit content is going to end up
getting capped at its maximum max
content size or whatever's inside fit
content for this particular example it's
max content size because do we like
boxers doesn't make up 200 pixels that's
fine
but if we look back at the second
example as we grow the moment we hit the
cap fit content stops because it's said
what Auto does is that it will hit its
max content width and then again it will
pause growing let min max finish going
to 400 before it starts taking all the
additional space so I think this is a
very interesting behavior that we've
never seen before this is something that
is relatively new
and I think there are a lot of
possibilities when it comes to more
editorial design because it allows us to
do designs that adapt better to a wider
range of viewport sizes so here I have
an example like maybe feature article
and this first bit is percentage sized
the bottom bit uses the newer like
variable sizing units or as I call them
they look fine at this width but the
moment you start to shrink and you hit
more extreme widths you can start to see
that this ends up having the same
problem as the cat example where you
know it doesn't work very well it image
to small content you squashed but if we
just have the ones that is sized with
the newest CSS properties here it's a
grid right okay and you can sort of see
the code it's not that straightforward
but what happens is that it functions a
lot better at the more extreme with
because of this variable sizing behavior
and also a grid makes it very easy to do
overlap so this having a title overlap
your image is a very trivial thing to do
if you're using grid and so I'm very
excited for all of this stuff that I
just mentioned to become more mainstream
and to have more you know designers and
developers start considering the
possibilities in their design so if
you're still on the fence in using any
of these newer CSS layout properties my
message to you is just do it thank you
very much
you
[Music]