CSS: Advanced and Obscure

Welcome to Syntaxuty. 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 an interview, or they are just obscure, obtuse parts of the CSS specification Wes you're gonna learn a thing or two along the way and have fun at our expense. What's up, Scott? How are you doing today?

Oh, hey, man. I'm doing great. I'm just trying to function. All of my questions are CSS function related. So Oh, boy. 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 gonna 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 on Syntax on YouTube. Alright. Let's get into it. Alright. My first question I have for you is which of the following are valid CSS shape functions?

Because they're commonly used in clip path, offset path, and shape outside. So we have Functions. Okay. Super ellipse, x y w h, ray, and vector.

Which of these are valid?

You're gonna tell me how many of them are valid, or I just have to know? Okay. So I know XYW h and ray are both valid. So those are your, little slip up ones.

Oh, man. Shoot. X, y, w, h, and ray are valid. And then super ellipse, I'm gonna say no. And then what was the other one? Vector.

Vector.

I'm gonna say no as well.

Alright. So you're saying only x, y, w h, and ray are valid, and you're saying super ellipse and vector are incorrect.

Yes. I'm not confident, though.

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 it's allowing us to do is to specify, 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 Yeah. But it Wes I didn't use super I didn't use super ellipse. I used corner shape. So yeah. I I didn't know squircle

border radius 50. But if you go Yeah. If you go custom so soup the word squircle is, like, just a preset of like, it's a common thing that you would want. Right? Yeah. But if you wanna go custom squircle, you use the super ellipse function.

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. Yeah. Vector is not a CSS function. But what is what is x y w h? Well, don't don't look it up. Don't look it up. Don't look it up. Because 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 MDN, how many functions are there in CSS? 38, 58, 88, or 108?

There's a lot more than you think, simply because, like, the units themselves, like, d v h, d v min, and then they all have their ESLint equivalents, then they all have a max and min equivalent.

So, like, just specifying widths and heights only, there's probably at least Wes.

And that that has we're not even talking about, like, x, y, w h, super ellipse and stuff. So I'm gonna say there is 88.

There are 108 functions in CSS.

Crazy. Right? That's a lot.

I saw the list, and I was like, that's a lot. I should count these. And then, 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 century.i0/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 century.i0/syntax.

Again, we've been using this tool for a long time, and it totally rules. Alright.

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

Scroll

snap type.

Scroll snap type. Okay.

So mandatory will force to the front or back or whatever the snap section JS, will force it.

Proximity will pick the closest between the start and end, and none won't snap. I don't Node. Honestly, I've never used this. I've used scroll snap. I mean, I've never used this to change this, I should say. Yeah.

So mandatory is correct. It will always snap to the closest snapping point, you know, start or end of an element or whatever you've you've set. 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 obnoxious scroll snapping. Like, it's not a carousel.

Mhmm. 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 gonna snap for you.

Pants. Girl snap, super underrated. Glad you threw in a girl snap Wes. We saw it on the new Apple website. Their all of their carousels are simply just using overflow scroll and scroll snap, and you get, like, carousels for free. I know. I did a post on that at 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.

X y w h. So I already know a little a little, example there. 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 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, and then the round is simply just that it will add rounded corners.

So you're 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.

Okay. And you can use these rectangular paths and clip paths or offset paths or whatever. You can see this first one, it 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, twenty 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 a 100%. Right? I said it was from the center, which doesn't make any sense now that I think about the fact that it has x Node from the center. No. I 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 x y y round do? Does it give it rounded corners? 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. Hard turn. Okay. Hard turn. X y w h, who knew? You wanna make a a square rectangle? This seems like a pretty nice little syntax, honestly.

Wes, I also have a follow-up question to this Okay. Which is very funny and very coincidental.

What about Ray?

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

Ray sticks out. I'll tell you that. 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 Scott? Does it stop at the top right corner, or does it, did the edges stop at the corners, or does the the top right corner stop and they the, the rounding radius go past that? So I I'm going to guess that it has something to do with that. Yeah. I mean, I I think you're close. Again, the,

ray defines an offset path line segment. So it's just a line that Sanity 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. Oh, yeah. That's just you you're drawing something from one point to another. That is the set of to calculate the start and end paths, you can simply just say, go at a 150 degrees.

