You Can Use CSS For That!

Rachel Andrew

Recorded at GOTO 2016


Get notified about Rachel Andrew

Sign up to a email when Rachel Andrew publishes a new video

[Music]
[Applause]
okay hello so the conference asked me to
come and talk about some of the
interesting stuff that's making its way
into the CSS specs and there's a whole
heap of really interesting things kind
of just landing in browsers at the
moment and coming really soon and so
this talk really is just a very quick
collection of things and various
examples of things that I think are
interesting some of which are actually
very usable now and others are kind of
just on the horizon one of the many hats
I wear is as an invited expert the CSS
working group however this slide has
some the other things I'm involved with
and while I'm really interested in all
of this new stuff my kind of day job is
as co-founder of a content management
system product and so I have to deal
with all of the old browsers like
everybody else there's certainly no
ivory towers here and so as we go along
I'll be explaining the status of browser
support for all of these things and ways
to kind of deal with old browsers so I'm
going to start with really my favorite
subject in CSS and really the reason why
I'm on the CSS working group at all and
that's layout and this is a module at
which if you've used flexbox at all you
will be familiar with although you might
not have heard of its name box alignment
level 3 because it appears that for a
very very long time
vertical centering has been the hardest
problem in web design and so this is
what box alignment and flex box as well
as solving so a lot of the reasons we're
using flexbox is basically to get that
vertical alignment I quite often end up
turning something into a Flex container
just so that I can align the things
inside it as this is how we do that in
Flex box we're using the align items and
justify content properties here to
Center the image vertically and
horizontally and those properties are
part of the flex box spec and if you do
this you'll end up with something like
can align things all around that layouts
here I've got effects container the
height of which is defined by the tall
image and we're aligning the other items
against it so we're using a line self
and we're aligning the individual items
on the
saxis so for flexbox we've got a line
self-center flex start and flex end so
flex box is really cool and so what
we've done is we've got those properties
that do alignment in Flex box and
they've been taken out and put into this
new specification called box alignment
and what box alignment lets us do is
then apply those properties to other
parts of layout which ultimately might
mean you could float an item and still
use those alignment properties with it
rather than having to turn it into a
Flex container so that's pretty cool so
we've got these properties of the part
of box alignment and we have alignment
and also things like space distribution
justify content aligned content there
and align items so while we haven't got
to a point where we can use this stuff
on block layout yet we can't use it when
we float something or position something
there is a specification where we've
started to use these properties already
and that CSS grid layout now I've got
practically a full-day workshop which
deals with CSS grid layout it's a brand
new specification I can talk about it
all day and do our not now but I'm going
to show you some kind of edited
highlights of that so sticking with
alignment this is how grid implements
the box alignment specification so I'm
actually creating the exact same layout
I had for flexbox this time with grid
I'm saying display grid rather than
display flex and then I'm setting up a
four column layout I'm using the repeat
syntax so I'm saying repeat four times a
1 fraction unit column that 1fr is an
interesting units to flex unit a
fraction unit that defines a fraction of
the available space in the grid
container so if we have for one of our
units they each have one equal part of
the space we split the space into four
and then here I'm using a line self
center-aligned self start rather than
flex start and a line self end to align
the items inside their grid areas which
gives us the same layout as the Flex
layout but this time we use in grid and
box alignment within grid and these URLs
here when you get the slides at the end
you can click through and they're all
code pens you can have a look and play
around with the code so what's the
difference with grid and flexbox grid
layout has been designed as a fifth
purpose layout method really for the
first time for the web and it's designed
to work alongside other layout methods
including flexbox and the difference is
really it's for two-dimensional layouts
and that's laying things out both as a
row and a column at the same time so to
use grid as in the previous example we
say display grid and then we define some
columns and optionally some rows so here
I'm defining three columns all of one
fraction unit and we've got the grid gap
property and that's good define a 10
pixel gutter between those tracks and
you can also use grid column gap and
grid row gaps to find those individually
and then if I have a set of items and
they're inside that parent which I've
said display grid on they're going to
lay themselves out on the grid that I've
defined one in each cell of the grid now
if you try and get this kind of display
using flexbox which many of you may have
tried to do already you say display flex
you let the items wrap and then we're
using a flex basis of one and of 200
pixels and saying grow and shrink from
that now because flexbox is one
dimensional you get this so although
it's wrapping on to the next line each
line each row in Flex box or column if
you're working by columns becomes its
own Flex container so that space
distribution is happening across the row
there we get unto the 2nd row we've only
got two cards and so they just split the
space between them and that's the
difference really between grid and
flexbox grid would keep those things
strictly in their column tracks the nice
thing with Flex box though is if we made
this screen wider and there was more
space we could get more of those images
would fit up next to each other that's a
pretty nice thing because we can have
multiple numbers of flexible columns
inside a container and we can actually
do this with grids as well although it
does involve a fairly baffling looking
syntax so here I'm creating my grid I'm
using the
autofill keyword in the repeat rather
than using a value rather than saying
repeat four times I'm saying Auto fail
so I'd like grid to fill as many column
tracks as will fit into my container and
then I'm using this min Max thing so I'm
saying make those column tracks a
minimum of 200 pixels but a maximum of
one fraction unit the effect of that
because the fraction unit shares our all
available space we get as many 200 pixel
column tracks as we'll fit then the
available space is distributed equally
amongst the columns which basically
gives us the ability to have a flexible
container with as many columns of
between 200 flat 200 pixels and then the
rest is sort of shared out with it which
is pretty neat it allows the strict sort
of rows and columns layout but as many
columns as fit so min max that min max
things been crazed for grid layout books
who need a way of doing that kind of
track sizing and it turns out it solves
all sorts of interesting problems here's
one so this is the tips plus website a
tutorial website and they've got one of
these kind of boxy layouts on the home
page which you kind of see all over the
place use for navigation the problem
with these things is that in the real
world a lot of content comes out of
content management systems and the
designers thought well I'll just have
two lines of content there but they've
got something really important to say
that it needs a whole paragraph from so
they put that in and it breaks the
layout in this case it's all overlapping
which isn't ideal and I wondered if I
could sort of do this kind of layout
with grid and solve that sort of problem
and it turns out that I can this is the
layout that I created I've got the three
break points which matched the example
that I was I was looking at and we've
got a sort of mobile width and a wider
width here and then a far wider one but
again we've got this thing where we've
got these fixed height blocks and that's
part of the design that even if it's a
little bit of texting you still want the
block to show enough of the image but
what we want is that tolerance for extra
content to get in there to at least not
break even if that's not the design that
I want
and so here's what we do so as you can
see on the right hand the top right
block about angry people at Balloon
Fiesta sirs got quite a bit more text
than we expected
and it's expanded down and what's
happened is the entire row is expanded
and so the two images next have also got
more space in there and they've been
able to expand as well so we're able to
have a minimum size for our track of 150
pixels tall and but then expand out if
more content gets in and that's done by
again using min max so here I'm saying
make my my tracks a minimum of 150
pixels tall and a maximum of auto and
auto will resolve to the content if it's
not got any other any other height
applied so it will make enough space for
whatever gets put into that box now it
might be that the designer would then
come along and say oh I take out some of
that bat market content because I want
those to look nice and neat but at least
it doesn't break and it all lines up at
the bottom of the of the image so that's
pretty cool you know have a look at the
example the code links in my slides and
there's a few little things in there
which are quite interesting about grid
layout that you might like to have a
look at so I'll stay with grid a little
bit longer and just talk a bit about the
auto placement algorithm because that's
also something else that's very cool
that's in a grid layout now you've
already seen when we declare grid and we
toast thing into a grid all of the child
elements lay themselves out on that grid
which is just like with flexbox if you
say display flex all the items inside
become a flex items so we can play
around with this ability and we can
start creating some rules for different
items so that they act differently when
grid comes across them so I was
remembering the glorious days when we
only had two hundred and sixteen colors
to play with and so I created a list of
those web-safe colors inside just an old
list with a class of colors and I'm
gonna lay those out as a grid so again
I'm using the ability to create as many
columns this time with a minimum of 80
pixels and we're going to create them
with a height
of 80 pixels as well as a minimum so I
get little square boxes and grid will
lay out the items like this which is
quite pretty but I can start playing
around with this I'm adding some classes
I've decided that the white and the
black squares on the grid have actually
to take up a full row so I'm saying
start those if you come across one with
the class of white start it on a grid
column line one so in the this here you
can see grid : line one that's the start
line and minus one is the end line on
the grid I'm in a left-to-right language
then line 1 is your left-hand line and
-1 is the far right it be swapped over
if you were working in a right to left
language and saying start that after
grid Row 3 grid row line 3 and then
we're doing the same with the black one
I've also got so much I've asked to span
column tracks so we're going to end up
with some larger blocks on my grid which
gives me this and we've got these kind
of big gaps in the grid and there's
these sort of black bit so basically
gaps in the grid as grid is laying these
things out because it's going to go
through the source and it lies out
things and it comes across one that's
too big to fit on the end of a row and
so we'll just drop down to the next row
and then I'll carry on until it finds
another one that's too big and then
it'll drop down so we end up with these
kind of gaps in the grid which is kind
of what you'd normally want you tend to
want your source order to stay in the
order that you put it in your document
unless we add the grid Auto flow
property with a value of dents and that
will mean that grid would backfill the
gaps as grid progresses forward laying
the items out it comes across one that
doesn't fit and so it drops onto the
next line but the next time it finds one
that will fit in that gap it'll pick it
up take it out of source order and put
it into the space so you get a nice
tightly packed display of boxes which is
great as long as you're displaying
something that doesn't have a logical
order it would not be so cool for your
forms and it kind of highlights an issue
that I like to drop in and just make
people aware of that with all of this
the grid layout particularly but with
flexbox too there is a very real ability
to mess up this sort of logical order of
your document and the in the spec for
both good and flexbox
it says there any reordering either with
auto placement or because you're just
setting the columns and and so on it's
only a visual thing it doesn't affect
the logical order of your document so in
terms of accessibility you need to make
sure the logical order of your documents
make sense even though we've got all
this amazing ability to start to move
things around I think it's a really a
discussion that we're only just starting
to have with grid because the grid isn't
actually live in any browsers yet this
is grid by example calm browsers which
awful lot of them if you go there you
can see the status currently in browsers
grid has been developed behind browser
flags if anyone has worked with flexbox
you may be aware that we kind of ended
up with three versions of flexbox in
browsers and this was a large nuisance
to all of us and this is because flexbox
was developed with prefixes vendor
prefixes and the spec changed after
browsers implemented and so we ended up
of messy versions of flexbox grid layout
has been developed for in fact the last
five years or so it's been developed
behind browser flags there was an early
Microsoft implementation the spec came
from Microsoft originally so in IE 10 11
and edge there was a kind of older
version of grid layout we've now got in
Firefox and in blink so in chrome and
opera we've got a really good and also
in Safari technical preview we've got a
really good implementation of grid it is
quite likely that come first quarter of
next year it's going to ship in those
browsers at which point about 70% of
people viewing the average website is
probably going to have a grid support
and it's kind of done if you enable
experimental web platform features flags
in chrome it's all there all my examples
work you can have a play around with it
so in Flex box and in the current
implementations of grid layout elements
need to be a direct child of the element
that you say display flex or display
grid on to become flex or grid items now
have a method sort of baked into the
spec to enable sub-grid support so you
could say that something was a sub grid
in which case it could use the grid
defined sort of further up the tree
which would be very nice enable us to
kind of create a grid and then the child
items and also the children of those
would be nice no one has yet implemented
it it's quite likely that that will get
pushed into level two of the spec
because no one's implementing it but
there is another value of display which
can kind of get round this problem it's
already been implemented in Firefox and
it's called display contents what
display contents does is it stops an
element generating any boxes so the
effects of that is it means that a child
that is a direct child element of
something which is set to display grid
or display flex and this is a box as it
would generate would disappear and so
it's children could then be treated as
grid or flex items which sounds very
very strange indeed and it's much easy
to see if you should play with an
example so here's the markup
I've got a div for the class of wrapper
it's got some direct children the h1 is
a direct child the paragraphs that
blockquote and so is the unordered list
with a class of images however the li
items inside are not a direct child so
they're not going to be affected by
display grid being applied to wrapper so
this is what I'm doing I'm creating this
two column grid and I'm setting those
direct children the h1 the paragraph to
span right across the grid and the block
quote has got a class of inset so it
goes in column column after column one
and the following paragraph goes after
column line two and this gives us this
sort of thing you can see the the two
columns above the quote and the text
next to it and then we've got those
images which are inside a list and so
they don't layout on the grid
what I'd like them to do is line up
underneath the other columns but because
they're not direct children they're not
going to do that unless I use display
contents so we've got that ul with a
class of images who say display contents
and the effect of that is that the UL is
no longer in the Dom for display
purposes it just sort of vanishes and we
end up being able to lay those items out
Auto placement will just place them on
the grid very very useful you can use
this already for flex items and it works
in Firefox and very nicely chrome have
said that they're going to implement it
as well so we're getting that into
browsers I would love to see proper sub
grid support land in browsers for grid
as well but this may well get us some of
the way a lot of the use cases that
people have I think a probably solved by
display contents certainly something to
watch in the future as that gets more
browser support so moving away from big
layout things let's talk a little bit
about CSS shapes because it's a really
nice little specification and it's
something that can work as an
enhancement pretty well the shapes spec
came from Adobe originally it was one of
their specifications and it defines
ability for us to flow text in a curved
line or a line other than a sort of
rectangular box so to use shapes you
have to float your item it can only be
the level one spec can only be applied
to floats so here I've got an image here
with a class of balloon which I have
floated left and given a width and then
I've used this shape outside property
which is what's defined in the spec I'm
saying circle a 50% which gives me this
which is pretty nice you don't need to
wrap things round an image you tend to
see all the examples how things wrapped
around images you don't need to do that
you could float you need to float some
things you could float some generated
content so here I'm just generating some
floating it left giving it a width for
the height and using shape outside again
which gives me this so you can kind of
have these curved lines without needing
to put an image in there as well as
shapes you can use clip paths there's a
different a different specification but
the nice thing about the clip path
properties it takes the same
values as shapes do so once you've works
out what your shape is you can also use
clip part to clip away anything around
say the image that you're curving your
text around so here I'm using my shape
and this time I'm using the ellipse
function you can also use a polygon
there to create really wacky shapes if
you want to and then I'm using web clip
clip path which you need at the moment
and clip path with the same values and
that gives us this and so that image is
essentially rectangular and we've just
clipped away the content around it you
sort of see this kind of thing I've seen
a tonight conference website so anywhere
where you've got like little avatars of
people and they're all square and you
float them and you wrap the text around
and then if you've got shapes you make
them circular and wrap the text around
in a curve which is a really nice
enhancement it's not going to matter if
people don't have the support for shapes
they're going to get the square image
it's going to be floated it'll be fine
if you've got the support then it's
going to curve round this is the current
browser support for the shape spec
pretty good Firefox have said they're
going to implement it so hopefully we'll
get it soon as well in Firefox and let's
say it's the sort of thing that you
could implement people will see if
they've got chrome now if they using
Safari and then when Firefox updates
those people will also see it it's
probably not going to break anything as
long as you're fairly careful you don't
end up with for instance if you're
clipping tech clippings content away for
an image and you've got stuff laid over
it there's a chance you could end up
suing unreadable so those the kind of
situations you need to be careful if
using shapes but CSS has come up with a
solution for this browser support issue
has anyone here used moderniser or know
what moderniser is yeah okay so CSS
feature queries is essentially
modernized that the ability to detect
support for a CSS feature but instead of
using javascript to do that
we can do that right inside our CSS and
we're using this apps support rule it's
a conditional group rule it's a bit like
media queries and in this case though
instead of testing how wide
of you Porter's we're testing whether
the user-agent declares that it supports
a CSS property and value pair which
means that we can write a style sheet
that checks for support of a new CSS
feature before using it which means you
can kind of do two things and you can
overwrite stuff you've done earlier for
older browsers after checking for
support
the thing with feature queries is
they've got fantastic browser support so
your modern browsers all support feature
queries which means that nothing new is
going to come into CSS from this day
forward that you can't use feature query
to check whether it's there or not which
is pretty cool so you can use this to
implement new CSS without causing a
problem for older browsers so this is
how you use it Here I am checking to see
if the browser has support for grid
layout so I'm saying at supports display
grid if we've got grid layout do stuff
for grid layout you can test multiple
things as well so here I'm checking for
display grid and also shape outside
circle the fact that we're using
property value pairs is really useful
because if you know that a browser has
got support for part of a spec but not
all of it which may happen for instance
a browser might ship sub-grid support in
grid layout you can just be looking for
you could look for display sub grid if
you're looking for that part of the spec
and you're not looking for the entire
spectro is actually with a
completed specification so if even if
you know if you just know that something
isn't implemented you can look for it
it's a really nice way to test for
support now when I showed you the chart
of possibility for this now see this
isn't supported in older versions of ie
but that doesn't really matter because
what we do is when we use feature
queries you write your CSS for the old
browsers or for the non supporting
and then you overwrite anything that you
don't need and then do your new stuff so
here with the balloon example from
earlier I'm going to give it a border
and some padding for my nan shape
supporting browsers I'd
test for support and then I do I get rid
of that border and the padding and then
I do my shape stuff inside the feature
query it's very much like when we do
media queries and we do something for
mobile devices and then we go to our
wider layout and maybe we take off some
of that stuff and do some other things
pretty much the same idea and if we've
got support we get our nice clipped
shape and if we don't support support we
have this we don't have any problems
it's a good way of making sure that your
new CSS doesn't potentially cause
problems for your older browsers and I
think there are really exciting things
start using and there's absolutely no
reason why you can't start using feature
queries now to test for support of newer
stuff and they're just brilliant for
creating these sort of websites that can
enhance themselves as their platform
improves underneath them which is what's
happening you know with evergreen
browsers you know every other week so
once browser's going to update and they
get some new stuff and feature queries
let you sort of respond to that and
build sites and applications that cope
with that reality so something with very
little support but which is pretty neat
is initial letter I think probably most
people doing front-end development of
design at some point tried to do it like
a proper drop caps effect and it's a
task that really isn't very easy despite
the fact that CSS is a very well
supported first letter of pseudo-class
it's quite difficult to get a really
nice drop caps effect or it was until we
got initial letter so this is defined in
the CSS inline layout model
specification it lets us create proper
initial letters in our documents so
here's how we use it I'm targeting here
the paragraph directly after an h1 and
I'm setting the initial letter of that
paragraph to bold and to be four lines
tall so that's the first value therefore
I'm saying four lines the second value
dictates whether the initial letter is
completely in line with the content or
kind of sticks at the top of the content
so I'm saying that it should be three
lines embedded into the content it's
four lines tall three lines embedded
which gives us this so you can see how
that W is falling
tall but one of the lines is kind of
stuck out the top of the content so you
can play around with that you could have
it completely inside if you wanted now
if there's not support for that then
we'll get this if nothing will happen
because that's how CSS works if a
browser doesn't support something it
just doesn't do anything so that's
pretty much fine as long as you don't
want to do anything else to the initial
letter which browsers do support because
this is currently Safari 9 and up only
it is currently being implemented in
Firefox so if you're just gonna make a
big letter and it doesn't isn't
supported that's fine but perhaps you
want to start playing around and doing
some additional styling here I'm doing
image and messing about with CSS shapes
now the initial letter property is going
to be ignored but all that other stuff
it's not going to be ignored because
most browsers support the pseudo class
and so we get this sort of thing going
on that's not ideal but we've already
got a solution
we've got feature queries so we can test
for that initial letter support and then
put the CSS for it inside a feature
query so we do this we check for support
of initial letter and if we have got
support we get this which probably isn't
a lot better but I'm not a designer
so that's but you can see that you can
test for the support and then do what
you want so feature queries if you take
one thing away feature queries they
really are your new best friend you can
start using these things staying with
content writing modes now when I joined
the CSS working group what I hadn't
realized is that actually most of the
discussions most of the time are about
the direction of things been written so
it turns out it's very complicated
whether things go from left to right or
right to left or top to bottom or
whether you have content which is mixed
some of it going from right to left and
very very complicated and many many
amazing discussions occur about writing
modes and there's this whole a
specification to deal with writing modes
but you don't just need to use these for
creating long text in
languages you can use them to play
around with text in which you know your
own language so obviously I'm using
English which is a left-to-right
language and I've got a heading here and
I've decided that I'd quite like to have
my heading tipped over on the side and
displayed down the side of the document
and I can do that with a combination of
grid and writing modes so doing a few
things here I've set my wrapper to
display grid I'm creating a two column
grid with a grid gap and then on my h1
I'm saying writing mode vertical RL I'm
also using transform to flip it over and
aligning the text and putting it after
grid column line one which gives me this
so that's kind of a neat trick but the
other place where this sort of thing is
quite useful out I will send an example
by someone who wanted to know how I
would do a layout with grid and it had a
bunch of buttons that were down the side
and the text just sort of flipped over
so the text was actually sort of down
the side of the button and you do that
with writing mode so you can create kind
of application UI with the text on its
side again using the writing mode spec
so that's a fairly neat spec pretty good
support better support than you would
imagine so a couple of things that you
might expect to find in a preprocessor
rather than as native CSS I think the
reason most of us started using
pre-processors or the reason we consider
it you know the first thing we think is
it'd be really nice to have variables in
my CSS I am fed up with searching and
replacing through all these CSS files to
find the colors or the fonts or whatever
it is and so you use a preprocessor like
sass or less so you can use variables so
we've started we've brought these into
the CSS specs now and the spec that
deals with variables is called custom
properties so custom properties it means
that authors can do that define
properties you can set them up and then
you can use them in your CSS files
here's a simple example so here I'm just
setting up some colors I've got a
primary color which
set to blue and secretary to orange and
then in my h1 instead of having the
color I say var and then I choose my
custom property that I would like to use
something that's pretty cool is you can
use feature queries to test for them so
you can test if you've got support for
those custom properties before you use
them which means that you could you
could have defaults and then overwrite
them with your custom properties if you
know that you have support which is
pretty neat and that's just a link to to
that example so you can have a look at
it later
getting there of an edge there's
something we need to chase for but yeah
again reasonable support it's getting
there we've got quite a bit of support
for this stuff and so the other thing
that we do in with pre-processors is we
add things up we do basic mathematics
and you might think well why bother but
most of us are probably using sass or
less at this point why bother doing this
stuff in CSS the key thing about the
calc function in CSS that lets us do
this basic mathematics is that you can
mix length units you can't do something
like any preprocessor you can't say take
20 pixels away from 50% but you don't
know at the time you run that
preprocessor you don't know what 50% of
what you know how big is it so you can't
do that whereas with calc in CSS you can
actually do that you can mix the units
so I've got a very quick example of that
got some boxes here and inside they've
just so we can play around with some
heights and see how this works so I've
defined a height for two of them the
first one is just going to take the
height of the content so it's whatever
content is in there and then this
targets all of those inner divs
everything inside box and what we're
saying for its height is that it should
and we get this so the minus 20 pixels
it's a deal with the fact that box is
absolutely positioned from the bottom
there so so if we said 50% it would be
tall of an actual 50% because we've not
taken into account that 20 pixels so by
removing the 20 pixels on the height we
get these half height boxes somewhere
else where calyx very useful is
positioning background images making
sure that they actually defined the
right way from the bottom you can use it
for that but anyway you need to mix
length units in your CSS calc is
incredibly handy and it's got really
good browser support you can pretty much
use this and so that's something that
you can be starting to use you know I
think if you've got stuff that's pretty
much absolutes and doing your
preprocessor but there are places where
it can be really handy to roll that out
actually into your live CSS so as well
as looking at stuff we're doing in pre
processes and sort of taking ideas from
that we're starting to see things in CSS
JavaScript you know for years and years
we've been doing certain things with
JavaScript that are now starting to go
into native specs which just means
they're going to be more performant if
it's a native CSS thing rather than
having to happen in JavaScript it's
gonna it's pretty much gonna work a lot
nicer so this is one of those things
this is a new value of the position
property sticky so sticky positioning is
when you've got something positioned in
your document and you start scrolling
and it Scrolls fine with the text just
as normal and then when it hits say the
top of the viewport it stays put and the
Texas grows underneath it common things
like navigation and so on and start in
the middle of your document get to the
top and that and then start scrolling so
it's a bit different to sort of having
something static which then starts in a
place and always stays there you've got
that nice effect of it moving first and
then staying so this is how we do that
I've got a list of elements I've with
definition terms followed by multiple
the definition and I want the terms to
stick as we scroll so what we need to do
for that say position sticky and then we
say top zero and that means that I
wanted to get stuck when it hits the top
of the viewport rather than part way you
could have a value there if you wanted
it to stick a bit further down and we
get this sort of thing happening so you
can see as they hit the top they stick
and the things scroll underneath them so
that's a fairly neat effect to say it's
something that we've been doing with
JavaScript for a long time anyway and as
you browser support it is coming into
chrome as you can see future versions of
and it's it's flagged in in other
Chrome's it's also a good candidate to
polyfill you can polyfill this we're
already doing this with JavaScript so
it's a pretty good candidate to you know
just use position sticky if it's there
and if not use some JavaScript to fake
it or you could just leave it out if a
browser doesn't support position sticky
it nothing is going to happen it just
going to scroll as normal which in you
know in that kind of case would be
absolutely fine and scroll snapping this
is a very interesting spec so this is
the sort of thing when you're scrolling
through an interface
left to right top to bottom you've got
something's more like an app perhaps
once you get past a certain point the
scroll of lights and kind of jumps to
the next pane so you get that nice
effect you're not kind of having to kind
of scroll it into view and then try and
get it lined up it's going to jump to
way it expect it to be and there's a new
CSS specification that deals with scroll
snapping it's that candidate
recommendation status but it has very
very recently changed so the code that
works currently in browsers is not the
final stuff that we'll be using for
scroll snapping which is pretty much the
way of brand new specifications until
things get too kind of recommendation
and they're kind of up for grabs things
might change and which is why things are
typically happening behind browser flags
these days so we can kind of mess around
with them and figure out the best way to
do things
so patchy browser support and I say the
stuff that is implemented is a slightly
older spec but this is pretty cool it's
kind of nice to see how this works so
this demo currently works in Firefox and
the changes to the spec lose the scroll
snap destination and come
buying the scroll snap points why
property into a scroll snap type but
it's it's roughly similar to what you
will see so you can have a play with the
example and you can see you're sort of
pulling it you drag that over and you
drag it over and until it gets past the
midpoint then it snaps into place
so it's quite a nice effect especially
if you're building something which wants
to behave more like a nap and we can go
the other way so you can scroll on the
y-axis again this is the old spec and
see then you just couldn't drag up and
down until you go over the would point
and it then jumps up so quite a nice
thing I think quite a nice example of
how stuff that we're trying to do we're
doing with JavaScript often and not a
great way on oppositely performant way
it's coming into the CSS specs so that
we can sort of try and use that in a
better way which really leads me on to
I've shown you a whole bunch of stuff
here that's pretty new and some of it
only works in one browser you know the
and scroll snapping still needs updating
method to deal with lack of support but
especially with our big layout methods
we need those and all the browsers for
us to be able to rely on them you're not
going to risk your entire layout on
something which only has support in one
browser and poly filling your whole
layout isn't likely to result in a very
good sort of end result for you or your
or your users but the thing is that we
as web developers can do an awful lot to
encourage adoption of these features by
browsers tell browser vendors that you
want this stuff raise bugs against stuff
that is not working as you vote to
things like the edge use of our site you
know if you want shapes in edge go and
tell them also if you can see a good use
case for these features and you can't
use them because they're not supported
in a certain browser write about it talk
about it you know make sure it gets out
there
so when browser vendors are looking you
know do web developers care about this
stuff if they could only find me writing
about grid then pin honking they're not
going to go and implement stuff so I
think that's the important thing is that
there is noise about this stuff and if
we all sit there and say well I can't
use it so I'm not even gonna look at it
we don't get them and so it really is
very very
important to make your thoughts known
with the browser vendors and just out
there on your blog of a medium or
whether you write stuff on Twitter and
so that they know that there is call for
it and that if they implement it
developers going to be like yay we've
got it and we can build more stuff
that's really important and also with my
CSS working group pattern if you see any
of this feature these features and think
that the see of this working group have
totally lost the plot then letters know
if you have a use case that isn't solved
by some new CSS specification let us
know we want to know about it or just
write about it and you know just tweet
about it cuz we're watching now when
when we have conversations on the weekly
call or the face-to-face is quite often
the question is asked what do web
developers what do authors actually
think about this feature do they want it
are they using it are they having
problems with it what do they think it
should be called a lot of the
discussions are about just like what
should we call this thing and we never
know and so you know out be on a call
googling to see if anybody has written
about this yet and some creator you know
creating lists of that stuff so if
you're out there writing about it and
writing about the use cases you've got
it definitely gets listened to and it
can literally can be three or four
people writing about something can mean
it gets implemented and you know gets
put into a specification because you
find that aren't that many people
writing about early stage CSS so you can
get your voice heard and particularly if
you're someone who like writes
JavaScript and things and you're
building stuff which is interesting and
could be solved natively we'd like to
know about that all of the CSS
specifications are now discussed on
github they were moved this year to get
her out of the horrendous mailing list
that I could never encourage anybody to
go and look at it really was like
something out of the 90s and it's now
all on github where every other
open-source project is so you can come
along you can search for different
specifications and you can see which
issues are raised which a lot of those
come up during the cause and we put them
on there you can even raise new issues
yourself you know if it's particularly
for spec is you know not a final spec
you know let us know if you think things
are called stupid things or whatever if
it's not doing something you need
because it may well get discussed and
brought up and you really are you know
sort of doing your future self a favor
by doing this stuff
because in a year in two years it's
going to be out there in browsers things
are happening very very quickly these
days and you can actually really
influence that and speaking for myself
you know I'm not affiliated to a browser
vendor I do all my say that's working
group stuff really as kind of like a
weird hobby but I really enjoy it I get
a lot from contributing to this stuff
and actually finding out the inner
workings of it all it's been really
interesting so it's kind of interesting
just to listen in if there's particular
specs you're interested in go follow
them on github and and please do do
offer your thoughts we'd really like to
hear them so all of my slides and code
and so on at that link thank you very
much for listening
[Applause]
Evon watch out it's very hot room then I
have one which is you mentioned that the
the CSS queries allows for checking for
I'm unsure what your recommendation
regarding grid layout actually is do you
suggest to just play with it now or use
it now to just be ready when things
started when it's a good time to start
using those very advanced things right I
mean so so grits interesting one because
it's all kind of there but we can't
unless you don't me to tell you users to
take off an experimental web platform
features flag and the thing with grid is
it's very likely that it's going to end
up in browsers early next year but that
can't be guarantees you know any browser
could decide that there was some
showstopper with performance or
something and not ship it until later in
the year I think it's certainly worth
starting to learn now because when it
does ship it's going to land pretty much
complete across those browsers so
there's a good chance and particularly
if you know you've got a use case for
that the implementation in Chrome
interestingly has been paid for by
Bloomberg they paid the open source
consultancy or Galia to develop it and
put it into blink so they obviously have
a use for it and very very keen to see
out there so it's certainly worth having
a look at is a big spec there's a lot to
it and if you can start to get a head
start and understanding grid it'll be
useful to you certainly in a year's time
it's not something what even once it is
in browsers it's not something I would
suggest poly filling what I would
components grid is brilliant for laying
out little components and like really
tweaking the alignment and getting a
nice display of stuff and when you work
on a kind of micro level it's easier to
fall back to a simpler display for
things that don't support and once we're
talking about 7080 percent of people
having grid which we could well have buy
through next year you know it makes more
sense to start you know use feature
queries detect the support of grid do a
nicer layout you know enhancing a planar
one I think generally using stuffs an
enhancement as much as possible rather
than try to do any nasty kind of poly
filling of this stuff is probably a
when I do feature testing in JavaScript
like in lazy load content whereas they
give her to an ad import in certain ad
supports it would get loaded every
single single time is there a thought in
the spec how how user agents have to
deal with that I'm not sure I don't
think so and that's yeah that's
something you could do I don't anything
in the spec that particularly would deal
with that yeah that's an interesting
interesting thought we should talk about
that okay any more questions
okay and thanks operator thank you