Supper Club × Bramus Van Damme on CSS

instead of the Yeah. So what what we see right now is that All the stuff that we are writing will, at a certain point, be used as input for then somebody later on to get, like, the exact and the correct answer A tutor problem that they have to So the way that we maintain our jobs is to just keep adding things rapidly to the browser.

Like, you enable it, and then all of a sudden, the, like, default I guess the default margins is not a bad idea, though, because there's a reason we have those default styles. Right? There's some something specific we were at railing on that. We were like, why is this like this? Boards are boxed. Boxed as a board of buttons. Yeah. Default? You know? Like, what if what if we had, like, a strict mode Where Box is in the store box? Just for that. Yeah.

To pull older versions of browsers and old browsers, But with the with the stacking cards 1, I am, like, tracking the wrapper element around it as that one is leaving, but I am animating the cars inside of it. So the cool thing is you can track 1 element on the page, because so much stuff has been coming. So, to CSS animations too. Oh, yeah. That that's the good part. Reminding a little bit back. To target the sibling, you do need one extra thing though because by default, the lookup only goes Up the ancestor tree. Okay. And to to make it work, you need to define the scroll the timeline dash root is the name of the value, Yeah.

has there ever been talk about, like, a strict mode in CSS

but I really wanted that because it was, like, one of the last holdouts that kept me, from not using a a CSS preprocessor.

Yeah.

JavaScript has strict mode.

to follow the logical and often also affiliate with a browser vendor, to be honest. Mhmm.

But I can write it And then, of course, dev Tools is much, much more than just CSS and new attributes.

without needing to compile it. Well, hopefully, like, maybe 2 years from now,

like, our our user questions, submitted questions. And the question was, Hey. If I gotta do box sizing border box on every project, why is this not the default? Well, it's not the default, so it'll break things. But,

that then led to the discussion about 1 amount,

form

Has that ever been been thought of? And I feel like there's a major, major opportunity right now to enjoy and like would like to tell other people about.

That's one of the features that I really wanted,

I want all these sort Shorthands to be,

the the fixed ones. Yeah. It's an interesting idea. I mean, you know, it is funny because it came up to us because somebody was on our potluck,

I always think of, like, oh, stuff will break. Of course, if it never were there, then Yeah. We won't be able to. We we actually talked about this on a a couple episodes ago is that

So I think by default, you want it to be, like,

and not sizing, box sizing, border box by default is listed as one of them.

Because now with with nesting, And this is now the same with these, like, Smooth app like transitions where where the header moves or, like, an image slides on the screen.

blocked

I do have some things that I want to be part of CSS, use case.

will often break. And people there have service like, what if you had something like ads document that says, hey. You know what? Keeping busy with it. My bug is now over 20 years old, so,

I really haven't thought about that.

where,

HTML has, like, quirks mode.

well, some size that will rely on it right now will generation stuff where you have, like, the some some kind

Like, why is there not like a

Of course, if I do wanna support, because I was I was It's only when you when you use it, Then it will like, if if you set the color to your dash dash color, then it will say like, okay, I will try and parse this as a color.

I still need to, like, pipe my CSS through post CSS or whatever.

But if you use logical properties, well, the margin shorthand is still top right bottom left.

because, like, one one example is the start and then in line start and then block end, in line end, and then it should Automatically change with the writing mode and whatnot. Yeah. But if we change it by default, and then in a transition, you set dash dash color to red,

We're we're winding a little bit back. There is if you go to the CSS working group, Well, when possible. So if you do a transform or an opacity change That will run on the compositor, not blocking your JavaScript in any way. You will get, like, 120 frames per second silky smooth Even if there's a bunch of JavaScript and nightly builds of of browsers.

Safari technology preview,

but I don't yeah. The the the problem is with with removing some stuff.

I don't recall the the entire list right now, but, like, there there is a a list of CSS mistakes

for a full archive of all of our shows.

dark, But if you want, you can, like, Specify keyword in there and say, no. No. I don't want nearest. I want either the root scroller or I want self to track myself.

kind of, winding down, I guess.

That's good. Let's get into our supper club questions. These are questions that we ask every guest who comes on the show.

Default macOS terminal.

We did. I still don't remember that.

Next question we have, what terminal and shell are you using? I'm on ZSH, forever in the web development community. Someone who's just starting today, do you have any advice for them? to talk about some stuff here on the podcast, and hopefully more people will get to know about it. Yeah. Awesome. Yeah. I I know you just got off of, like, big announcements at Google IO, and To see the response to all of the new stuff that was like obviously, it's not from Google, but like A big push of it was like, here is kind of where we're at in the browser, and it feels like it's just

And, of course, some of the concepts from that come backported into the web platform and whatnot. But,

Head on over to syntax.fm

Yeah.

What I really like about web.dev is that,

meetups.

It links up to an article on developer.chrome.com.

I think more than 12 years ago, we both attended well, it wasn't a meetup, but it was the same conference. And then later on, we became friends and we attend each other's weddings and baby showers and whatnot.

literally anything in your life that you

Please

No.

in 2024, are often very obnoxious, but I've seen it very, like, tastefully done.

like, you'll be able to say a lower bound? Yeah. That's correct. So a classic example is, for example, if you have a cart, you would say at scope cards dot card.

Let let's go for for a concept then.

with it. That's too late.

My jQuery knowledge, for example, I'm really a big fan of,

Anything fun there? I'm a Versus code user, and recently I Switched, Now what is it? I have it open right here. Let's try it.

But, yeah, it's been standardized, and it's implemented in all 3 rendering engines, and We're stuck 0.2

And, I'm still getting used to it because it's a little Bit more dark than it was before, and every time I open it, it's like, woah.

