957: CSS: Advanced and Obscure

Scott and Wes face off in a CSS-themed round of STUMP’d, quizzing each other on shape functions, scroll snap types, obscure functions, and long-forgotten spec history. From ray() to cross-fade() to print-color quirks, this episode is packed with rapid-fire frontend trivia guaranteed to sharpen your CSS brain. Show Notes 00:00 Welcome to Syntax! 00:54 Which of the following are valid CSS Shape Functions? 02:03 CSS Selectors 4 specification demo. 03:20 How many functions are there in CSS? 04:22 Brought to you by Sentry.io. 04:47 Explain the 3 CSS Scroll Snap types. 06:38 What does the xywh() do? 09:15 What about ray()? 11:25 What do CSS Namespaces do? 14:37 What year was CSS paint() bug tracker introduced in Firefox? 17:34 What does print-color-adjust do? 20:26 What is cross-fade()? 23:54 Name 3 reasons you might use CSS @property. 27:36 List all 10 CSS Filter Functions. 32:41 Name 5 font properties. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Welcome to Syntax. Today, we got a stumped episode for you, which is Scott and I are trying to stump each other with CSS questions. These are things that might pop up in interview, or they're just obscure obtuse parts of the CSS specification where you're going to learn a thing or two along the way and have fun at our expense. What's up, Scott? How you doing today?

• 0:23Scott Tolinski?

  Oh, hey, man. I'm doing great. I'm just trying to function. All of my questions are CSS function related. So I'm very excited because CSS functions is a wild and wacky world. So, no, man, I'm doing great. Yeah, just ready to ready to talk about some CSS. I've been building some really neat CSS demos lately. So I'm going to be doing some more videos on the channel, showing off some really just kind of either obscure CSS knowledge or really useful little tips and tricks. So keep your eye out for that on Syntax on YouTube.

• 0:54Wes Bos?

  All right, let's get into it. All right. My first question I have for you is which of the following are valid CSS SHAPE functions? These are commonly used in clip path, offset path, and SHAPE outside. So we have super ellipse, X, Y, W, H, ray, and vector. Which of these are valid?

• 1:18Scott Tolinski?

  You're going to tell me how many of them are valid, or I just have to know? Okay, so I know X, Y, W, H, and ray are both valid. So those are your little slip up ones.

• 1:29Wes Bos?

  Oh, man, shoot.

• 1:30Scott Tolinski?

  X, Y, W, H, and ray are valid. And then, super ellipse? I'm going to say no. And then, what was the other one?

• 1:39Wes Bos?

  Vector.

• 1:40Scott Tolinski?

  Vector. Hmm. I'm gonna say no as well.

• 1:45Wes Bos?

  All right. So you're saying only X, Y, W, H, and ray are valid. And you're saying super ellipse and vector are incorrect?

• 1:52Scott Tolinski?

  Yes, I'm not confident, though.

• 1:54Wes Bos?

  Close. Super ellipse is indeed a function. Actually, hold on. I got a I got a neat demo I can show you. One sec, let me. This is a little demo that I came out. It's part of the CSS selectors for specification. And what it's allowing us to do is to specify.

• 2:14Wes Bos?

  Like shapes on your corner. So your border radius is not just a regular radius. You can literally do anything that you want. And the most use case for CSS, and you use this in our CSS battle.

• 2:26Scott Tolinski?

  Yeah, but it was I didn't use super. I didn't use super ellipse. I used corner shape. So yeah, I didn't know.

• 2:33Wes Bos?

  Squircle, border radius 50. But if you go, if you go custom, so the word squircle is like just a preset of like, it's a common thing that you would want, right?

• 2:45Scott Tolinski?

  Yeah.

• 2:45Wes Bos?

  Um, but if you want to go custom squircle, you use the super ellipse function.

• 2:50Scott Tolinski?

  Yeah, interesting because you can, you can get pretty good squircle customization just by changing the border radius itself too. So interesting. So you can get really custom with it. Cool. Super ellipse did not know.

• 3:03Wes Bos?

  Yeah, vector is not a CSS function, but what is, what is X Y W H?

• 3:09Scott Tolinski?

  Well, don't, don't look it up. Don't look it up. Don't look it up.

• 3:14Scott Tolinski?

  Cause I'm just trying to function over here, Wes. I'm just trying to function and there might be a question related to X Y W H. So your first question is, according to M D N, how many functions are there in CSS? 38, 58, 88, or 108?

• 3:35Wes Bos?

  There's a lot more than you think. Um, simply because like the units themselves, like, uh, D V H, D V min, and then they all have their inline equivalents. Then they all have a max and min equivalent. So like just specifying widths and heights only, there's probably at least 12. Um, and that, that is, we're not even talking about like X Y W H, super ellipse and stuff. So I'm going to say there is 88.