Yes. And the 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 a 100 at a 120 degrees and go to the furthest corner

of whatever container you're in. Oh, yeah. That so that same syntax is in the radial gradient syntax as well. That's why I was Okay. Radial gradient. Talking about radial gradients. Because I must have looked this up at some ESLint, and and it was like, oh, that's similar to gradients.

Yeah. Pretty cool.

Alright.

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, wesboss.com, and then I'm writing some CSS, wes pnpm p. That's a selector.

I have actually looked this up before, and I'm actually pretty bummed out that it's it's blanking on me.

Man, I mean, it's obviously scoping or or, narrowing specificity here, but I don't know based on what. I mean, based on the Node space, but I don't know why those are special or different. So I don't know. I'm gonna say straight up.

CSS has I had no idea that this existed, and I feel like I I feel like I know all of CSS.

You know? Yeah. 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 unique of fire of that. And, like, the the two most common ones are gonna 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 dot create element n s namespace.

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

Crazy. And it's been in CSS for eleven years.

Man, that's wild.

Yeah. I did I didn't know that. That's sick. That's I now I'm I'm trying to rack my brain to think, like, what would that be useful for? Maybe Wes. Win. JavaScript.

Like, maybe you're going into somebody's website, and you just simply create and you 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 within my mind can just be solved with the class. Yeah. Sometimes it's That's what people are saying, like, if functions and stuff. Yeah. And and and if functions are maybe a little bit different, but it is so funny that we do try to shove a lot of things, and that could be solved with a class for sure. And I I don't know that namespaces can be added without

JavaScript either, so that makes it even more difficult.

Yeah.

So that was a a a a a weird one, but, kinda cool.

Here is your question.

What year was the CSS Paint bug tracker introduced, or so in 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 as well. CSS Paint is the API for using Houdini. Is is that correct? That's correct. Yes. So CSS Houdini JS, 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 JS 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 Vercel stuff, that was initially part of the Houdini API, but has just been just been put into regular CSS now.

So your question JS, what year was it initially introduced? It it's been a long time.

At least 2016.

Houdini. I wanna say I feel like 2012 is too long ago, but 2016 seems too recent.

I'm gonna YOLO this and say 2012.

2016.

You Yarn so close, and you shoulda 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 Node 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 worklet, and then in Paint, say use that worklet. And then, man, there'd be so many cool things you could do with that. 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 is that true?

The spec for hoo I mean, I I think these are all, like, Houdini as a whole thing, but we have all these different APIs now that are are broken out.

So, like, Paint yeah. I mean, Safari doesn't have paint either. It's in chrome.

Safari has something there. Not really, though. It's in a it's still experimental. Like, this this spec has not yet been blessed.

Bless this spec. Just bless it then. Bless Wes spec.

Spec. Yes. Bless this home and bless this spec. That's all I'm that's all I need in my life. Please.

Alright. I have one for a brand new compact what? Baseline twenty twenty five 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? Print color

in print styles. I I would assume this has to do with print styles. Yep.

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.

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 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. Do you remember printing out 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, 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.

Damn.

Print styles. Yeah.

A whole rabbit hole. Like, you can Dude. You make a whole book with with CSS print styles, and they just You could have done it in the nineties. For a couple Yarn, 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 and points, and everything is in CSS print. It's it's a wild world. ESLint, it sucks.

Testing, it sucks. Use the the print preview in Chrome. That's not it. I believe me, I've 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 problem too. I was gonna say you've probably done that more than most. I have not. Uh-huh. Yeah. And the label maker. Yeah. I've I've done CSS printing way too much. I only did it for invoices and stuff. Yeah.

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

Crossfade.

Crossfade.

It's a function, by the way. Again, all minor functions. So Why would you use it over opacity? The opacity thing's obviously a hint, but I think the name crossfade I'm glad you did that.

So, like, opacity, would you just simply remove the opacity? I'm Scott 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 wanna change from one thing to another. Right? You might wanna 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 wanna do? Changing the size, that would be just a transform. 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. 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.

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.