Oh, it keep keeps us in a job. We like a couple of things to be a bit confusing, so we're not the robots totally take our jobs. And, also, the robot models don't have all the latest stuff up to date. So and all these new c CSS features, they're not gonna know about. Yeah. Exactly. So if if we try out 1 1, like, any of the AIs right now and we ask them something about, all of the new stuff, I'm sure I totally butchered that, Van Damme on today.

They will pay off.

a TV show you really enjoyed. It could be a book you really enjoy. It could be a chocolate bar. It could be

Oh, this would be. We should do a fun show on this again.

of course, .dev, a CSS custom property to, with all the new stuff that's coming, like, there's a bunch of gray ideas, but in the end, everything needs to work well together. And I think that sometimes can be tricky, But now with this, almost shipping in Chrome stable, well, of course, we we have to wait for for other browser vendors to to to implement it as well. And then the good thing is, like, with this feature, for example, Firefox has has been landing some commits on that.

Oh, that's good.

On the personal website

Oh, I'm using the default Old ones. So it's, the Apple Magic Mouse, headed down a certain path that that we didn't reconsider

and developer.chrome.com.

That you pick that is sick. So it could be

We'd love to hear your answers. 1st question we have here is what computer mouse and keyboard are you using? Software out there now. It's it's pretty unreal that we have all of these features, so it takes a while to make sure that all works in and can be dynamic and you can scroll

Core team, it's called

Yeah. I know. It it does kinda feel like RSS readers

low stakes, lower stakes. I was still, you know, nerve nervous if you've never done it, but low stakes, you get Everybody's really supportive. I've had nothing but great experiences myself with them. So Yeah. And and the cool thing about being on stage is that in beginning, you're so scared of it,

my colleague Rachel Andrew, she every month, she writes a blog post what's new on the web platform, They don't want you to fail. No. They want you to

And before, I was a Google Reader user until they

chat based somewhere or something that is shielded off is that it can be indexed and a search engine can find it. And if I have a problem and I find a solution, I blog about it. And then 6 months later, I have a problem. I blog about it. I search it again. I find my own blog with the submission. It's like Woah. Yeah.

It also links to my Google IO talk, Covering it a bit. And, the cool thing is that on the page, if you go to a certain demo, there's like a certain, there's a info box in the bottom right That explains you everything like, hey. This is how this demo is built. And there's also a switcher icon where you can switch, several versions. So there's, like, several Approaches that you can animations.

And before it was, the regular dark one, and that's a little bit lighter. So some of my friends there, in a horizontal carousel where you want to track like, hey, there are 3 images in here and you have a little step indicator that says your image 1 of 3 or 2 or 3, A 2 out of 3, 3 out of 3, and its sizes, because, I saw a tweet by him. I was like, woah. This is cool. This is something new. And nobody had written about it, so I I prepared 2

Maybe I need to update. Oh, I don't have that one. Oh, it's actually nice. Yeah. The default Versus code is always a little bit too brown for me. Like, whenever dark mode goes brown, I'm not a fan. Just Yeah. I see. Nice. I like it. Dark mode does brown.

they can't come up with a proper answer for us because they haven't been trained by it. So, each other.

That's your niche.

but go for the foundations underneath. Like, my CSS knowledge from 20 years ago, My HTML knowledge from 20 years ago still is relevant today. I learned about closures in JavaScript.

people are gonna start blogging again,

Animation iteration count should have just been animation count. Oh, yeah. Fair enough? Okay. That's always a thing with the naming conventions is everybody has opinions on the naming

where you can define add, To replace or, like a 3rd term, 8 6 specs. So if you Google for CSS, is a repository and link an animation to that. A second thing that you can do is track a certain subject within a scroll,

Alright. Last thing we have here is a sick pick. Did you come prepared with a sick pick for us?

Good. Me for blogging about that because I know the exact same problem.

Let's say do you have any advice for people who are, like, new to this? Because you've been around

we're, like,

It is by now, and the Apple, And, the spec is authored by the same author as, the person who did, And it's not Chrome only, so she, like, gathers all the info. Like, this browser version got released, and it included this and this and this update. The other browser version got released, and I I think that's a really good, good resource to follow. Awesome. What what do you have a, RSS reader that you use that you like? and I've added some a bunch of plug ins on there, to make my life easier, like, show, like, hey. You're on this branch and whatnot. You're using this node version Within this project, But you can also benefit from these extra events, and they they all work together.

And then to customize my Zet shell, I've used the antigen as the the thing that allows me to install a bunch of plug ins into it. Yeah. Yeah. It's a cool one. What about okay. So it's obvious how how you stay up to date with CSS changing some some CSS class, for example, and then getting the computed Style and then seeing, okay, is this value actually Mac, web.dev, and we hope to Ship it in chrome one fifteen stable. There's still a few details that that need to be solved, but, on your page or use the the web animations API.

Yeah. Go go for the foundations. Learn the foundations. They will last forever.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

the the basic stuff, I guess. That's good. And just on the default macOS terminal or Iterm?

I get to meet a lot of people there. I have met, Well, it definitely has been brought up within the CSS working group a few times,

Of course, with with COVID, we had to, like, tone it down a little bit. But now meetups, I think they are really amazing, And then a solution can come from from, anybody because the CSS working group, we we work in the open. So it's all on GitHub. If you go to github.uh.com/ invalid at the computed value time. Because then it says, like, hey. I can't put a 50 p x in the background color. This doesn't work.

Everything else going on in the web. I'm subscribed to a bunch of RSS feeds.

So a sick pick is something

the name of a certain thing.