• 4:05Scott Tolinski?

  There are 108 functions in CSS. Crazy, right?

• 4:12Wes Bos?

  That's a lot.

• 4:14Scott Tolinski?

  I saw the list and I was like, that's a lot. I should count these. And then, uh, yeah, I was shocked too. 108 functions in CSS. And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io/syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io/syntax. Again, we've been using this tool for a long time and it totally rules. All right.

• 4:47Wes Bos?

  All right. Next question we have for you. In CSS, scroll snap, we have the property scroll snap type. There are three properties, none, mandatory and proximity. Explain what each of these does.

• 5:02Scott Tolinski?

  Scroll snap type. Scroll snap type. Okay. So mandatory will force to the front or back or whatever the snap section is, will force it. Proximity will pick the closest between the start and end and none just won't snap? I don't know. Honestly, I've never used this. I've used scroll snap. I mean, I've never used this to change this, I should say.

• 5:38Wes Bos?

  Yeah. Uh, so mandatory is correct. It will always snap to the closest snapping point, you know, start or end of an element where whatever you've, you've set. Um, and then proximity will leave it up to the user agent. So being like, you know, like sometimes you're scrolling something and it like, you scroll like, like, I don't know, 20 pixels down and it snaps back. Or it's, it's like a obnoxious scroll snapping, like it's not a carousel. In that case, the user agent will decide if it will need to snap. So essentially if it's close enough, it's going to snap. But if you're like right in the middle of something and it looks like you're reading something, it's not going to, it's not going to snap for you.

• 6:19Scott Tolinski?

  Hmm. And scroll snap, super underrated. Glad you threw in a scroll snap question.

• 6:24Wes Bos?

  We saw it on the new Apple website. They're, all of their carousels are simply just using overflow scroll and scroll snap. And you get like carousels for free.

• 6:33Scott Tolinski?

  I know. I did a post on that at JS Nation last year. Man, what a, what an API. Wes, here's your question. What does, or dust, what does the X Y W H function do? Same minds think alike. Yes.

• 6:52Wes Bos?

  X Y W H. So I already know that-

• 6:55Scott Tolinski?

  Gave you a little, a little example there.

• 6:58Wes Bos?

  I already know that X Y W H is for specifying shapes in CSS, you know, clip path and whatnot. I'm assuming this is, your code here has one, two, three, has three or four pairs. Each one has a pixel value and a percentage. And then in the, right in the middle, there's a round thrown in there. So I'm assuming X Y W H means X Y width and height. So that leads me to believe it's for making a rectangle. The first value of each pair, I assume, will be the offset from the center.

• 7:40Wes Bos?

  And then the round is simply just that it will add rounded corners.

• 7:46Scott Tolinski?

  So you're, you're close. It is just, it is defining the, the X, the Y, the width and the height. It is for building a rectangular path. I would say you got it. And you can use these rectangular paths and clip paths or offset paths or whatever. You can see this first one, it is giving a path and you don't have to have all of those values. You can only have several values and, and that, like you, like you got with the round. So this first one, 20 pixels, 20 pixels, 100% of the width, 100% of the height, but it's going over 20 pixels over, isn't that what you, that's maybe what you said. I think you got it 100% right.

• 8:28Wes Bos?

  I said it was from the center, which doesn't make any sense now I think about the fact that it has X Y.

• 8:32Scott Tolinski?

  Not from the center, no. That was the part that got me, but then yes, round and then how much it's rounded by. And then this other one, again, uses the same thing. So the-

• 8:42Wes Bos?

  What does round do? Does it give it rounded corners?

• 8:46Scott Tolinski?

  If you, for those of you who are watching on video, and I'll describe it for people who are on audio. If you have an item animating around a clip path using this and you use round and then the rounded percent, the, the thing actually rounds the corner where the other one that doesn't have round just does a hard turn.

• 9:05Wes Bos?

  Oh, okay.

• 9:06Scott Tolinski?

  Hard turn. X, Y, W, H. Who knew? Uh, you want to make a, a square rectangle? This seems like a pretty nice little syntax, honestly. Wes, I also have a follow-up question to this.

• 9:19Wes Bos?

  Okay.

• 9:19Scott Tolinski?

  Which is very funny and very coincidental. What about ray?

• 9:26Wes Bos?

  We both went to the docs and tried to find the most obscure functions in CSS.

• 9:32Scott Tolinski?

  Ray sticks out. I'll tell you that.

