Supper Club × Bramus Van Damme on CSS

Welcome to Syntax. We've got a CSS build episode to you for you today. We have Promise.

I could I'm sure I, I'm sure I totally butchered that, Van Damme on today.

And I sent him a DM a couple of months ago and was like, I feel like half of our shows have like we're searching stuff and your blog comes up or a Twitter bread or whatever. So, 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,

Yeah. It's a very exciting time to be to be a front end developer, especially a CSS developer because so much stuff has been coming. So, Yeah. And it's it's a bit hard to keep up as well, to be honest, because it's it may be too much to follow. So,

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 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 developer. There's really a lot

to learn. Definitely, the the engineering team has been kicking it up a notch, lately, and it's it's it's one feature after the other. Like, you know, you know, Kravitz, My manager, my colleague, she we recently published a a blog post on, like, hey. Here's some of the things, that landed in Chrome recently, And we had to narrow down the list, so we we we only picked 20 of the new features that recently landed.

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

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.

Van Damme is my last name, but I mostly just use my my my handle, Bramis.

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.

Doing the dev rel work for their, for it together with my colleagues, Una Kravitz and Adam Argyle.

That's us, basically. Yeah. That's awesome. We actually just had Adam on last week, which was not not planned at all. We, we had booked you 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, 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.

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,

that, writes all the CSS specifications.

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.

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 CSS. Yeah.

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.

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.

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/ CSSWGdashdraft is a repository 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, which is, like, hey. We think we have a solution for this.

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.

And also sometimes it's it's people, within the CSS working group who are, like, Heavily involved within these packs, and often also affiliate with a browser vendor, to be honest. Mhmm.

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

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.

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, Where are they largely finding 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,

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

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.

One thing that that we 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, which is run by Sasa Graef and and his team.

And from that, we get, like, really, really interesting results. For example, like CSS nesting Has been mentioned as one of the features that people really, really want in browsers for the past 3 years, and now it's like, okay.

We have it this year.

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, 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,

maybe later this year. Yeah. Awesome. Yeah. That's always the interesting thing is that Sometimes browsers need to say, okay, before we even implement this, we need to sort of take a step back and Take a look. I think that's why and you can correct me if I'm wrong, but subgrid took so long to land in all the browsers is that there was like a lot of like

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, add an aspect ratio in CSS to an element that is in a Grit, but check auto sizes and then 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, they're just a lot of details to get right. And the cool thing is, We aim to get this, interoperable, with across all browsers.

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 nightly builds of of browsers.

And the cool thing is, like, whenever somebody from from Firefox implement something and they have stumbled upon a bug, a case that they didn't handle, for example, 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.

That's what it is. It does it just like screenshot the output 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,

changing some some CSS class, for example, and then getting the computed Style and then seeing, okay, is this value actually 160 pixels, for example.

Mhmm. There's also comparison, 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.

Like, when something is brand brand new and there's, like, not even a Brahmos blog post to explain what it is, I will go into those expected files, and that's almost always like the 1st ever

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.

You read, and you're like,

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, if you're writing it in Japanese 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 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 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?

A bunch of dependencies, 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, 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

posts, 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.

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

And they're always so well like, What's your history with blogging, this type of technical blogging? And how did you get so good at it?

Well, 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.

And then in in 1997, it was I discovered ViewSource, which I'm like, woah. I can I can make my own websites? Like, this this is cool.

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

But eventually, it evolved in this Technical blog because I I started, yeah, I was studying, ICT.

Then I started working at a web agency and was like, oh, I found something cool. I wanna write about this. I wanna share my my findings with somebody.

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

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, and up, about HTML, CSS, and JavaScript. So that's where I learned, like, okay, making presentations and How to explain something properly because that's also something challenging, and I think that that's how I got good at it and, yeah, keeping Keeping busy with it. My bug is now over 20 years old, so,

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, 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.

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 then, like, for example, in February 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.

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 massive blog posts on that. It took me a lot of days to to get it right, but that's what eventually put me on the radar with certain folks within Google. They were like, oh, yeah.

This person seems to write some good stuff.

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.

Yeah.

So maybe, I guess, just give a high level, like, what the heck they are and and why somebody should be interested about Scroll linked animations.

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.

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

So typically, if you Put a CSS animation on your page or use the the web animations API.

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.

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

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%.

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

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.