stuff, but how do you stay up to date with Yeah. And likewise, with the speed run, we still didn't Hit all of them. No. Like you mentioned, it's like we made a list, and we were really bumping up against the time the entire time. So so you're part of CSS working group. Right? Yeah. That's correct. I also participated in the working group. Well, can you tell us, like, what is the the CSS working group? And then we'll get into a couple more questions about that. Yeah. Sure. So the the CSS working group is the standards body,

learn one of the fancy new frameworks.

like, a thing that people talk about again

Also back then, that still is relevant today.

And right now, it's it's still being back so it's okay. We could change it. And then Robert Fleck, one of the engineers, had, like, the idea, And by default, it will be a fade in and fade out. So it will fade out the old content and fade in the new content.

And, yes, RSS is still a thing, and I really would Urge everybody to use it because that you that way you can control

So these meetups, they are really great to to connect to people, to simultaneously.

See, they want to learn something from you, share my my findings with somebody.

Like, for example, the with with Scroll driven animations again, we we considered like, hey. Do we need to view dash timeline route and scroll dash timeline route?

in, like, a a bigger way. You never hear people like, I never hear people talking about RSS readers anymore, and, it feels like there are is probably is probably some work to be done there to prevent that even further. I feel like we're gonna have a bit of a revival

Do you have a shameless plug for us? Like, what would you like to plug to our audience? So, one thing I've I've already plugged it in this show is scroll dash driven dash animations dot style. It's a website packed with a bunch of demos and a bunch of tools to get you acquainted with a scroll view of animations.

need to be,

But if you wanna last in the long term, don't learn any of these new fancy frameworks, Scroll. Scroll end event and and whatnot. So that's really handy if you wanna, like, indeed have some some JavaScript events.

some, like,

Oh, I'm seeing a I'm seeing a new one called dark plus v two experimental.

This still works super well. You know? Like, I feel like we'll have a bit of that. And, like, Now the domain name on Blue Sky is becoming popular, you know, like you are your domain name. So hopefully we start to see a little bit more of that and maybe RSS or something like it. And the best part about blogging and not putting it on some Promise.

later.

Get to know what they are busy with, One thing that that we and then Scope it. All my styles do like so the rule that you type is at scope and then between parents, I I'm also not sure if the spec on that is finalized.

want to do this because, Wes and I were both really, really, yeah, yeah, impressed. Cool. Well, thank you so much for coming on, and, we will catch See you later. Thanks a bunch for having me. Always an honor to be here. You're welcome. Thanks again. Peace. Thank you. Peace.

Staging They say like, hey. We we need to solve this.

and

from, like, their old dark team to their new dark team. They have, like, a new dark team, apparently.

Y'all

like, why do we need to differentiate? Why don't we just have timeline dashboard? It was like, Oh, wow. Good thing that you call it now, but we were so when you read the news instead of, like, Twitter is a fire hose of info. Oh, that's it. Yeah. You can say, like, now I wanna Get updated and subscribe to a bunch of blogs, some some people, some of the bigger publications, from from write some good stuff.

because, like, I I Fine. There's a couple people, and their blogs just come up nonstop. And I'm like Nonstop.

After the whole thing has been standardized and shipped, and it's just like, well, if you care that much, you should probably take part in the The spec process

like CSS Tricks back in the day, but, Yeah. They're they're because it's it may be too much to follow. So, stays real simple. It's just IMG, the regular image tag that you're targeting, But scoped within its upper and lower boundary.

go to meetups. I'm a big fan of them. Nice. Yeah. My favorite 1st time public speaking was at a a meetup,

Where are they largely finding

But the the cool thing about is that it's it's all in the interest of pushing the web forwards. It's not per se to push a certain browser forwards Because in the end, it gets standardized, and every browser every browser vendor can implement it.

Mhmm. So when when something like, Flexbox or Grid came up and people said, like, We need, like, a better layout engine in the browser. That's sort of where that stuff gets cooked up.

the the use case for these problems in terms of are are people just submitting to the repo and that's how These problems are surfaced, or is it all listening to the the larger web community? And, like, if it is listening to the larger web community, like, how how do they even Begin to look into what people are actually complaining about because it seems like people be complaining about just about everything. Right? I I see people tag, has and scope and oh, man. This the specificity

which is, like, hey. We think we have a solution for this.

And also sometimes it's it's people, within the CSS working group who are, like, Heavily involved within these packs, And the cool thing is, with scope styling, you can set this upper boundary, which can also set a lower boundary. So you can say, like, hey. Between this node and then this child Somewhere in the DOM,

We we we have prototyped with it or we intend to make a prototype. We need some feedback from you all to to, like, sync it up and then make it into a proper specification.

Una, you, and Adam daily on Twitter. And, like, can we solve this in

So, yeah, that's that's pretty sweet, I think. Yeah. That is really cool. So when the working group is looking at problems within CSS, things that, like you said, everybody hits,

This

And I sent him a DM a couple of months ago and was like, I feel like half of our shows

Yeah. It's a very exciting time to be to be a front end developer, especially a CSS developer

Do you wanna give us a a quick rundown, for those who don't know Who you are, what you do, where you're from. Alright. So my name is Bramis.

Hoo. I'm starving.

Welcome to Syntax. We've got a CSS

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

I could I'm sure I,

is the Syntax supper club.

of the new features that recently landed.

Only 20. Yeah. We we had to choose. Oh, that that's great.

lately, number 2, I guess.

she we recently published a a blog post on, like, hey. Here's some of the things, that landed in Chrome recently, just anybody, class

your stuff just comes up all the time. So thanks so much for coming on. Welcome. Awesome. I'm very happy to be here because, somewhere where We went through this, like, probably 4 years ago on the podcast. I told You and I did?