• 9:33Wes Bos?

  Ray. I am going to assume this has something to do with the spread and angle of a shape. Most likely because when I've been working in the new CSS radial gradient syntax, there's a lot of like oddities around that as to like, where does it stop? Does it stop at the top right corner or does it, um, do the edges stop at the corners? Or does the, the top right corner stop and the, the, um, the rounding radius go past that? So I, I'm going to guess that it has something to do with that.

• 10:12Scott Tolinski?

  Yeah. I mean, I, I think you're close. Again, the, uh, ray defines an offset path line segment. So it's just a line that, uh, can be animated, referred to as a ray. Ray begins at the offset position and extends in the direction at a specified angle. So basically you're, you're, you're shining something in an angle like a ray of light is the, the answer.

• 10:35Wes Bos?

  Oh, yeah. That's just, you, you're drawing something from one point to another. Uh, but instead of having to calculate the start and end paths, you can simply just say. Go at 150 degrees.

• 10:50Scott Tolinski?

  Yes, and a cool thing about ray that you might not know is that there's some interesting keywords in here like closest corner. So you can say, or furthest corner, you could say, put a ray 100 at 120 degrees and go to the furthest corner of whatever container you're in.

• 11:10Wes Bos?

  Oh, yeah, that so that same syntax is in the radial gradient syntax as well. That's why I was talking about radial gradients. I must have looked this up at some point and was like, huh, that's similar to gradients.

• 11:23Scott Tolinski?

  Yeah, pretty cool.

• 11:25Wes Bos?

  All right. I have a brutal one for you, and I apologize in advance, but I think that this is super interesting. Explain what CSS namespaces do. So I have a style tag or some CSS where I have at namespace Wes URL westboss.com. And then I'm writing some CSS Wes pipe P. That's a selector.

• 11:56Scott Tolinski?

  I have actually looked this up before, and I'm actually pretty bummed out that it's it's blanking on me. Um, man, I mean, it's obviously scoping or narrowing specificity here, but I don't know based on what I mean, based on the namespace, but I don't know why those are special or different. So I don't know. I'm going to say straight up.

• 12:19Wes Bos?

  CSS has, I had no idea that this existed. And I feel like I, I feel like I know all of CSS, you know, I had no idea that this existed. So in your CSS, you can declare named namespaces. And then you you set the URL. I guess that's the the uniqueifier of that. And like the the two most common ones are going to be HTML elements or XML elements and SVG elements. However, you can make your own namespaces in HTML. And when you create elements, You can create an element in a namespace. So in this example here, I've said document.

• 13:02Wes Bos?

  Create element NS namespace. So I'm creating a paragraph tag under the namespace of westboss.com. And that puts some special scoping property namespace on that element. And then later on in my CSS, I'm able to declare that namespace with at namespace. And then I'm able to select all paragraph tags that are within the W S namespace with the pipe selector. I have never in my life seen the pipe selector in CSS.

• 13:34Scott Tolinski?

  Crazy.

• 13:35Wes Bos?

  And it's been in CSS for 11 years.

• 13:39Scott Tolinski?

  Man, that's wild. Uh, yeah, I did. I didn't know that. That's sick.

• 13:44Wes Bos?

  That's I now I'm trying to rack my brain to think like, what would that be useful for? Maybe third-party JavaScript, like maybe you're going into somebody's website and you just simply create and you're creating all the elements and you're injecting them. You could put them all under your own namespace and then only select elements that are within your namespace. But like a lot of these examples that I'm coming up with in my mind can just be solved with a class.

• 14:11Scott Tolinski?

  Yeah, that's what people are saying with like if functions and stuff. Yeah. And if functions are maybe a little bit different, but it is so funny that we do try to shov a lot of things and that could be solved with a class for sure.

• 14:22Wes Bos?

  And I don't know that namespaces can be added without JavaScript either. So that makes it even more difficult.

• 14:31Scott Tolinski?

  Yeah.

• 14:32Wes Bos?

  So that was a weird one, but kind of cool.

• 14:37Scott Tolinski?

  Here is your question. What year was the CSS Paint bug tracker introduced? Uh, or so in Mozilla for Firefox, there's a bug tracker to keep track of new features. What year was that issue opened for CSS Paint? You can also maybe tell us what CSS Paint is.

• 14:59Wes Bos?

  Like CSS Paint is the API for using Houdini. Is that correct?

• 15:04Scott Tolinski?

  That's correct.

• 15:05Wes Bos?

  So CSS Houdini is like the ability. To programmatically add new CSS features where you could introduce like display Scott or something like that. And then in CSS Houdini, you would then register and implement how that works. Now CSS Houdini as a whole hasn't hasn't seen much progress. However, a lot of the features have like made their way into modern CSS. One of them being, I think, super like a super ellipse, the squircle stuff that was initially part of the Houdini API, but it's just been just been put into regular CSS now. So your question