So that that's one use case where you just simply track The progress of a scroll from 0 to 100% and link an animation to that. A second thing that you can do is track a certain subject within a scroll, which is kind of comparable to intersection observer where you're tracking like, hey. Where is this element inside of its 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, fade it in. And if it exits the scroller, well, then fade it out.

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? That's the cool part.

So 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 by just setting a bunch of CSS properties.

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 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 running simultaneously.

Wow.

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,

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.

For example, fade in, which are some key frames going opacity 0 to opacity 1.

You give it an easing function, and then you can set the film mode and whatnot. And then instead of setting an animation duration to 1 seconds, you simply omit it or set it to a value of auto, depending on what you wanna do.

And then, you set the animation dash timeline property 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.

And that's essentially the core.

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.

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.

And that's the the base use case.

If you wanna track something else, like, for example, something that is not, an ancestor scrolling ancestor, then you can set a scroll timeline name on that scroller and then use that name as a value for animation dash timeline.

Oh, so you could, like, have siblings.

So something that's tracking a sibling element that's being scrolled, maybe like a list of videos 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

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, on a shared parent.

So that's basically you declaring it somewhere, and then the actual, scroll timeline or view timeline will attach to it, and it will

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 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.

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, 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, to that.

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.

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 is a pure CSS recreation of a cover flow, an effect that was once famous on On iPhones and in iTunes where you can flick through the albums, well, the demo is on there, and it's only using CSS.

If you're out there and you're wondering about this, we'll have this I Wes and I are both jaws on the floor looking at some of these examples. So, like, The the stacking cards 1, the horizontal section scroll 1, the some of these demos are just these these demos are killer, because it's not like You couldn't do this stuff already. People are doing fancy scroll stuff all the time on the web, but with just this type of CSS feels like

Wild stuff. And typically, 1 one would use, 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,

whereas And your ship is.

Yeah. So, right now, it's it's available in Chrome Canary. So that's Chrome 115 that you need, and we hope to Ship it in chrome one fifteen stable. There's still a few details that that need to be solved, but, 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

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

And like you said, it's rendered Off the main thread when possible. So I feel 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.

This helps that, I guess.

Yeah. So there there's no scroll listener or whatever in there. It's just some CSS declarations, And it it it it all does it for you.

And and the the stacking cards one, like, that that that's an interesting one because, 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.

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, but then animate 1, like,

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 I feel like there's a major, major opportunity right now to 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 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 intermediate thing. It's literally everybody. So

Double down on this stuff, folks. Yeah. It's like like you mentioned, Flexbox is now part of the the the CSS foundations,

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 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.

Scroll. Scroll end event and and whatnot. So that's really handy if you wanna, like, indeed have some some JavaScript events.

But then the cool thing again is that, like, if you use the web animations API together with scroll driven animations, But you can also benefit from these extra events, and they they all work together.

I think that's that's amazing. I think it's also one of the The challenges, 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, 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.

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, CSS is more powerful than most graphics editing 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

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.

The the team behind this, like, the 1st ideas, popped up more than 5 years ago, so it's been on their plate for quite a long time.

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.

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

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,

a lot of times you're writing tests to make everybody else's implementation process Less, less challenging or so they have to do less work there. So, you know, hopefully, that all trickles down.

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, Houdini. Houdini was kind of Talked about as being, like, the next thing to be able to maybe potentially write your own properties and own CSS APIs or or bundle, like, little worklets or whatever for CSS.

What is the status of Houdini.

I don't have a a full idea of of of the actual status, but for example, some things that, have not shipped have become available as other features. For example, the these whole scroll driven animations, that's like the The end of the animation worklet which was never implemented in Chromium.

I I'm also not sure if the spec on that is finalized.

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, thankfully, WebKit has implemented that very recently.

So now it's not, Chrome only anymore.

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.

Well, if you don't set it so a custom property can take, 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.

Now the problem is if you have something like dash dash color and you set it to blue, and then in a transition, you set dash dash color to red, Then the rendering engine needs to interpolate that.

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.

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, It is a color.

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, smoothly interpolate, 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, 0.2

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,

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

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

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.

And if you set dash dash color to 50 pixels and use it as a CSS background color, then it will will become, 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.

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 powerful debugger tools to figure out what values are at a specific time in CSS?

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.

I'm not sure if there's anything, like, immediately planned To to further improve it because, well, the dev tools team, they also have a bunch of work because for every new feature that gets Shipped in CSS.

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