thing after thing after thing that is being Launched and solidified and not in all the browsers yet, but man, it's a good time to be a CSS

build episode to you for you today. We have

Yeah. And it's it's a bit hard to keep up as well, to be honest, CSSWGdashdraft

developer. There's really a lot

so buckle up and grab that old handle because this ride is going to get wild.

I sure hope you're hungry.

add an aspect ratio in CSS to an element that is in a Grit, but check auto sizes and then

simply, I guess. And the problem there is that you might create a loop in the end. So you have to have some, like, separators in there often say, like, For example, now that you mentioned container queries there, So that that's one use case where you just simply track The progress of a scroll from 0 to 100% Mhmm. There's also comparison, Well, we now see again that the web is catching up, and wireless magic Keyboard, the one with the with the touch ID, built into it. What about text editor theme and font?

like, whenever somebody from from Firefox implement something and they have stumbled upon a bug, a case that they didn't handle, for example,

There's an image inside of it like, oh, man. It's edge case city all down. And sometimes I think when people say, like, oh, why can't Chrome do x, y, or z? Like, container queries was was one of them. Because

I think it started back when I was was a kid. Like, I always play with my LEGOs, but I did the instructions once. And then I tore it down, and I built my own kind of stuff. And then I wanted to show that to to my brother. Like, hey. This is how I built it. Yeah.

posts,

what does it mean? And then you see the example in a test, and you're like, oh, yeah. Of course. Oh, yeah, man. I can't imagine the edge cases the folks have who write those tests have to figure out, like, is more powerful than

there's so many edge cases and, like, circular what do what do you call that? Where, like, a change triggers a change, which triggers a change? that that you need to to get around with CSS. Yeah. Wow. That's my my my mind is blown by this scroll stuff. I had no idea that this was

which I'm like, woah. I can I can make my own websites? Like, this this is cool.

A bunch of dependencies, Then the rendering engine needs to interpolate that.

how did you get so good at it?

Like, when something is brand brand new and there's, like, not even

And then in in 1997, it was I discovered ViewSource, CSS. Yeah.

we we need to specify it as an all for ourselves. We need to enable size containment, for example, to to prevent those kind of loops. So you you do a lot of really excellent

And they're always so well like, What's your history with blogging, this type of technical blogging? And

I will go into those expected files, and that's almost always like the 1st ever Like, I Adam mentioned scroll events, and I was like, that's cool for JavaScript, but I didn't realize you could also use it in CSS. Like So the the the scroll events, So that Adam has been working on is like a the the scroll end function.

The promise blog pops up on on Google's blog.

if you're writing it in Japanese

in general. You know? It it it seems like a lot of times when we're googling something, Like, just the other day, trigonometric functions in CSS. I wanted to see some good examples.

of what that layout does or how does it actually test that the output But is what you're expecting? There there is a bunch of various tests. Like, often it's it's,

tests. So you have, an HTML file that does a does a bunch of things. And then there's also a dash expected HTML file, which has, like, the pre rendered Fixed values in there, and then it does a basic comparison. Yeah. I usually dig into those expected.

piece of code written against that feature that you can reference and see how it works. So it's Kind of cool to dig into it. Yeah. And often, there's some clues in there, then you go like, oh, so this is how it should behave. Because to be honest, not Always a spec task. The the text in the spec is, like, that clear.

160 pixels, for example.

That's what it is. It does it just like screenshot the output

And for that, we have something called WPT. It's called the web platform test. It's like a bunch of tests that run every day against all the recent canary and work on, MPA, So that's the the 2 use cases that you can do for a tracker scroller itself and track an element within a scroller. And how much of this can be done in straight CSS without JavaScript?

Characters, but there's like a span that's in English. That's a reverse direction, and you flex that item inside of a grid. But Is it it's not the accessible theme, is it? in CSS?

All trying to override, it's it's a bit

good enough, then you can sprinkle them on top as a progressive enhancement. Yeah. That was one of the things that was so shocking to me about the view transition API stuff is that just every single example I ever clicked on degraded

Oh, when when can people expect to start actually using this, and and what kind of really interesting things can be done with this thing? So, the view transition API, it's something that was 1st,

So that way your your styles don't beat out to other components and whatnot.

but then got

So if you make the the base experience Yeah. Removed it. The exit.

container queries before, but when that was just starting to get all all going, really. I doubt. Yeah. Get she's just really, really amazing.

and all people who who write specs. Yeah. We had her on the show a couple years ago to talk about,

evolved into, like, a real proper. This is a working group specification.

but before order of appearance. That's also something

calculator stuff is going to get really interesting.

the actual spec for it. The the spec is the CSS cascade

you know, But when can I use it? Oh, yeah. Like, does that ever get annoying to you?

cascade layers, which is Miriam Suzanne, and she's been doing, like, a Bunch of stuff for CSS recently. It's it's really amazing to to have her work on this. Oh, yeah. Because the, like, the language has really well, the demo is on there, and it's only using CSS.

Perfectly. I mean, they just function like a normal website when you when you did it without the animations. And then the people who who get it, get it. The people who don't, You're not missing out anything essential, and that's the beauty of progressive enhancement. Right? Baseline is a new what do you call that? It's a it's it's kind of a spec. Basically, all the browsers. Yeah, it's kind of like, can I use

And that way your selector then, like, for example, And that's the the base

with

one one of the the details that people sometimes get wrong is like, oh, this is something chromoly. Well, it it's not.

And for that, some some clever folks have, like, developed So that's that's something that's that's really cool. It's it's not the the document scroller only, by the way. It can be any scroll on the page or horizontal one or whatever. Oh.