• 15:50Wes Bos?

  is what year was it initially introduced? It's been a long time, at least 2016. I want to say, I feel like 2012 is too long ago, but 2016 seems too recent. I'm going to YOLO this and say 2012.

• 16:13Scott Tolinski?

  2016. You were so close and you should have had it. This is one that was kind of shocking to me that it is. It's like, I just figured with some of these features in Firefox that are taking forever, that they're just not, you know, but they're, they're talking about it still. Like granted, one comment about it every five months or something, but like, man, get a CSS paint Firefox. Like, what are you, what are you doing? Basically, yeah, you're able to define like a JavaScript workload and then in paint, say, use that workload. And then, man, there'd be so many cool things you could do with that.

• 16:47Wes Bos?

  But that's, that's not just Firefox, though. Like the, the Houdini spec has not been finalized at all. And it's, it's still up in the air as to whether or not it will be a thing. Is that, isn't that true?

• 16:59Scott Tolinski?

  The spec for who, I mean, I, I think these are all like Houdini as a whole thing, but we have all these different APIs now that are broken out. So like paint. Yeah. I mean, Safari doesn't have paint either.

• 17:13Wes Bos?

  It's in Chrome.

• 17:15Scott Tolinski?

  Safari has something there. Not really, though.

• 17:18Wes Bos?

  It's, it's still experimental. Like this, this spec has not yet been blessed.

• 17:24Scott Tolinski?

  Bless the spec. Just bless it then. Bless the spec.

• 17:27Wes Bos?

  Bless the spec.

• 17:28Scott Tolinski?

  Yeah.

• 17:29Wes Bos?

  Bless this home and bless the spec. That's all I'm, that's all I need in my life.

• 17:33Scott Tolinski?

  Please.

• 17:34Wes Bos?

  All right. I have one for a brand new compat, what, baseline 2025 API. And this is the CSS print color API. So if I put something called print color adjust economy, or print color adjust exact, if I apply that to an element, what does it do?

• 18:03Scott Tolinski?

  Print color in print styles. I, I would assume this has to do with print styles. Print styles allow you to gain control over your CSS and how it prints. I would assume, based on the name and the context clues, that this allows you to set a color of something only for when it is printing. Obviously, you'd have to be printing in color for that to work.

• 18:30Wes Bos?

  Close. Print color adjust sets what, if anything, the user agent may do to optimize the appearance of an element on the output device. It's interesting how it says output device. Like it doesn't even say, doesn't even say printer, you know? By default, the browser is allowed to make adjustments to an element's appearance. It determines to be necessary and prudent, given the type and capabilities of the output device. So that is, if you are printing in black and white, the browser will try to make some changes so that things have a high enough contrast that you can see it. You remember printing up MapQuest directions back in the day where like, some of the gray text would, would not work. So the, the browser actually does quite a bit with that.

• 19:15Wes Bos?

  And it also does things like it removes background images. However, if you do not want it to remove background images, or you do not want it to make those adjustments, then you turn off what's called economy and you turn on what's called exact.

• 19:30Scott Tolinski?

  Hmm.

• 19:33Wes Bos?

  Weird.

• 19:34Scott Tolinski?

  CSS print.

• 19:35Wes Bos?

  Is a whole rabbit hole. Like you can.

• 19:38Scott Tolinski?

  Dude.

• 19:38Wes Bos?

  You make a whole book with CSS print styles and they just.

• 19:42Scott Tolinski?

  You could have done that in the 90s for sure.

• 19:44Wes Bos?

  Couple of years, you can, you get new CSS print things, which is wild. Like you can do page numbers in CSS printing. You can do inches and points and everything is in CSS print. It's, it's a wild world. Testing it sucks.

• 19:59Scott Tolinski?

  Testing it sucks.

• 20:00Wes Bos?

  The print preview in Chrome, that's not it. I, believe me, I, when I sent my stickers out, I did all of the envelopes with everybody's addresses in CSS print styles. And I went down that rabbit hole and I did a book in it too.

• 20:14Scott Tolinski?

  I was gonna say, you've probably done that more than most. I have not.

• 20:17Wes Bos?

  Unfortunately. Yeah. And the label maker. Yeah. I have done CSS printing way too much.

• 20:23Scott Tolinski?

  I only did it for invoices and stuff.

• 20:25Wes Bos?

  Yeah.

• 20:26Scott Tolinski?

  Okay. What is crossfade and why would you use it over opacity?

• 20:34Wes Bos?

  Crossfade?

• 20:36Scott Tolinski?

  Crossfade. It's a function, by the way. Again, all minor function. So.

• 20:41Wes Bos?

  Why would you use it over opacity?