It is, like, seriously just a video style crossfade. But, again, that's it. There's no blending or or or controls over that. It's simply just how much of each one is being Correct. Yeah. Blended.

It's interesting. I've never heard of this. Yeah. You couldn't put two images on one thing. Yeah. It is currently only in Safari,

which is a bit of a select a bit of a shocker. Chrome behind a flag. Okay. CSS images module level four. Yeah. It's true because if well, if you have multiple background images, you Scott 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.

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 prefixed version as well.

So Wait. It was added to Chrome in Chrome 17.

Yeah. So this is not new at all? No.

What? Not new at all. But as soon it will be new with the Node in Firefox. Version. Yeah. It it seems like it was one of those weird ones that Safari put in. Yeah. Safari put it in Safari five under a WebKit, then Chrome just implemented it. And then Firefox begrudgingly

is not letting you do it. That's crazy. Firefox not in Firefox is a common refrain through most things, I think,

in this episode at least. Alright. What do we got? One more each? Yes.

Alright.

Name three reasons why you might use CSS's at property.

So at property, in this case, I've said dash dash angle.

And then you you specify syntax, inherits, and initial value.

The one the easy one is the one that everybody always says is that you can animate gradients 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 the app property? Little bit about it. Like, that's one Node feature is that you register the property, and then if you change that variable,

like, on hover Mhmm. 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 Yes. And it will animate itself instead of just quickly jumping. That's because you've registered the type.

Yeah. By registering the type, you can 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 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.

I'm gonna I'm gonna blank because I only use that 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. I'm gonna tell you that the other two answers are actually in the example I've given you. An angle, rotation, something about rotation. Did you say something about rotation? I'm I'm not a good listener. So I do not I don't remember your example. The other one other benefit is you can choose whether or not that CSS variable is inherited Oh. Which is really nice. Yeah. Yeah. And a default value.

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. 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 wanna be able to make it really nice and easy to specify, like, certain properties via CSS plug ins or via via variables.

But if you have a layout within a layout within a layout or a Nested. Or a flex nested, then it's always gonna inherit.

Boom. This just solved that for me. Thank you, Wes. Exactly. Like, another example would be, like like, dark or, like, a color override. If you wanna override the color of a card, you might wanna 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.

At process This is great. This is why we, like gonna use that. The docs, man.

This is why Well, it's it's so funny because that's the type of thing that I would have read and been like, okay. When am I gonna 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.

Yeah.

And then initial value. That's we we talked about that. You can set a default value on it. So Yeah. Handy. Which you can do without them, but it's nice to have. Alright.

Last question for you, Wes, and I did, unfortunately, make this one somewhat tough. List all 10 of the CSS filter functions.

Oh, this is a good one.

Okay.

Filter And in folks yes. So CSS filter functions are for adding filters as it as its name suggests.

Yeah. So blur Hue blurb. Write these down somewhere. Yeah. Yeah. Let me hold on. Give me, like, a few minutes to think about this. And then or should or should I do, like, try ramble?

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. Okay. So blur, hue, rotate,

grayscale, contrast.

K. Good. You got some of the hardest ones. So hue, rotate, definitely hardest one.

I've used hue, rotate quite a bit. Blur, contrast.

That's only four. There's 10?

There's 10. I Node. 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 Oh,

grayscale contrast.

It's not like, mixed blend mode is its own thing. So there's no, like, blending things here. Nope. No blend modes.

Blur, grayscale contrast.

So what other what else would you wanna put a filter on? Masking is its own part of CSS, so that's not anything new. Maybe think about some more color operations

or image kind of operations.

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.

Oh, like, there's, like, sepia.

Sepia.

Five. There's hue rotate.

I can't believe you got hue rotate. You haven't got hue rotate. Because

I have a really cool demo where I did nested hue rotate, and it's, like, mixed with, mixed blend modes. Do you want some help? Yeah. Give me a hint. This is a fun, though. I feel like I should know this.

So CSS sepia was a good good one. Yeah. There's at least four more in that or there's at least three more in that same kind of realm as sepia Okay. And grayscale.

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

Drop shadow. Add a drop shadow to an element, which is nice if you have, like, like, cutouts on it. Right? That's right. You you wanna do a drop shadow to something that has been masked. That's why I was thinking about masking.