But with with scope styling, this is Solved because basically you can say, like, hey, you know has of implementation in, And and the the stacking cards one, like, that that that's an interesting one because, take to do 1 in the same demo. So you can switch, for example, between the CSS and the JavaScript version.

thanks to her input and and, of course, the input from other people like like,

experimented with in Chrome, Yeah. I'm using Feedly.

It currently is implemented in chromoly though, but it's like a A really native feature to the web, coming hopefully soon to other browsers as well. And what it allows you to do is, like, if you update your dom somehow, so you have like a before and after state. For example, if you go from an overview page to a detailed page, your your DOM gets changed. But then you can say, hey, you know what browser, I don't really have the need anymore to use a CSS preprocessor.

your changes to the parent to go down to the child.

cart component.

Yeah. And also, like, for example, scope styling is an extra step in the cascade. So it's after specificity,

you can quickly have a quick glance as to where is this supported in which browsers?

It does feel like between

the selectors should only match elements between those 2 nodes. Oh, that's I was wondering about that because the kind of annoying thing about

figuring out how to select your items. It does like, I remember, like, You know, the till day was there. Oh, and now we have access to the sibling selector and stuff like that. It's like, wow. There's so many cool things you could do, but now I have to learn all these new symbols. And then here we are,

interesting and, again, an extra step in the cascade. Big change. Yeah. What so what's that called in the I'm just, like, Trying to Google for this type of thing, and it's scope styling is one of those things that is very hard to find

And then you and then you have, It it's all it's all on there. And you wanna do this.

but a little bit simpler in that have like we're searching stuff and your blog comes up or a Twitter bread or whatever. So,

q z 3 dash title to select, hey. Only for this component, this q z 3 dash title, applies. Or we have resorted to to systems like BAM Where we say, like, okay, this is a news underscore item dash title and this is a footer dash title and and whatever title.

one of the responses on my my Google IO video was person, oh, now we have to wait until Safari implements it. Yeah. My reply to that is that, well, Go to meetup, apply. Hey, I have a talk. Even if it's like a bad idea or if it's like a talk for only 5 minutes or whatever, For example, fade in, which are some key frames going opacity 0 to opacity 1.

automatic

charts and some of the can I use stuff? But we'll do a show on that entirely. Okay. So

no. Because if you approach it as a progressive enhancement So a basic one indeed is, A reading progress indicator where you can simply track the scrolling progress. But another one that uses similar kind of approach is, They really want you on there. It's how I started back in the day, and, oh, look where I am right now. So

And at least until now, there's not really any way to stop that from happening. So you're saying you can now say

you have a card which has a card inside of it Or something like that. You don't want the

Mhmm. Then it it's okay. Like, these scroll different animations, they are a nice touch, but they are not essential to consuming the content on your website.

what? Take this, dot card element They also then write a WPT test for it, commit it into the repository, and then that test also gets run against the other 2, random agents.

Depends on which one. Like, for example, with with scroll drift animations, but then also they are a very good platform if you are ever considering of blob that just gets prepended.

tools that we've gotten, You're gonna need to, like, spend a whole course why somebody should be interested about Scroll linked animations.

this and has in so many of the other new selector Move on to, like, a big feature in CSS that we heard about at some point here. And I guess this is not just CSS, but,

And it's sort of comes along with MDN's

to cart content. So that's where all the content inside of the cart goes. But then in your scope styling, you would say IMG. And that way you would target only the image in between the card and the card content, but not the image inside of the card content itself, which can come from a CMS or something like that.

stuff in regards to well, Okay. 1, here's a quick question for you. Does it ever get tiring when people, like, say, LOL,

The cascading in CSS is sometimes if you nest components,

So the view transition API, Quirk's motors up then.

So, And the cool thing is, So it's available in in Chrome, right now. Not behind the feature flag anymore, so it's available in Chrome stable. It's also available in Safari technology preview, We aim to get this,

Let let's move into the view transition API thing considering we're talking about progressive enhancement. I just brought to you that example.

I have a question about some of this baseline

Evolved,

debugger tools to figure out what values are at a specific time in CSS?

until you reach, reach the end value. If you set a CSS variable to blue by default, then the type of that would be inferred. Right? Nope. So if if you set,

and own CSS

So that's why you need some type hinting in there and you say, like, hey. You know what? This this dash dash color property, to learn. Definitely, the the engineering team has been kicking it up a notch,

CSS

Let's talk about scope styling next. What is that, and when do we need it? Alright. So, the problem that we have right now is that if you do something like a class doc title, you add it somewhere in your markup and you Use that in CSS.

smoothly interpolate,

Any value. So you can put anything in there. If you want, you can put some JavaScript in there. It it won't run, of course, but you can put anything that you want in there.

popped up more than 5 years ago, so it's been on their plate for quite a long time.

from 1 color to the other. And the same with numbers, degrees, units, and whatnot. That way it knows, oh, you're animate you're, changing a number from 0 to 1. Let's add it up 0.1,

The the team behind this, like, the 1st ideas, And then inside of that block, you would put dot title and then apply your style there. And then the the engine will say, like, okay, This dot title should only match within that It is a color.

thankfully, right now, it's it's available in Chrome Canary. So that's Chrome 115 that you need, hopefully, we'll we'll get it shipped in 115. If not, it's gonna be 116. This card one is so cool. Like The card one's gorgeous. Yeah. Scrolljacking Housework that needed to be done before they could implement it. Is that true? Subgrid is definitely a a very challenging thing to implement Because there's all these little details to get right. Like, for example, what happens if you,

Well, if you don't set it so a custom property can take,

powerful

Houdini. Houdini was kind of