And then, of course, dev Tools is much, much more than just CSS and new attributes.

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.

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.

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.

So that that's a bit conflicting often because we have these tiles All trying to override, each other.

And for that, some some clever folks have, like, developed automatic class generation stuff where you have, like, the some some kind of blob that just gets prepended.

And then you and then you have, 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.

But with with scope styling, this is Solved because basically you can say, like, hey, you know what? Take this, dot card element and then Scope it. All my styles do like so the rule that you type is at scope and then between parents, dot card.

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 cart component.

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

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,

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 The cascading in CSS is sometimes if you nest components, you have a card which has a card inside of it Or something like that. You don't want the your changes to the parent to go down to the child.

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'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 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.

And that way your selector stays real simple. It's just IMG, the regular image tag that you're targeting, But scoped within its upper and lower boundary.

It does feel like between this and has in so many of the other new selector tools that we've gotten, You're gonna need to, like, spend a whole course 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, with has and scope and oh, man. This the specificity calculator stuff is going to get really interesting.

Yeah. And also, like, for example, scope styling is an extra step in the cascade. So it's after specificity, but before order of appearance. That's also something

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

the actual spec for it. The the spec is the CSS cascade 8 6 specs. So if you Google for CSS, CSS dash cascade dash 6, you will you will find.

And, the spec is authored by the same author as, the person who did, 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 Evolved, thanks to her input and and, of course, the input from other people like like,

and all people who who write specs. Yeah. We had her on the show a couple years ago to talk about, 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.

I have a question about some of this baseline stuff in regards to well, Okay. 1, here's a quick question for you. Does it ever get tiring when people, like, say, LOL, you know, But when can I use it? Oh, yeah. Like, does that ever get annoying to you?

Depends on which one. Like, for example, with with scroll drift animations, 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, no. Because if you approach it as a progressive enhancement 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.

So if you make the the base experience

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 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

but a little bit simpler in that you can quickly have a quick glance as to where is this supported in which browsers? And it's sort of comes along with MDN's charts and some of the can I use stuff? But we'll do a show on that entirely. Okay. So

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

So the view transition API, 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,

experimented with in Chrome, but then got evolved into, like, a real proper. This is a working group specification.

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

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, Animate smoothly or transition smoothly between those these 2 views.

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.

But with view transitions, you can also target 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 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 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, And that's it. It does automatically any animations themselves, you define them in, CSS.

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 smoothness 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,

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, 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, the video element and CSS, animations.

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.

Well, we now see again that the web is catching up, and I think this is this is amazing because there's a a need. We hear it from people like, okay.

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.

It will work as well.

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

So it's still like in a JavaScript SPA app, and work on, MPA, version, Officepack has started, just recently. So it recently just got approved to start, and that's, 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

animate itself.

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

Holy smokes.

The this is what I mean by, like, CSS is crazy. Like, there's just we're we're only, like, 3 things into 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

Back in when when I started 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 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 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.

SBA single page application.

Is is there anything in CSS that you Absolutely wish that we had or maybe something that is stage 1

proposal right now. There there's a bunch of things, Coming, but I think the big blocks are already in the works, like CSS nesting, for example.

That's one of the features that I really wanted, to have. It's now shipping in Chrome's table, has of implementation in, Safari technology preview, but I really wanted that because it was, like, one of the last holdouts that kept me, from not using a a CSS preprocessor.

Because now with with nesting, I don't really have the need anymore to use a CSS preprocessor.

Of course, if I do wanna support, To pull older versions of browsers and old browsers, I still need to, like, pipe my CSS through post CSS or whatever.

But I can write it without needing to compile it. Well, hopefully, like, maybe 2 years from now, 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.

Yeah.

I really haven't thought about that.

I do have some things that I want to be part of CSS, but I don't yeah. The the the problem is with with removing some stuff.

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 HTML has, like, quirks mode.

JavaScript has strict mode.

Like, why is there not like a has there ever been talk about, like, a strict mode in CSS where, 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.

Has that ever been been thought of?

Well, it definitely has been brought up within the CSS working group a few times, from from just anybody, because, like, one one example is 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.

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

So I think by default, you want it to be, like, blocked 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, well, some size that will rely on it right now will will often break. And people there have service like, what if you had something like ads document that says, hey. You know what? I want all these sort Shorthands to be, to follow the logical form instead of the

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, 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, Quirk's motors up then.