And Sanity JS that one? Opacity. Yes. Those are the two CSS properties that can be done. 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 CPM?

Yes. There's one that you're gonna kick yourself on because it's very,

frequently used. Blur is the one that I always use.

Yeah.

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

Bright brightness.

Brightness.

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

Different. So there's two more. You have two more. They're both something that controls the color of things.

Both are operations that exist on your phone as accessibility settings even.

Oh, no. Grayscale and contrast are like the accessibility settings. Like, what would you wanna do in accessibility? Right? You might wanna change the contrast. You might want to make something, like, black and white,

and that usually Grayscale isn't the only way to make something black and white. What? Is there, like, there's, like, a muting like,

a way to mute colors? What is it? I don't know. Desaturate or saturate. Desaturate.

Oh, come on. 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.

Oh, invert.

Invert. Easy.

I've used invert before. Man, Wes

that's a good one. Here they are, folks.

Blur, brightness, contrast, drop shadow, grayscale, hue rotate, invert, Sanity, saturate, and sepia or sepia, some people say. I, personally, I think I probably would not have gotten hue rotate. I probably would have forgotten about, sepia, and I probably would have forgotten about grayscale. But I I think that the rest of them, I would have been fine. Can't you use the URL

for, like, SVG filters? I think you can.

I don't know. Is that something different? Yeah. So,

SVG elements can declare filters, and they're they have, like, a way more Yeah. Complex filter. Anytime you see somebody doing, like, really cool stuff, you're like, how the hell are they rendering that? Yeah. They're usually opting out to SVG to define the filter, and then you can reference it with URL. So you you want a bonus question? Bonus. It's it's it's ESLint 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. So font hyphen something? Yeah. Font dash something.

Font family, font style.

Styles one. Good. Oh, okay. So sorry. I thought you'd said that one. So I said I said no size, color, or fam family.

Okay.

Font, style That's an easy one. Okay.

Font attributes.

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

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

Font,

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

Font weight? Font weight. Yep. That's one. Font style, font weight, font size, font family, font.

Oh, there's so many for defining which, like, characters you get to use. You can swap out certain characters.

I don't know what those are called. I don't know. There's three more. I don't know. I I'm I'm blanking on them because I I use them all the time. Yeah.

Font feature settings, font kerning Yes. Font language override, font optical sizing, palette Jesus. Smooth stretch, synthesis I've never gotten these.

Font synthesis small caps, font synthesis style and weight, font ESLint. That's the one you're looking at there. Variant.

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 it gets ESLint, and every time you hit Deno, it gets wider. Man, font synthesis is a shorthand property that lets you specify whether or not the browser may synthesize

the bold italics small cap subscript types when they're missing.

Oh, that is cool. Oh, it's like the fake bold and fake italic. 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 It just tilts them. To it. Yeah. Yeah. And or, yeah, for italics, it just tilts them, and that dawson looks like dog shit. So, this prevents the browser from doing that. Interesting.

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

Couldn't tell you. Couldn't possibly tell you font

palette. It's for oh, this is another weird area of the Internet JS that some fonts are color fonts. Yeah. Have you that that's so weird. Hey? That's weird. 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.

Okay. Well, Firefox has that one. Thank thank you, Firefox, for adding that and not any of the other useful stuff that we actually do. '22, 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 the example they have is, like, three d text, you know, and you want one side to be a little darker than the other. You don't have to go out to three d canvas for that. You can simply use a font that has multiple colors. And there wasn't there, like, a syntax highlighting that popped up the other day as well? I think it did. Yeah. This, f b s h, font with built in syntax highlighting.

So you can simply just type Yes. Yes. Yes. Code. And I don't know how this works, but it's a color font that somehow has every single possible, like, regex in it, like an entire AST tree, and then it, it will color your font.

That was a lot of fun. Not only did I get totally stumped on these, Wes, but I I feel like I learned so much. And not only did I I learned something walking away from this, I wasn't expecting to because, of course, I know everything about CSS. But no. I I I wasn't expecting to, but I also, like, I'm gonna go implement that app property thing, like, today. That that solves a problem I directly have. So I hope you all learned something too. Let us know if you wanna 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.