a lot of times you're writing tests to make everybody else's implementation

which was never implemented in Chromium.

WebKit has implemented that very recently.

One of the very good things that came out of Houdini of Houdini is the the values, API, which allows you to register CSS custom properties with a certain type. And,

and which often might mean, like, why is a certain feature? Why does it take a long time? Well, yeah, we have to make sure that The house still stands in the end. No. It doesn't fall over.

Like, you can debug Wasm with, dev tools and whatnot. Something that I'm totally not familiar with, but That's also the dev tools team their responsibility.

to maybe potentially write your own properties

have not shipped have become available as other features. For example, the these whole scroll driven animations, so CSS dash cascade dash 6, you will you will find.

But within the CSS working group meetings, they they were not opposed to to some of the IDs that were floated. So I think that's that's a that's That's a good sign. Yeah. And Adam mentioned when you guys are implementing,

They also need to support some some they also need to support that.

Yeah. Right. Yeah. Yeah. A lot of this stuff, I said this in a separate show as well, though, but Once we get all of this implemented,

What is the status

just the value without registering it, it will have no type, and the rendering engine doesn't know what to do with it. Oh.

We don't have any word from, the WebKit folks, just yet.

of Houdini.

most graphics editing

But since it can be anything by default, it has no types. So how do you transition blue to red? To, like, go to b c d e and up to to red or whatever.

Less, less challenging or so they have to do less work there. So, you know, hopefully, that all trickles down.

process

I like that. And what about Dev tools for debugging CSS variables. I know we can hover over some things to see what the value is. Is there any Plans to make more

APIs or or bundle, like, little worklets or whatever for CSS.

And if I'm not mistaken, it's also part of interrupt 2023, so that means that, hopefully, Firefox should also have it as well by the end of the year. Why would you need to set A custom properties type in CSS.

Talked about as being, like, the next thing to be able

I'm not sure if there's anything, like, immediately planned To to further improve it because, But do know that the audience is there And from that, we get, like, really, really interesting results. For example, like CSS nesting Has been mentioned as one of the features

Now the problem is if you have something like dash dash color and you set it to blue, On it, you know, there's there's a lot to it. And one of the challenges with that as well is, like, okay. Right now, this is being developed in Chrome because Chrome was, like, leading on this.

So now it's not, Chrome only anymore.

Well, the dev tools are always improving improving, like, quite recently now. What what Nanon did in Chrome dev tools is the ability. Like, if you Command click or control click on a custom property. It will jump to to its definition somewhere so that you can change it.

that's like the You read, and you're like, suddenly changes like which one wins. Is it the grit that you have defined, or is it your aspect race, or is it something else? So, is a pure CSS recreation of a cover flow, an effect that was once famous on On iPhones and in iTunes

And that way, the rendering engine knows, like, oh, you're going from blue to red and it's a color. I should just, like,

Oh, I always thought, oh, yeah. I set it to 50 p x, so it knows that it's, like, a pixel value,

Well, in a component based world, very often many components can can have a title. For example, your card can have a title Or your news item can have a title or your you know, even in your footer, I guess, you can put a title class somewhere.

But then the cool thing again is that, like, if you use the web animations API together with scroll driven animations, And that's

That's how I ended up here in the end. Can can we actually maybe take a detour to talk about scrolling animations? Oh, yeah. Definitely.

And eventually, that that that's that's how it evolved.

and up, about HTML, CSS, and JavaScript. So that's where I learned, like, okay, making presentations and it will be green enough across all browsers, and then you can use it without, without all the build steps and whatnot. Close. What about Something you wish is not part of CSS. Anything you would take out if you could? That's a good question. Something you take out of CSS.

To be honest, it also was a part of my job for a while. So, I have a history also in education. I was a lecturer at a technical university for 7 years, Teaching students age 18, 19, 20,

because there's so many things I've learned over the years. I'm like, I should just take, like, An hour to write it down.

2021, so that's over 2 years ago, I wrote about Crawling animations for the 1st time after I saw a tweet by by Adam Argyle who Argyle, who is now my colleague.

and I think that that's how I got good at it and, yeah, keeping

Yeah. In in the end, it's my blog that lent me my job at Google. It I didn't I don't earn anything from from my blog, but it Paid forward and ICT.

So I I created my own blog. And firstly, like, it was a personal blog, and whatnot.

So maybe, I guess, just give a high level, like, what the heck they are and and

in February Another one that I that I really like that is totally misnamed

But eventually, it evolved in this Technical blog because I I started, yeah, I was studying, The end of the animation worklet This person seems to I'm a Chrome developer relations engineer at Google, and I'm on the CSS u WebUI and dev tools team. So that basically means that I'm mostly concerned with all the new CSS stuff.

but that's what eventually put me on the radar with certain folks within Google. They were like, oh, yeah.

massive blog posts on that. It took me a lot of days to to get it right, I don't have a a full idea of of of the actual status, but for example, some things that,

I take pride in that, by the way. That's amazing. Is that how you got a job at Google as well? Okay. It's amazing. I sometimes kick myself for not blogging more,

How to explain something properly because that's also something challenging, Doing the dev rel work for their, for it together with my colleagues, interoperable, Other things are, for example, a a contact list demo that's on there where you Scroll up the list or scroll down depending on how you look at it.

I found something cool. I wanna write about this. I wanna It runs on a document timeline. That means that you load the page and the animation starts running by the tick of a wall clock.

to land in all the browsers is that there was like a lot of like

Take a look. I think that's why and you can correct me if I'm wrong, but subgrid took so long