• 20:44Scott Tolinski?

  The opacity thing's obviously a hint, but I think the name crossfade.

• 20:47Wes Bos?

  Yeah. I'm glad you did that. So like opacity, would you just simply remove the opacity?

• 20:55Wes Bos?

  I'm gonna assume this is, crossfade will allow you to tween between two elements or two things. And opacity would simply just like, like fade it out. But there, there are other ways you might want to change from one thing to another, right? You might want to blend the colors. You may want to use like a custom mix. I guess mix blend mode that also is blending. What else might you want to do?

• 21:23Scott Tolinski?

  Changing the size, that would be just a transform.

• 21:26Wes Bos?

  Yeah, the only thing I can think of is that a crossfade is if you were doing custom blending. Tell me if that's anywhere near.

• 21:32Scott Tolinski?

  So it is not necessarily custom blending. I mean, you're pretty much, you're pretty much on the, you are specifying two things to fade between with a percentage. The reason why you use this is because you can specify two background images in one definition. So you use this on something like background image. You'd say background image crossfade, and then you accept two images, two URL functions, and then a percentage between them. So basically, this would save you from having to have multiple divs stacked on top of each other with different background images, and you could blend them.

• 22:11Scott Tolinski?

  It's, it's actually pretty neat, and you can play with the like, the percentage between them, and it really is just fading one in and fading one out. Uh, it is like seriously just a video style crossfade. But again, allows you to have-

• 22:25Wes Bos?

  There's no blending or, or, or controls over that. It's simply just how much of each one is being-

• 22:31Scott Tolinski?

  Correct, yeah.

• 22:32Wes Bos?

  Blended.

• 22:33Scott Tolinski?

  It's interesting, I've never heard of this.

• 22:34Wes Bos?

  Yeah.

• 22:35Scott Tolinski?

  You can put two images on one thing, yeah.

• 22:37Wes Bos?

  It is currently only in Safari, um, which is a bit of a select, uh, bit of a shocker.

• 22:42Scott Tolinski?

  Well, it's in Chrome behind a flag.

• 22:44Wes Bos?

  Okay, CSS Images Module Level 4. Yeah, it's true, because if you have multiple background images, you sort of give up control over how, how, you can, you can do how they stack. You can give how, how big they are and how they repeat, but you cannot say like, one of these images slightly has a slight opacity.

• 23:05Scott Tolinski?

  Yeah, yeah, it's interesting. It's an interesting property, and it, I did see a note that said Chrome is currently implementing the non prefix version as well, so.

• 23:13Wes Bos?

  Wait, it was added to Chrome in Chrome 17?

• 23:19Scott Tolinski?

  Yeah.

• 23:19Wes Bos?

  So this is not new at all?

• 23:21Scott Tolinski?

  No.

• 23:23Wes Bos?

  What?

• 23:24Scott Tolinski?

  Not new at all, but it's soon it will be new with the non-prefix version. Yeah.

• 23:29Wes Bos?

  It it seems like it was one of those weird ones that Safari put in.

• 23:33Scott Tolinski?

  Yeah.

• 23:33Wes Bos?

  Safari put it in Safari 5 under a webkit. Then Chrome just implemented it. And then Firefox begrudgingly is not letting you do it. That's crazy.

• 23:44Scott Tolinski?

  Firefox, not in Firefox is a common refrain through most things, I think, in this episode at least.

• 23:50Wes Bos?

  All right, we we got one more each?

• 23:52Scott Tolinski?

  Yes.

• 23:53Wes Bos?

  All right. Name three reasons why you might use CSS as @property.

• 24:00Wes Bos?

  So @property, in this case, I've said -- angle. And then you specify syntax inherits an initial value.

• 24:08Scott Tolinski?

  The one, the easy one is the one that everybody always says is that you can animate gradients.

• 24:15Scott Tolinski?

  Because you're able to specify the property. Like, are you looking for specific use cases, like two other things that are like animate gradients? Or just a little bit about the @property?

• 24:25Wes Bos?

  Just a little bit about it. Like, that's one, one feature is that you register the property and then if you change that variable, like on hover, it will then animate or transition that value, whereas previously you wouldn't be able to do that. So like, like you said, you can change the gradient, the gradient angle.

• 24:43Scott Tolinski?

  Yes.

• 24:43Wes Bos?

  And it will animate itself instead of just quickly jumping. That's because you've registered the type.

• 24:48Scott Tolinski?

  Yeah, by registering the type, you can, oh, there's something here with like attribute too, where you can get the value of the attribute, because you know what type it is. I don't know for certain if that's true, but I mean, you're defining the type of it, so therefore you can do calc operations on it that you might not be able to do without that.

