[MUSIC PLAYING] UNA KRAVETS: So
we're here to talk to you about next
generation web styling. ADAM ARGYLE: And we've got-- psh-- oh wait, hold
on, wait, wait, wait. UNA KRAVETS: I was here to help. 12. ADAM ARGYLE: You know, 12. Well, I had the little raptor. Anyway. UNA KRAVETS: Oh, right. This is going well. ADAM ARGYLE: I'm a developer
advocate on Chrome, doing CSS. UNA KRAVETS: And I'm
a developer advocate for Material Design on the web. And you can follow
us online here, as well as follow
us into this journey into the future of web code. AUDIENCE: Woo! ADAM ARGYLE: So all of our
demos that you're going to see, they are live screen
captures, so there's no trickery happening. And we have links
to all the demos, which you can see right
there, a.nerdy.dev/css-at-cds. UNA KRAVETS: And
we're going to start with some of the most
well-supported features and then go into things
that are definitely coming in the future. ADAM ARGYLE: I'm going to start
us off with "Awww scroll-snap." UNA KRAVETS: Kick it off. ADAM ARGYLE: And notice that we
have a little bar chart there. Under there, tells you the
amount of support that we have. And we're going to start with
things that have great support and by the end
we're going to find things that have no support. So, aw scroll-snap. One of my favorite things here
is that the support is great. It's touch-enabled, 60 frames
per second, native scrolling for every platform. There's no synthetic scrolling
with scroll snap points. And it's all organic. It's not organic. Anyway, whatever, it's
mobile and desktop for free. And my pro tip
with aw scroll-snap is make sure that you try
to keep it horizontal, because when you
do it vertically it kind of feels like
scroll hijacking. So let's look at
a little diagram. We've got-- our viewport
is in the center. Each dot represents
a snap point item. And this is basically a
carousel where the items snap to the inline start. And let's see. Let's a demo because
we love animations. So we have a horizontal
snap point demo here. This feels like a carousel. We're looking at shirts by
Ten Hun, a rad Seattle artist. And we have a scroll x, so
we have overflow container on the section. We're snap starting,
we're throwing, and we're allowing skipping. So scroll snap
stop, you can tell it to stop at one
at a time, in case you don't want to
let them throw. And it always settles perfectly. So got to love that. And did you know-- well, I'm sure you did 'cause
I mentioned it earlier-- you can do it vertically. So here I'm doing vertically. Same CSS, I've pretty much
just flipped the x for a y. And I've told it to align
center because that just looks so good. Mm. I like it. UNA KRAVETS: Nice. ADAM ARGYLE: And
here's the kicker. Did you know you can
do both directions? AUDIENCE: [MURMURING] UNA KRAVETS: [LAUGHING] Ohh-- ADAM ARGYLE: Matrix. UNA KRAVETS: --snap. ADAM ARGYLE: And
basically you just say overflow, and scroll snap type
both, and align in the center. And I want to call out to that
overscroll-behavior contain. That's so if somebody hits
the end and they keep swiping, they won't-- the scroll event
won't leak outside and go into the next item. Kind of cool. UNA KRAVETS: All
right, so now we're going to talk about
focus-within, which solves a lot of
accessibility elements when you're focusing
within those elements. So if you wanted to
create a menu bar, oftentimes we see menu bars
with dropdowns or flyouts that occur within
those list items. So you could have a list that's
inside of your navigation. You could have some
markup like this, where you have list
item one, list item two. Inside that list item you
have this unordered list with more items. We see this pattern a lot. And if we want that submenu
here to appear, or be displayed, when you hover over
its parent element, we can apply some
CSS to style it. So it could look like this,
where on hover or on focus to that element-- because you
always want to have a focus style when you are
creating hover styles-- we want to make sure that
inside list becomes visible and it has a display. In theory, we could
then write code like this, where
we say visability visible, with opacity
one, display block. But as we're tabbing
through here, we're actually not able
to see the elements inside of that second
list item, which we've applied to that sublist within. And that's because
we're using focus. When you style with
focus, when you're tabbing into the parent
using that focus style, you will have those
children visibly appear. But when you tab to the
next tabbable element, they disappear because we're no
longer focusing on the parent. So you lose that style. Now if you use focus-within,
it solves those problems because you're actually
telling the browser to apply that style when
you're focusing within a parent element. So that could look like this. All we have to do is swap
focus to focus-within, and when we tab through these-- over here you see that
sub-navigation appear and we've solved that
accessibility problem. ADAM ARGYLE: Cool demo. I like it. These are all the cool
new media queries we have. And I've said prefers slash star
because we're-- we have a lot of preferences that we can
bring to the table now. We can consider our
users' preferences and adapt our UI/UX
to lean into those. I also think these are
kind of design surfaces. These are new design
opportunities, these contexts and use cases. The way that they work for all
of us web heads is the browser is our proxy for all this. The system and our platform
sets these settings. They trickle down
into our browser and come in the form
of a media query. Here's a quick overview of
some of the device preferences you might see on macOS,
Windows, iOS, and Android. These things get as cool
as adjust contrast and font size and theme. Personalization, right? I love it. Super cool. So here's our first one. This one's pretty popular. Look at the support,
it's pretty good. It's a hook to pacify
movement for folks that are sensitive to movement. And you have the
option of no preference or to reduce the motion. Support's killer and
have a fun demo that I want to show you real quick. So we have an animation
that's pretty wobbly. We have mixing of
colors happening. But if the user prefers
reduced, instead of removing the animation, I cross-fade. This is an important thing I
want to share with y'all, that reduced motion does
not mean no motion. Anyway, just I thought
that was a cool demo. I got really worked up there. DevTools has got your back in
case you wanted to test it. So just pop it open, go
to the rendering tab-- which you can get
there from the, like, snowman that's on the
left of console there-- and you can change the
properties and test your work. It's super cool. Another one that's
pretty popular, which you might have noticed
on the Chrome Dev Summit site, is prefers-color-scheme
light or dark. So you can adapt your UI
for your user's preference on their eyes. It's really hot right now. My mom is on dark mode. Hi, mom. You're in my talk now. And here it is. Again, we have a little
bit of code here. We have a little demo. CSS-- our CDS site is
a good example of this. And I have a hot tip,
which is to follow some of the HSL patterns that
we've seen with Una's demos. So we'll have a CodePen demo
in that link that we shared. And there you can just sort of
flip a couple custom properties and watch the whole
site pretty much invert. Super rad. And again, DevTools
has got your back. And in here you can
simulate both of those so that you don't have to go
into your operating system, and click a checkbox,
and go back to Chrome. And do it all right
inside of here. I'm showing that inside of
Chrome Canary, so make sure you're in Canary when
you're checking right now. So here's a bunch
of media queries, just a little fast pass for ones
that are coming down the pipe. And look at all these
design opportunities-- prefers-contrast,
prefers-reduced-motion, forced-colors, and
light-level dim. And now we can have users
that say something like this-- I prefer high-contrast,
dark mode motion when in dim lit environments. And we can do that with
CSS, we can handle that. It's kind of cool. Anyway. UNA KRAVETS: I love that
browsers are becoming so much more personalized to our needs. And us, as
developers, we can now create styles that
work with our brand but also work for all those
different preferences. It's super cool. So logical properties
are another thing that allows for really
speaking to your users, and creating dynamic
directional spacing within and around elements. This is really important to
maintain layout integrity across translations
and writing modes. Right now, in a
left-to-right-based and top-to-bottom-based
language, like English, we think like this. We think about height
and width, and we think of top and
bottom, left and right. So it's kind of like this
compass rose aesthetic here when we think about
layout on the web. But with logical properties,
that sort of changes. Height becomes--
height and width become block-size and inline-size. Left and right become the
inline-start and inline-end. And top and bottom become
block-start and block-end. You may be familiar with
some of these concepts if you've used logical
properties within CSS Grid. But instead of thinking
about layout like this-- top, right, bottom, left,
with height and width-- we think of it like this,
in this new mental model. And when we do this, we
actually get a lot back from the browser. With these logical properties,
when we use them to write code, the browser actually
creates adjustments for us based on the writing mode and
the direction of the language. So in a left-to-right
language like English, margin-inline-start would
refer to margin-left. In a right-to-left language
that would be margin-right. In some Japanese typography
that might be a margin-top, in a vertical-right-left
language. So we don't have to make all
these calculations ourself. The browser is actually
doing it for us. So for something
like a block-start, that would refer
to the block flow on the page instead of the
inline documents in the page. And for here, for both
left-to-right and right-to-left languages, the
margin-block-start refers to the margin-top. And for a vertical
right-to-left language, that would start
at the margin-right because the block flow
would go from right to left. Without logical properties,
as you change the direction and writing mode, the layout
integrity falls apart. Our boxes collapse. That border top
becomes misplaced. The text is overlapping. And it starts to look a
little bit like a mess. But with logical properties,
we can have the browser do that work for us. When we're using logical
properties in this layout, instead of using height
we've used block-size, and instead of using width,
we've used inline-size. And this allows for the boxes
to not collapse when we're creating a vertical layout. Instead of the
margin-left, we're using a margin-inline-start
here on those headers and paragraphs. So as we swap
directions, we still have the style of that
layout maintained. And finally, in this main
section here, for the border, we are using border-block-start
and margin-block-start instead of a border-top and margin-top. And that's what's making that
border retain its spacing. So you can write code like
this or you can write code like this. And it's the same amount of
code, same number of lines. It's just changing the mental
model of how you write it. And the browser does all
of that great work for you to make that website
more internationalized. ADAM ARGYLE: Logical
props, y'all. There was a little hack I found. It's not a hack, it's
just a good shortcut. If you do border-block
you can do borders on just the tops and bottoms. Can't really do that
shorthand any other way. So if you want a little sneaky
way to get started with-- UNA KRAVETS: Love it. ADAM ARGYLE: --lots
of props, start there. I made a tweet about it. I don't know if you saw it. Anyway, this is about
sticky situations. This is a CSS sticky, a really
fun property that I like. Here's a sweet diagram. And one of my favorite things
about sticky is you can see that as we scroll-- so there's
paper in a viewport there-- the item is in flow
with the document. But as soon as it reaches
the point in which I've told it to stick
with CSS sticky, it gets locked into
the viewport The page can keep scrolling
until it comes back to the position at which it was
in flow, and it becomes back. It is a member of the page. Here's a nice little demo. I call this one
The Sticky Stack. This is a classic sticky. There's nothing tricky
with this sticky. AUDIENCE: [LAUGHTER] UNA KRAVETS: [LAUGHTER] ADAM ARGYLE: Setting
the talk to zero. Anyway, the HTML
for this ends up being what's more interesting. So I just have position
sticky, top zero there. Let's check on the HTML. I chose to use the definition
list for this group list. And notice how the dt
elements are siblings. So definition of this
goes dl, dt, and then dd's are all the
different artists there. And this is why they share
the same sticky space. It's they actually
have the same parent. So let's look at an example
where they're cousins. We get The Sticky Slide. And the sticky is where
one appears to go out while the other one comes in. And the only difference--
this is the same CSS-- is that we have a
different parent. So our cousins-- that's
why we're cousins now. And this is my favorite example. This is Sticky Desperado. And that's because
the sticky element looks really desperate to
hang out with its friends. AUDIENCE: [LAUGHTER] ADAM ARGYLE: Right? I'm like, ugh,
just go away, bro. Anyway, the only difference
here is the HTML. I got a display
grid, went sideways, and it's still the sticky
slide, as we saw before. UNA KRAVETS: I love those demos. And they're all going to
be available at the link that we share, so you
can go there and use them for your navigations. I'm really excited to also
talk about backdrop-filter. This allows you to style
adjust behind an element, not just on an element, when
you want to apply filters to that element. Right now, you can
apply CSS filters. They're great. They're super dynamic. They allow for a non-destructive
layer transformation on top of any applied elements. And often we see
filters used on images, but you can also use
them on hover effects and transformations, and icons,
links, menu bars, and even video if you wanted to. A cool feature that I recently
discovered in DevTools is that all of these
values for the filters are actually pre-filled,
so you can see what they do and what input
arguments they take. So I thought that was awesome. Hat tip to DevTools. Now, when you're creating
a backdrop-filter, it allows for you to
apply those filter styles behind an element. So here we're applying the
backdrop-filter of blur on top of a text element. This aesthetic here
previously was not possible without a bunch of
weird CSS and JavaScript hacks to make this really work. But now you can do it
in one line of CSS. So here I have a video
where I'm applying this blur backdrop-filter
to that bottom left header. And you can see that you can
apply different properties to it. You can use this for a blur,
or lightness, or contrast, or any of those filter types. And so this can be
used to increase legibility of a piece of
text on top of an image. And so many more
things that we're just starting to discover because
we just got this in browsers. I'm so excited about it. ADAM ARGYLE: I do
love backdrop-filter. It's all over VisBug. Looks good. Is() selectors. So this is a modern, newer
spec version of what we've had for many years,
any() and matches(). In fact, it's 10 plus years old. It's super handy. I'm a big fan,
and I'm just going to show you a video because
it pretty much sells the whole value-- UNA KRAVETS: Bam. ADAM ARGYLE: --of it right here. UNA KRAVETS: [LAUGHTER] ADAM ARGYLE: It's a what? UNA KRAVETS: It's like bam. ADAM ARGYLE: Oh, a bam! UNA KRAVETS: Right away. ADAM ARGYLE: Ah, it is. I like you. UNA KRAVETS: It's so nice. ADAM ARGYLE: What
were you before? Oh my god! Anyway, I'm kidding. UNA KRAVETS: Pretty much code. ADAM ARGYLE: It was great. It was great still
before, right? Oh, and now we have gap. It's not just grid
gap, it's gap. It's coming to Flexbox. That means this is the
spacing between your children, your kid-- your children
don't have to-- "your kids." I'm a dad. Your children
don't have-- should I start calling nodes kids? That'd be funny. UNA KRAVETS: No, don't do that. ADAM ARGYLE: Yeah, I agree. I shouldn't do that. And so on the left, we
see what margin is doing. And margin is where each-- child-- owns its spacing. And on the right,
we see gap, where the container owns the spacing. And we've all felt
the pain of what it's like when children are
imagining their spacing. So I made this demo. This is in the awesome
Firefox Dev Tools. We have a grid on top,
a Flexbox on bottom. Both of them are just
using the same gap and the same
definition, and we see them competing for a better
layout strategy here. And one of the best things
about this is, is we see Flexbox gap being an
amazing, amazing feature for us. This is one spacing
declaration instead of whatever might have been many. So lobotomized owl, I don't
think we need you anymore. You were great,
though, until then. This is a good demo here, where
we have the spacing between. This matches the
diagram that we saw. Display flex,
flex-wrap, and gap. Hey, rap and gap rhyme. And we can end the
debate if our button-- when our buttons have
icon-left, icon-right, and all these different members
in the child button here. We can end the debate by
just putting a gap on it. UNA KRAVETS: There's
so many times I've hacked around
gap that I'm stoked to see that in browsers I'm
also super excited about CSS Houdini hitting browsers. Woo! Yeah, shoutout to Houdini. CSS Houdini is a
low-level API for CSS that gives developers
the ability to tell the browser how they
want it to read and understand custom CSS. This is what that looks like. It provides developers access
to the CSS Object Model in a much more consumable way. Previously, if you
wanted to style anything on a web page that
didn't currently exist by using
properties in CSS, you had to write a JavaScript
polyfill for it, which not only convoluted your logic
and your styling code, but it also was way slower. Because you'd have to wait for
the website to read your DOM, the CSS Object Model, and go
through the whole cascade-- layout, paint, composite-- step. And then you'd have to reapply
whatever JavaScript at whatever point updated your page,
to have that repaint, and to have it recomposite. And so we don't want that. With Houdini you can now tell
a browser from the CSS level how you want it
to draw your page. So it gets that
from the very start. And that means more
performance, powerful, and extensible
styling on the web. Houdini is the
intersection of work done to improve
browser performance, giving developers and
designers more power to translate their
visions onto the web, and to extend what's possible
in the set of CSS properties that we have today. It's really this
umbrella term that covers a few different APIs. And those APIs are the Layout
API, the Paint API, the Parser API, the Properties & Values
API, the Animation Worklet, the Typed Object Model,
and the Font Metrics API. If you want more info
about any of these, "Is Houdini Ready Yet?" is a
great resource created by Surma that shows you all of these
specs, their current place and time, and when
they're covering. Today we'll be covering the
Paint, Properties & Values API, the Typed Object Model,
and Animation because they are the most supported now. So let's start with
Properties & Values. These allow you to
extend custom properties, extend the capabilities
that we have today, when we are creating
custom properties or CSS variables on the web. Right now you can
write a custom property by giving a name and a value. But that value is string-based. With registered
custom properties, as Houdini custom
property, you can give that a syntax, initial value so
you have fallback values, and say if it inherits
from its parent or not. This allows for a lot
of really cool things, like error checking and
creating visuals that previously were not possible on the web. Without registered
custom properties, if you try to animate a
gradient, for example, it just doesn't work. Whether you're trying
to animate that gradient inside the gradient itself or
using this custom property here to try to do it, the browser
can't comprehend what you're trying to tell it to do. In this example I'm
trying to animate from a red to pink, to a blue
to pink gradient on hover, with a one second
smooth transition. But the browser has trouble
interpolating these values in this context. Now, if we register
a custom property and call it gradientStart,
we can set a syntax to that property so that the
browser knows what to expect. So here we're setting
a syntax of color. And there is the exact same
code that we saw before, but we are seeing that
smooth one second transition because we've now told the
browser that gradientStart is a color and to
look out for that. And it knows how to interpolate
now between those color values. Custom properties are
great for design systems. They're great for type
checking your CSS. In this example, we
have a custom property called colorPrimary
that we've given an initial value of deep pink. When we have some code
here, I don't necessarily have to say what
colorPrimary is. I don't have to specify
it in either the global or in the element level. It just knows to
read from deep pink because we've registered
it on the CSS interface. We can still override that value
very easily using the cascades. So here I'm overriding
colorPrimary as blue. But if we have something that's
invalid like a number here, this will fall
back to deep pink. Without a registered
custom property, the CSS would just
ignore that line and it would appear
like a blank box. We would just see
white background. So having this really allows
for type checking in CSS which I think is really cool. Also, I think this is
even more exciting. The future syntax for this
is all going to be in CSS. So just like you can write
custom properties in the root now, you can write all of
your property declarations in your CSS, and keep
them all in the same file, and it's going to be great. It's just this vision of
the future that I see. [SNIFFS] Tear. ADAM ARGYLE: CSS, CS-- aw man, logical properties. Sweet. All right, Typed OM? So this is where you need
to ask the DOM for a value. That's like, what's
the current CSS value? And right now you get a string. [SIGHS] And it's kind of hard if you
want to add something to it or remove something from it. And so what do we have upcoming? The Typed OM. We're going to get objects,
y'all, and it's super cool. So anyway, here's
a good example. I've pulled up the Chrome
Dev Summit website. I have a little GIF of
me typing the old way. So I'm going to stash
this selector for an H1. I'm going to ask
the window to get a computed style of this H1. And then after that I'll say
I need a computed property-- I want the font size--
and it says 34 pixels. And that's what design
tools have been dealing with for all these years. But what they're
going to get here is I can ask the H1
directly for a style map and to get the font size
back, and I get the value and the unit broken up. Super neat. [APPLAUSE] I think VisBug is really
going to love this. Any design tool is
really going to love-- and really, if you're doing
any JavaScript computation it's going to be really nice. So on the left, we have
what we used to do, which is string-based
regex parsing. And you'd have to
disassemble and reassemble. With Typed OM, you
ask, you math, you set. It's super rad. Here's the JavaScript of today. Just so in case you need to
copy, paste it, screenshot it. Right? We're asking the window
for a computed style of an H1 and its font
size, but tomorrow we can just ask the
H1 for a style map and a get call
for its font size. And you get more here, too. You get conversion, clamping,
error handling, and more. So you can't really
mess that one up as much as you could
the previous one. UNA KRAVETS: I love
this semantic CSS that's happening on the web. It's so exciting. The Paint API is also something
that's super exciting, because you can now create
your own paint functions using a canvas-like syntax. Before we get into
the Paint API, we should talk
briefly about worklets because the Paint API
is one such worklet. Worklets live in a separate
thread from your main thread, meaning they don't
take a page resources or slow down your site
to apply styling changes, like this paint
worklet would do. They're similar to Web
Workers like Service Workers. They're registered
to your page and they contain all the
instructions that live outside the main thread and
can be acted upon when called. So Houdini worklets work
in very much the same way. To get a Houdini worklet
into your codebase, you do the following. You first would write
and register your worklet definition in JavaScript. So here, because I'm
showcasing a paint worklet, I would say register
paint, give it a name, and then have all the paint
code being pulled inside there. Then we want to invoke
that worklet file by using Add Module on
the CSS interface inside of, say, the HTML here. So we have script, CSS dot
paintWorklet dot addModule, and the name that we gave it. And then finally we can use
that worklet by that name-- so I call it "fun" here--
we can say background paint, the type of worklet that
we're pulling in here, and then the name. So it could look like this. This is an example of a
pixel art, sort of rainbow, top-to-bottom
example that's just painting colors on an element. First I'm checking
for support by saying, if type of registerPaint
is not equal to undefined. Then I'm going to write out the
worklet, saying registerPaint, give it a name. And then inside of
that, I'm pulling in the context and size of
the elements for which I'm applying the worklet to. So I can set a size--
that height and width-- from that element, and then I
could fill the context there. Then, in the HTML,
we have the class box that we're going
to apply this to, and we're going to add that
worklet to the CSS interface. And finally, in CSS
all we have to do is write background-image,
paint, and then rainbowtize. That's the name that
I gave this worklet. But it doesn't only have
to be a background image. You can use these
worklets anywhere. So I can also use this
as a border image. That exact same worklet logic,
but instead of a background, I'm applying it as a border. And you get a very
different effect For a few other examples of what
you can do with the Paint API, I created this website, this
library, called Extra dot CSS. And what this showcases is just
the power of custom properties and paint worklets, and
what you can do with them. You could change all
these different values inside of your
code for sparkles, or if you wanted to
create a scalloped border inside of your code
with one line of code, changing different properties
like color and width. Why have one underline when
you can have many underlines? AUDIENCE: [LAUGHTER] UNA KRAVETS: So
here it's just, it showcases how much
power and fun you can have when you can
tell the browser how you want it to understand
the code that you're writing. Especially the styling code,
which we previously didn't have that much access to. And finally, let's end
with some confetti. The talk's not over
yet, just this part. AUDIENCE: [LAUGHTER] UNA KRAVETS: For a
more practical example, I played with recreating
angled corners on the web using Houdini. This currently isn't
possible on the web, but it is possible in other
platforms like Android and iOS. And so in the material spec
we have angled corners, but it's not something that
we can do in our platform. And I wanted our platform
to have nice things, too. So I had a few requirements. The first was that
I wanted to make sure I could set each corner
individually, just like you can with border-radius. And I wanted to make sure this
was a truly cut element, which meant that the ripple wouldn't
extend past the element itself. I wanted the frame to
end at those corners. So I used a mix of custom
properties and input arguments for this. Here is that worklet itself. So I'm registering the
paint, giving it a name-- angled-corners--
and then I'm pulling in these input properties,
these custom properties. I'm telling the
worklet to look out for values that I'm going to
then use inside the worklet itself. You can also pass
custom input arguments. So here I'm doing static
get inputArguments and I'm setting the syntax
for these inputArguments. In this case, the syntax
is a custom identifier. And so here I'm looking
for that custom identifier to be a string. Fields are outlined to
show two different modes of using this worklet. Then I can use the context,
the size, the properties, and arguments to build
out this worklet. And so what I'm doing here is
I'm building this canvas angled shape. And I'm getting the
properties, the size, and using that to
actually determine where I'm placing those points. And finally, here I'm calling
for the argument of outlined. I'm checking for that string. If it's an outlined
mode, then I'm going to use a stroke
to apply the style. If not, I'm going to fill it. So that's because for
these angled buttons I first set the corner
radius, and then I want to create a mask
on all the buttons to make sure that
nothing goes outside of the end of those buttons. So that's where
this webkit-mask, paint angled-corners, and
a filled mode comes from. There's other types of buttons
material and one of those is the outlined button. So here I'm using the
outlined argument. I'm setting a couple
of more properties here, the paint-color
and the stroke-weight, and I'm using the
exact same worklet to apply a border image that's
then painting this on top. So for the outlined button, I'm
using a mask and a border image with the same worklet. So all together it
looks like this. You can also use these as CDNs. So you could include this
as a CDN in your file, and then set your
custom properties and include that
line of code that says I want angled corners. And it's just a
really exciting time. But I know this is a
talk about future CSS. I still get this
question a lot-- "but what does it look like
an unsupported browsers?" Well, it looks like this. Here's what it
looks like an IE 11. This is emulated
on BrowserStack. You don't get the angled
corners but these buttons still function well and you
still have your UI there. I think this is a great example
of progressive enhancement. You can have great
UX across browsers, but you have to have pixel
perfect identical interfaces. I want to free you of that
construct, of that burden. I think that you can use
Houdini today in a way that is decorative, and
can enhance your UIs without making it a
core part of your UIs when you do have
things fall back. Check to make sure
they work but don't be afraid of using these
future thinking properties. And turn to you. ADAM ARGYLE: I love that
you used the same worklet across multiple use cases. It was a border image, it
was a mask, it was a border, it was a background. UNA KRAVETS: So useful. ADAM ARGYLE: So rad. Let's talk about the
Animation Worklet. This is off the main
thread animation. This is where your
first party animation-- you're not going to
be chasing something with a request animation frame. You are included at the core. This is so different. And what I've built
is a demo that kind of brings all of this stuff
together that we've been talking about today. So, really quick, just
like a paint worklet we create a class which
implements the Houdini animation interface, which
really just means it has a function called animation. Then we add the module
to the CSS Object Model. And since ours is
an animation, we don't really do much in
the CSS after that point. So let's see a demo just to show
kind of what I'm talking about. I built a tabs component, which
might not be that exciting, but notice our little
indicator on the bottom. It's always in sync
with the scroll zone. I can click to go to
my different tabs. I can use tab and space bar to
navigate with accessibility. And whether it's on a
responsive desktop or on mobile, I have touch. I have everything. And this is really
exciting to me. So how did I get there? What this is, this is, Houdini
plus a scroll timeline. And so we can pass a
new tick to Houdini. And what that means
is usually your tick is usually the
screen refresh rate, but now we can send it to scroll
position if something else. So since I created
a CSS grid layout that had scrolling snap points,
I create a keyframe effect. I create a scroll timeline that
points to that scrolling space, and I pass in some
options for initial state, like how many tabs there are
and what's the maximum scroll. And I give that to
the Animation Worklet and then we get a gorgeous 60
frames per second scrolling and in sync tab component. So here's what a keyframe
effect looks like. The keyframe effect
is kind of like if you make the at
keyframes animation but you only take one
little piece out of it. You can kind of make
many little pieces and then assemble them later. It's really cool. If you haven't heard
of a keyframe effect. The scroll timeline
is also cool. So this is new. This is where I'm creating
a scroll timeline, and notice with
scroll there's going to be other timelines
in the future. So what we're going
to be able to do is not just rely on
one type of tick. We can specify many and
create our animations that are like reactive
to different things. So this one is reactive to the
scroll source, which is called section, and I give it a width. I clamp the length there. And I created a
worklet called "tabs." The constructor takes in some
initial props and set state. I have the animate
function that's going to get called on tick. And it does the
math which is going to calculate the position. All together now, this
is my tab dot controller. So I'm going to create
a new animation that's spinning up my worklet. I'm going to name it-- well, I'm going to
reference it by name. My pass and my keyframe effect. I'm going to pass on
my scroll timeline. There's my initial state that
we were talking about earlier. And then I say animation dot
play, and nothing happens. Why? Because the tick is not
the screen refresh rate, it's my scroll position. You have to scroll
to make it go! And I think that's really cool. So we got everything in here. We have touch, we have
mouse, we have keyboard. Everything's ready to go. This is on a [INAUDIBLE]. Fork it and check it out. It's super rad. And this is something that
I got really inspired by. Once I made that demo, my
brain started going nuts about the reactive
animations I could create, and I saw this GIF
and I was like, I could do that with
Houdini and scroll timeline. We've got a vertical scroll snap
and a horizontal scroll snap. And all we're doing is reacting
to the position of those things and we're letting them snap. And we want people to be
able to touch and push those things any
way that they want. I'm starting to talk fast and
that's because it's time for-- UNA KRAVETS: Speed round. ADAM ARGYLE: Speed round. UNA KRAVETS: Kick it off, Adam. ADAM ARGYLE: OK, here we go. So we got size. This lets you set height
and width in one fell swoop. UNA KRAVETS: We've
got aspect-ratio, which allows for your media
to retain its dimensions. Meaning you can avoid those
awkward stretched or squished images, or when you're trying
to use a web page and the web he starts to move around because
the images are loading in. This prevents that. Aspect-ratio allows
for those images to actually have
their aspect ratio. ADAM ARGYLE: Yes! We've got min(),
max(), and clamp(), and this is the ability for us
to set constraints on any CSS property we want. We don't have to do min() width
and max() width and width. We can just specify a min()
and a max() and clamp it. UNA KRAVETS: Lists don't
have to be boring anymore. With the upgraded list style
capabilities in Chrome 79, you can have SVG,
an emoji, and if you wanted to play with smile
again, maybe animated SVG? I don't know, do your thing. ADAM ARGYLE: Animated
little arrows. "Read me, read me." UNA KRAVETS: [LAUGHS] That
would get so annoying. ADAM ARGYLE: All
right, we have display. It can take two parameters now. You can specify how it's fitting
in the outer scope of the block level, and how its
inner should work. UNA KRAVETS:
Regions in CSS allow us to fill a region,
an area, with content. So you might be familiar
with this concept if ever used InDesign to
layout books or brochures. Essentially you can
create areas of code that flow into and out
of different boxes, and your code doesn't have
to be just rectangular. This works really
great for grids, where you can define
your various regions and how that text flows into
and out of those regions. ADAM ARGYLE: Well said. UNA KRAVETS: Those places. ADAM ARGYLE: Nailed it. UNA KRAVETS: The whole UI. ADAM ARGYLE: CSS modules. So now we've got JavaScript
can ask for a module, whether it's from
remote or local, and it gets a rich object back. Super nice. UNA KRAVETS: We can't forget-- TOGETHER: --sub grid. ADAM ARGYLE: How did we almost
forget that in the list? UNA KRAVETS: I don't know. How could we forget
that in the list? ADAM ARGYLE: I don't know
how that one's not cool. Wait, that one's amazing. UNA KRAVETS: I know. This is coming in
Firefox 71, and this allows for you to create
micro layouts along with macros layouts that
you use with CSS Grid. ADAM ARGYLE: Stoked. Wow, we did-- UNA KRAVETS: That's a lot. ADAM ARGYLE: --20 to 30 there. That was 20 CSS-- UNA KRAVETS: That
was 20 [INAUDIBLE].. ADAM ARGYLE: --in 30-- anyway. UNA KRAVETS: We made it. ADAM ARGYLE: We made it. We appreciate y'all. UNA KRAVETS: So we can
all take a deep breath. You've made it with us. Thank you for joining
us in this journey. Check out that URL for all
the resources, for links to all of our demos. Also, if you're here,
come and talk to us. We'll be outside in the
sandboxes for VisBug and for Material Design. If you're watching this
online, feel free to tweet us. We love talking
about this stuff. I think that's all we
have for you today. We're definitely out of time. So thank you again. ADAM ARGYLE: Thank you. Nailed it. [APPLAUSE] [MUSIC PLAYING]
Cringe x 3000
can someone please please PLEASE make an somewhat okay TC:DW (too cringe didn't watch) article about this. 2 minutes into this video and i hate entire universe and everything inside it
Edit: u/darthnach is a solid lad: https://css-at-cds.netlify.com
Is this a clip from the new Silicon Valley season
Lol I didnt notice thr cringe since I have it muted with captions on.
I follow and support both of these people, but why are they acting like they run a kids YouTube channel and we’re the child audience?
Thanks I hate it
Is this already usable?