Base for cell phone to, like, get signals from from authors, like, what are your areas of problem is? Well, we we run around at conferences. We are there. So we we get to Chat with people 1 on 1 saying that, oh, and then we we catch some things. And but also every year, there's this thing called the CSS survey, It will work as well.

maybe later this year. Yeah. Awesome. Yeah. That's always the interesting thing is that a Brahmos blog post to explain what it is,

We have it this year.

And, the Firefox folks are also working on it. So I could I see regular commits from them on their parser engine that says, like, Yeah. We're preparing some stuff to implement nesting, rooting for you. They want you to achieve.

Yeah. Then then often what I'll do in response is I'll I'll file an issue within the CSS working group or link up to an existing issue.

that people really, really want in browsers for the past 3 years, and now it's like, okay.

which is run by Sasa Graef and and his team.

Sometimes browsers need to say, okay, before we even implement this, we need to sort of take a step back and

animate itself.

So it's still like in a JavaScript SPA app, JavaScript library for that, but then that library runs On the main thread, so it is blocking. So if something else happens, your animation just, like, halts, an ancestor scrolling ancestor,

on the web. And all you need to do is wrap your method that updates dump, wrap it into the document dot start view transition method,

put on a a separate process and stuff like that. What what I like about that is, like, that it always catches up. Like, back in the day, modern.

move it on the screen. Oh, and header bar, it should move out, and the footer, it should slide down and whatnot. And then you can, you can, like, have these real rich interactive experiences Van Damme is my last name, but I mostly just use my my my handle, Bramis.

version,

Yeah. CSS, again, not chipping anything, not Get that progressive enhancement going and native true native functionality. So is that really the the inspiration for a lot of these is is that people really feel like maybe perhaps the web doesn't get the same

same origin cross document. So you can't do cross origin But it's same origin cross document transitions that you will be able to do. So you're telling me that I'll be able to just have, like, 2 HTML files And click from 1 to another, and it will go to meetups if you wanna be Involve. If you wanna meet people, if you wanna get from, together with people who have are in the same spirit,

What do you mean? Yeah. Front end. Right. 1st end. Yeah.

One one note with this though is that currently view transitions It's a single page applications only.

in

user interfaces as, like, a native app. And largely, it's because Developers are all just writing it in JavaScript and doing it themselves, and some people implemented it better than others. So it's it's like the inspiration for this Largely to take some of this tooling and some of this this code work out of the developer's hand and put it into a place where it can be,

But with view transitions, you can also target

smoothness

the video element and CSS, with across all browsers.

We do still wanna build a an app because we can do, like, the Crazy animation stuff. Well, soon you can do it on web your, yourself.

I think this is this is amazing because there's a a need. We hear it from people like, okay.

if you wanted to stream a video, you had to wrap it in a flash, thing. If you wanna do animations, you also had to use flash. And then a few late a few years later, we we got,

way across the dump tree, without any issues. My gosh. CSS. Yeah. That's a sick Yeah. Honestly, like, we we talk to people on this show a lot about, like, what should you really be focusing on and Especially people who are like new to web development.

And then, wiki, but in the end, it it I got better at it. So yeah. Awesome. That that's fantastic advice.

So is this all done via the like, when when you're interfacing with the stuff in CSS, The animation timeline property becomes, like, the big thing. Is that, like, where the the special sauce is here,

and then you can set the film mode and whatnot. And then instead of setting an animation duration but the the problem is that ad is essentially stack. And then the 3rd term that I can't come over now Essentially, it's ads, so it it's got it got, like, the wrong name somehow.

And the coolest part about this feature, and it's something that I cannot stress enough, is that All these animations, they run off the main thread unless I'm opening an old project.

Wow.

like part of why I don't like a lot of those scroll jacking websites is that you can tell that they're, like, laggy. Right? You can tell they're chugging around.

you set the animation dash timeline property

to that.

whereas And your ship is.

Take all this new stuff and sort of run with it. Like, if you want to work at Google, I would probably say start writing blog posts on all of this new stuff because there's

essentially the core.

websites

Yeah. So there there's no scroll listener or whatever in there. It's just

intermediate thing. It's literally everybody. So

And how does it know which scrolling element to do it? Does it find the 1st parent that has a scroll bar on it? Yeah. So so by default, it goes up the ancestor tree, and it tries to find the nearest one that's crawls.

Wild stuff. And typically, 1 one would use,

to a value of scroll, which is a function, or a value of view, which is also a function. And then it will look stuff up for you, automatically.

You couldn't do this stuff already. People are doing

animate 1, like, to have. It's now shipping in Chrome's table,

but then is, animation composition the the sizing or or, like, the the axis For, doing stuff like margin where you do, like, margin right and margin left, where you just want the shorthand to be The logical way so if you use the margin shorthand right now, it's top right bottom left.

When people like, who is asking for this? Like, the the clear one to me is you have a blog post. You wanna see how far through the blog post you are scrolling. Is there Any other examples of people have been asking for? So, I have a website published. It's scroll dash anim scroll dash driven dash Animations dot style. And on there, there's a bunch of, examples that you can check out.

This helps that, I guess.

fancy scroll stuff all the time on the web, but with just

where you can flick through the albums, I think that's that's amazing. I think it's also one of the The challenges, There is like a list of CSS mistakes And we had to narrow down the list, so we we we only picked 20 don't be afraid of it. Of course, it is nerve my first time, I was Sweating. My heart was racing and whatnot. I was trembling, contradictory.

Oh, so you could, like, have siblings.

If you wanna track something else, like, for example, something that is not, repository, I think. Or maybe you need to add a w three c in there somewhere in the URL. We'll link it Up in the show notes. Yeah. Yep. So so anybody can can propose an ID there. But very often an ID also can come from a browser vendor itself, Animate smoothly or transition smoothly between those these 2 views.