• 25:10Scott Tolinski?

  I'm gonna, I'm gonna blank, because I only use @property when I'm finding that I need to. So I've used it before with attribute. I've used it before with gradients, and I've used it before. That's it pretty much.

• 25:21Wes Bos?

  I'm gonna tell you that the other two answers are actually in. The example I've given you.

• 25:27Scott Tolinski?

  An angle, rotation, something about rotation. Did you say something about rotation? I'm not a good listener, so I do not, I don't remember your example.

• 25:34Wes Bos?

  The other, one other benefit is you can choose whether or not that CSS variable is inherited.

• 25:40Scott Tolinski?

  Oh, oh.

• 25:41Wes Bos?

  Which is really nice. Yeah.

• 25:42Scott Tolinski?

  Yeah, and a default value.

• 25:44Wes Bos?

  Yes. And so let's talk about the inherit really quickly. If you set a variable on an element and then you want to then access that variable at a lower level, by default CSS variables just cascade all the way down. So by saying inherit false, when you register the property, it does not explicitly go down, which is really nice because sometimes you always want the default value. And if you do want it to inherit, you simply just say dash dash angle inherit and then it will inherit it from the parent, which is, is really nice. I actually didn't, didn't know that.

• 26:20Scott Tolinski?

  This is about to save my ass right now that you said this because I've been having this, this conundrum with my CSS starter graffiti that I use. And I'm thinking like, oh, I want to be able to make it really nice and easy to specify like certain properties via CSS plugins or via, via variables. But if you have a layout within a layout within a layout or a flex nested, then it's always going to inherit. Boom. This just solved that for me. Thank you, Wes.

• 26:51Wes Bos?

  Exactly. Like another example would be like, like dark or like a color override. If you want to override the color of a card, you might want to just change the border of that card. But then if you put another card inside of it, you don't want all of them to be that color. You want just, just one of them. So you can set the inherit to be false.

• 27:11Scott Tolinski?

  At property.

• 27:11Wes Bos?

  This is great. This is why we like, read the docs, man.

• 27:15Scott Tolinski?

  This is why, well, it's so funny because that's the type of thing that I would have read and been like, okay, when am I going to use this? And then like, I'm sitting here years later being like, I have this problem and it just didn't, didn't connect.

• 27:27Wes Bos?

  Yeah. And then initial value, that's, we talked about that. You can set a default value on it. So.

• 27:33Scott Tolinski?

  Yeah, which you can do without them, but it's nice to have. All right. Last question for you, Wes, and I did unfortunately make this one somewhat tough. List all 10 of the CSS filter functions.

• 27:47Wes Bos?

  Oh, this is a good one. Okay. Uh.

• 27:51Scott Tolinski?

  And folks, yes, so CSS

• 27:53Wes Bos?

  Blur.

• 27:53Scott Tolinski?

  Functions are for adding filters as its name suggests. Yeah, so blur.

• 27:58Wes Bos?

  Hugh.

• 27:59Scott Tolinski?

  You might have to write these down somewhere.

• 28:00Wes Bos?

  Yeah, yeah, let me hold on, give me like a few minutes to think about this.

• 28:04Scott Tolinski?

  And then.

• 28:04Wes Bos?

  Or should or should I like try ramble?

• 28:07Scott Tolinski?

  You can ramble and just write them down somewhere in like a Notion doc. So you can keep track of how many you've said.

• 28:12Wes Bos?

  Okay, so blur, Hugh, rotate, grayscale, uh, contrast.

• 28:18Scott Tolinski?

  Okay, good. You got some of the hardest ones, so you rotate definitely hardest one.

• 28:24Wes Bos?

  I've used Hugh rotate quite a bit, blur, contrast. Um, that's only four, there's 10?

• 28:32Scott Tolinski?

  There's 10.

• 28:33Wes Bos?

  I know.

• 28:33Scott Tolinski?

  But I will say that there are some of these that you have used a bunch before, so. Or at least I've used a bunch, so therefore you probably have.

• 28:40Wes Bos?

  Oh, um, grayscale, contrast. It's not like mixed blend mode is its own thing, so there's no like blending things here.

• 28:49Scott Tolinski?

  Nope, no blend nodes.

• 28:51Wes Bos?

  Blur, Hugh, rotate, grayscale, contrast. So what other, what else would you want to put a filter on? Masking is its own part of CSS, so that's not anything.

• 29:01Scott Tolinski?

  Yeah, maybe think about some more color operations or image kind of operations.

• 29:07Wes Bos?

  Oh, there's like a, like a pixelate one? No, that's image rendering type pixelate. That's that's its own property as well. Think of some more color options. Um, oh, like there's like sepia.

• 29:20Scott Tolinski?

  Sepia.

• 29:22Wes Bos?

  There's. There's Hugh rotate.