We're we're winding a little bit back. There is if you go to the CSS working group, wiki, There is like a list of CSS mistakes and not sizing, box sizing, border box by default is listed as one of them.

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

somewhere where We went through this, like, probably 4 years ago on the podcast. I told You and I did?

We did. I still don't remember that.

Oh, this would be. We should do a fun show on this 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 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

Yeah. Or or often, it it just, like, comes later.

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? 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, 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 headed down a certain path that that we didn't reconsider the name of a certain thing.

Another one that I that I really like that is totally misnamed is, animation composition where you can define add, To replace or, like a 3rd term, 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.

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

with it. That's too late.

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,

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

That's your niche.

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.

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

We'd love to hear your answers. 1st question we have here is what computer mouse and keyboard are you using?

Oh, I'm using the default Old ones. So it's, the Apple Magic Mouse, number 2, I guess.

It is by now, and the Apple, wireless magic Keyboard, the one with the with the touch ID, built into it. What about text editor theme and font? Anything fun there? I'm a Versus code user, and recently I Switched, from, like, their old dark team to their new dark team. They have, like, a new dark team, apparently.

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.

Is it it's not the accessible theme, is it?

Now what is it? I have it open right here. Let's try it.

Core team, it's called dark, modern.

And before it was, the regular dark one, and that's a little bit lighter. So

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

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.

Yeah.

Next question we have, what terminal and shell are you using? I'm on ZSH,

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,

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

Default macOS terminal.

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

stuff, but how do you stay up to date with

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

And, yes, RSS is still a thing, and I really would Urge everybody to use it because that you that way you can control 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, like CSS Tricks back in the day, but, Yeah. They're they're kind of, winding down, I guess.

Staging Mac, web.dev, of course, .dev, and developer.chrome.com.

What I really like about web.dev is that, my colleague Rachel Andrew, she every month, she writes a blog post what's new on the web platform, 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? Yeah. I'm using Feedly.

And before, I was a Google Reader user until they Yeah. Removed it. The exit.

Yeah. I know. It it does kinda feel like RSS readers need to be, like, a thing that people talk about again 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

On the personal website in 2024, we're, like, people are gonna start blogging again, because, like, I I Fine. There's a couple people, and their blogs just come up nonstop. And I'm like Nonstop.

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

some, like, 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.

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

Oh, that's good.

Let's say do you have any advice for people who are, like, new to this? Because you've been around forever in the web development community. Someone who's just starting today, do you have any advice for them?

My advice is it's it's a bit contradictory.

If if if you wanna land a job, learn one of if you wanna, like, find a job and get paid well and whatnot, learn one of the fancy new frameworks.

But if you wanna last in the long term, don't learn any of these new fancy frameworks, 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.

Also back then, that still is relevant today.

My jQuery knowledge, for example, I don't really need it much anymore, unless I'm opening an old project.

And, of course, some of the concepts from that come backported into the web platform and whatnot. But, Yeah. Go go for the foundations. Learn the foundations. They will last forever.

They will pay off.

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

No.

No.

So a sick pick is something That you pick that is sick. So it could be a TV show you really enjoyed. It could be a book you really enjoy. It could be a chocolate bar. It could be literally anything in your life that you enjoy and like would like to tell other people about.

Let let's go for for a concept then.

I'm really a big fan of, meetups.

Of course, with with COVID, we had to, like, tone it down a little bit. But now meetups, I think they are really amazing, because, I get to meet a lot of people there. I have met, some of my friends there, like, 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.

So these meetups, they are really great to to connect to people, to Get to know what they are busy with, but then also they are a very good platform if you are ever considering to get started with public speaking.

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, They really want you on there. It's how I started back in the day, and, oh, look where I am right now. So 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,

go to meetups. I'm a big fan of them. Nice. Yeah. My favorite 1st time public speaking was at a a meetup, and 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,

But do know that the audience is there rooting for you. They want you to achieve.

They don't want you to fail. No. They want you to See, they want to learn something from you, so 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, but in the end, it it I got better at it. So yeah. Awesome. That that's fantastic advice.

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.

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

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 take to do 1 in the same demo. So you can switch, for example, between the CSS and the JavaScript version.

It it's all it's all on there. And you wanna do this.

Y'all 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.

Head on over to syntax.fm for a full archive of all of our shows.

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