The the stacking cards 1, the horizontal

That are scrolling. I'm thinking about my video player right now. Mhmm. Scroll through the list of videos and then somewhere else you could be displaying how far down they have Scrolled. Yeah. Exactly. That's amazing. I love that I love that you can pass it

Double down on this stuff, folks. Yeah. It's like like you mentioned, Flexbox is now part of the the the CSS foundations, they're just a lot of details to get right. And the cool thing is, to get started with public speaking.

If you're out there and you're wondering about this,

some CSS declarations, And it it it it all does it for you.

So

Or is there there more properties? Well, there there's more properties, but the the basic idea is that you have an existing CSS animation.

Literally everybody, the best, especially for me, the best courses I've had are when everybody needs to learn it. My Flexbox course, There's not a single person out there that doesn't have to learn Flexbox. You know, it's not a beginner versus

this type of CSS feels like

everything can be done in CSS Without the new JavaScript. There is a JavaScript API available, so you can create a scroll timeline instance and a view timeline instance and use it with the web animations API. But you can do it All from within CSS

section scroll 1, the some of these demos are just these these demos are killer, because it's not like

there's also a tool on the website to, like, visualize a different view timeline ranges because you can track an element as it enters or exits.

to 1 seconds, you simply omit it or set it to a value of auto, Then I started working at a web agency and was like, oh, I don't really need it much anymore, And the entries, they they animate in and animate out as they enter and exit, the scroll port. And I think the the the big demo on there, that you will definitely recognize If if if you wanna land a job, learn one of if you wanna, like, find a job and get paid well and whatnot,

So something that's tracking a sibling element that's being scrolled, maybe like a list of videos

we'll have this I Wes and I are both jaws on the floor looking at some of these examples. So, like,

running Yeah. Or or often, it it just, like, comes by just setting a bunch of CSS properties.

then you can set a scroll timeline name on that scroller and then use that name as a value for animation dash timeline.

depending on what you wanna do.

Yeah. So,

on a shared parent.

And like you said, it's rendered Off the main thread when possible. So I feel

Become more broadly scoped, as we say it. Oh, that's awesome. I I can't believe this. Like and do you have a couple examples of

The this is what I mean by, like, CSS is crazy. Like, there's just we're we're only, like, 3 things into

stage 1

smokes.

20 years ago, it was, oh, you have an HTML file. And then we did table bases. And then later on, we had we had CSS. And That's the cool part.

Holy

Probably 40 things that has happened in CSS in the last year, and it's just blowing our minds. Yeah. There there's so much happening. I think it it's really gonna be cool again because

And that's about it. Mhmm. And, yeah, the term has changed. Back in the day, it was called a website. Now it's called an MPA, which is a more fancy term for the stuff that we did 20 years ago. Yeah. MBA means multi page application. Correct? Yep.

proposal right now. There there's a bunch of things, So that that's a bit conflicting often because we have these tiles well, the dev tools team, they also have a bunch of work because for every new feature that gets Shipped in CSS.

Back in when when I started My advice is So that's basically you declaring it somewhere, and then the actual, scroll timeline or view timeline will attach to it, and it will

And right now, we are, like, circling back to that where you had can just you could just ship HTML, and you just ship CSS, And if you set dash dash color to 50 pixels and use it as a CSS background color, then it will will become, but I think the big blocks are already in the works, like CSS nesting, for example.

Is is there anything in CSS that you Absolutely

wish that we had or maybe something that is

SBA single page application.

Coming, and it's it's it's one feature after the other. Like, you know, you know, Kravitz, My manager, my colleague, individual parts separately. So you can say, hey, you know what? This image that you clicked In this overview page, along the detailed page is a big one. Transition it from so change the height and the width and automatically You give it an easing function,

You drive it by scroll. So that means, for example, that you can say, like, hey. You know what? If I'm at the top of my page, my animation progress is 0%.

which is kind of comparable to intersection observer where you're tracking like, hey. Where is this element inside of its scroll No.

fade it in. And if it exits the scroller, well, then fade it out.

If I scroll all the way down, your animation follows along with that.

So typically, if you Put a CSS animation Officepack has started, just recently. So it recently just got approved to start, and that's, And that's it. It does automatically any animations themselves, you define them in, CSS.

But with scroller animations, this is no longer the case.

It's scroll driven animations. And, basically, what they allow you to do is to drive an animation by scroll.

Section value of 1 and and or 0 or something in between there. But you can now do that with CSS as well and say, like, hey. When this element is Entering its crawler. So for example, if you're scrolling down and this image appears inside of the scroller, Yeah. And it it can come from from, like, various ways. So some sometimes an idea can come from within the community saying like, hey. We we need we need, like, A solution for this is a problem. It takes me 50,000 lines of code. So just one thing, this should be really, really easier.

We now say scroll driven animations by now. The the spec got renamed, but it used to be scroll linked animations up to a few months ago.

Una Kravitz and Adam Argyle.

a couple of weeks ago, and we had a show that we didn't have a guest for it when Adam is always sending us new stuff. Oh,

which was not not planned at all. We, we had booked you

That's us, basically. Yeah. That's awesome. We actually just had Adam on last week,

come on. Mhmm. And he did like a like a speed run of of bunch of the CSS CSS stuff as well. And I I think we need we're gonna need to a bunch do a bunch of these shows getting on into it.

that,

It's kind of like the the t c 39 that we know from JavaScript, but then you have the CSS working group, Which is concerned with specifying

And the members on the CSS working group are, people from all browser vendors, of course, but also people from interested companies,

that are also invested in the web.

writes all the CSS specifications.