• 29:25Scott Tolinski?

  I can't believe you got Hugh rotates and you haven't gotten some.

• 29:27Wes Bos?

  Because I have a really cool demo where I did nested Hugh rotate and it's like mixed with mixed blend modes.

• 29:34Scott Tolinski?

  Do you want some help?

• 29:36Wes Bos?

  Yeah, give me a hint. This is a fun though, I feel like I should know this.

• 29:40Scott Tolinski?

  So sepia was a good, good one.

• 29:42Wes Bos?

  Yeah.

• 29:43Scott Tolinski?

  There's at least four more in that, or there's at least three more in that same kind of realm as sepia.

• 29:51Wes Bos?

  Okay.

• 29:51Scott Tolinski?

  And grayscale. And then there's two that are CSS properties that can be done in a different way.

• 29:57Wes Bos?

  Drop shadow.

• 29:58Scott Tolinski?

  Drop shadow.

• 29:59Wes Bos?

  You can add a drop shadow to an element, which is nice if you have like, um, like cutouts on it, right?

• 30:04Scott Tolinski?

  That's right.

• 30:05Wes Bos?

  You want to do a drop shadow to something that has been masked. That's why I was thinking about masking. Um, and prob- opacity, is that one?

• 30:12Scott Tolinski?

  Opacity, yes. Those are the two CSS properties that can be done.

• 30:16Wes Bos?

  That's, I didn't, I don't think I knew that. Opacity. And then you said there's others that are like a similar vein as sepia?

• 30:23Scott Tolinski?

  Yes. Here, there's one that you're gonna kick yourself on because it's very, uh, frequently used.

• 30:29Wes Bos?

  Blur is the one that I always use.

• 30:31Scott Tolinski?

  Yeah.

• 30:32Wes Bos?

  Blur, hue, rotate, grayscale, contrast, sepia, drop shadow, brightness.

• 30:42Scott Tolinski?

  Brightness. Yes. Brightness.

• 30:46Wes Bos?

  For some reason, I was like, okay, I covered the like, how dark it is with contrast, but contrast and brightness is different.

• 30:52Scott Tolinski?

  Different. So there's two more. You have two more. They're both something that controls the color of things. Um, both are operations that exist on your phone as accessibility settings even.

• 31:07Wes Bos?

  Oh. No, grayscale and contrast are like the accessibility settings. Like, what would you want to do in accessibility, right? You might want to change the contrast. You might want to make something like black and white.

• 31:21Scott Tolinski?

  Yeah, grayscale, grayscale isn't the only way to make something black and white.

• 31:26Wes Bos?

  What? Is there, there's like a muting, like a way to mute colors? What is it? I don't know.

• 31:33Scott Tolinski?

  Desaturate or saturate.

• 31:34Wes Bos?

  Desaturate! Oh, come on!

• 31:36Scott Tolinski?

  Saturate is the function. And then there's one more in an accessibility setting that people used to use before dark mode was a setting on your computer.

• 31:45Wes Bos?

  Oh, invert. Invert, easy. I've used invert before. Man.

• 31:49Scott Tolinski?

  Yes.

• 31:51Wes Bos?

  That's a good one.

• 31:52Scott Tolinski?

  Here they are, folks. Uh, blur, brightness, contrast, drop shadow, grayscale, hue, rotate, invert, opacity, saturate, and sepia. Sepia, as some people say. I personally, I think I probably would not have gotten hue, rotate. I probably would have forgotten about, uh, sepia. And I probably would have forgotten about grayscale. But I, I think that the rest of them, I would have been fine.

• 32:12Wes Bos?

  Can't you use the URL for like, um, SVG filters? I think you can.

• 32:19Scott Tolinski?

  I don't know. Is that something different?

• 32:20Wes Bos?

  Yeah, so SVG elements can declare filters and they're they have like a way more

• 32:28Scott Tolinski?

  Yeah.

• 32:29Wes Bos?

  complex filter. Anytime you see somebody doing like really cool stuff and you're like, how the hell are they rendering that?

• 32:34Scott Tolinski?

  Yeah.

• 32:35Wes Bos?

  They're usually opting out to SVG to define the filter and then you can reference it with URL. So you want a bonus question?

• 32:44Scott Tolinski?

  Bonus.

• 32:45Wes Bos?

  It's it's in the same vein as your last one. Name five font properties aside from color, size, family. Yeah, I'll I'll give you the we're taking those those three easy ones out. So five font properties.

• 33:03Scott Tolinski?

  So font dash. Hyphen something?

• 33:05Wes Bos?

  Yeah, font dash something.

• 33:08Scott Tolinski?

  Font, family, font, style.

• 33:11Wes Bos?

  Styles one, good.

• 33:12Scott Tolinski?

  Oh, OK. So sorry. I thought you said that one. So.

• 33:14Wes Bos?

  I said I said no size, color or fam- family.

• 33:17Scott Tolinski?

  OK, font, style.

• 33:20Wes Bos?

  That's an easy one. OK.

• 33:21Scott Tolinski?

  Font attributes.

• 33:23Wes Bos?

  There's nine font variable. There's there's nine properties for variable fonts.

• 33:29Scott Tolinski?

  Oh, is there? There's nine for variable fonts. I always just use the one with the string property. Um, font, weight.

• 33:39Wes Bos?

  Maybe not just for variable fonts, but some fonts have variations.

• 33:44Scott Tolinski?

  Font weight.

• 33:46Wes Bos?

  Font weight. Yep, that's one.

• 33:48Scott Tolinski?

  Font style, font weight, font size, font family, font. Hmm.

• 33:57Scott Tolinski?

  Oh, there's so many for defining which like characters you get to use. You can swap out certain characters. Hmm, I don't know what those are called. I don't know. There's three more. I don't know. I I'm blanking on them because I I use them all the time. Yeah.

• 34:12Wes Bos?

  Uh, font feature settings, font kerning, font language override, font optical sizing, palette.

• 34:18Wes Bos?

  Smooth, stretch, synthesis.

• 34:20Scott Tolinski?

  I've never gotten these.

• 34:22Wes Bos?

  Font synthesis, small caps, font synthesis, style and weight, font variant, that's the one you were looking for there. And then font variant has alternates, caps, East Asian emoji ligatures, numeric and position. So I think font variant numeric is the one where if you have numbers in like a countdown clock and you don't, some numbers are not the same width, you often want the font, the numbers to be all of the exact same size so that your, your countdown clock is not getting like every time you have a one, it gets skinny and every time you have a zero, it gets wider.

• 34:56Scott Tolinski?

  Man, font synthesis is a shorthand property that lets you specify whether or not the browser may synthesize the bold, italic, small cap, subscript types when they're missing. Oh, that is cool.

• 35:09Wes Bos?

  Oh, it's like the fake bold and fake italic.

• 35:11Scott Tolinski?

  For people who don't know, if you're, if you're loading up a font and it doesn't have a bolded version of that font loaded, the browser will try to just add extras.

• 35:20Wes Bos?

  It just tilts them.

• 35:20Scott Tolinski?

  To it. Yeah. And, or yeah, for italics, it just tilts them and that often looks like dog shit. So this prevents the browser from doing that. Interesting.

• 35:31Wes Bos?

  What about font palette? Do you know what that does?

• 35:34Scott Tolinski?

  Couldn't tell you. Couldn't possibly tell you. Font palette.

• 35:38Wes Bos?

  It's for, oh, this is another weird area of the internet is that some fonts are color fonts.

• 35:44Scott Tolinski?

  Yeah.

• 35:45Wes Bos?

  That's so weird, hey?

• 35:47Scott Tolinski?

  That's weird.

• 35:48Wes Bos?

  So the font palette CSS property allows specifying one of the many palettes contained in a color font that a user agent may use for that font. Users can override the values in a palette or create a new palette using the font palette values at rule.

• 36:05Scott Tolinski?

  Okay. Well, Firefox has that one. Thank, thank you Firefox for adding that and not any of the other useful stuff that we actually want.

• 36:10Wes Bos?

  That's 2022. It's been in all of them. Color fonts. What a weird, what a weird, but it makes sense because if you want like a font to have like different colors on like, like the example they have is like 3D text. You know, and you want one side to be a little darker than the other. You don't have to go out to 3D canvas for that. You can simply use a font that has multiple colors. And wasn't there like a syntax highlighting? That popped up the other day as well. I think it did. Yeah, this. FBSH, font with built in syntax highlighting.

• 36:49Wes Bos?

  So you can simply just type.

• 36:50Scott Tolinski?

  Yes, yes, yes.

• 36:51Wes Bos?

  Code. And I don't know how this works, but it's a color font that somehow has every single possible, like, red jacks in it, like, an entire AST tree. And then it will color your font.

• 37:07Scott Tolinski?

  That was a lot of fun. Not only did I get totally stumped on these, Wes, but I feel like I learned so much. And not only did I learn something walking away from this, I wasn't expecting to, because of course, I know everything about CSS. But no, I wasn't expecting to, but I also, like, I'm gonna go implement that app property thing, like, today. That solves a problem I directly have. So I hope you all learn something, too. Let us know if you want to see any more of these stumped episodes on various topics. We love to do these. So thanks so much for watching us, folks. We'll catch you later. Peace. Peace.