957: CSS: Advanced and Obscure

Welcome to Syntax Today. We've 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 an interview or they are 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 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 I'm very excited because CSS functions is a wild and wacky world. So no, man, I'm doing great. Yeah, just 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.

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 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 x y w h and ray are both valid so those are your um little slip up ones um oh man

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? Vector. Vector. Hmm. Hmm. I'm going to say no as well. All right. So you're saying only X, Y, W, H and Ray are valid. And you're saying super lips and vector are incorrect. Yes. I'm not confident, though. Close. Super lips 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. 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 I didn't use super. I didn't use super ellipse. I used corner shape. So yeah, I didn't know. Corner shape, squirkle, 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. Yeah. But if you want to 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 X, Y, W, H? Well, 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 DVH, DVMIN... 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. 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. There are 108 functions in CSS.

crazy right a lot 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 forward slash 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.io forward slash syntax. Again, we've been using this tool for a long time and it totally rules. All right. All right, next question we have for you. In CSS ScrollSnap, we have the property ScrollSnapType. 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 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 yeah uh 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 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 like obnoxious.

scroll snapping like it's not a carousel um 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. Man, scroll snap. Super underrated. Glad you threw in a scroll snap question. We saw it on the new Apple website. 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 JS Nation last year. Man, 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. And I already gave you a little example there. I already know that XYWH 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 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 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 uh 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 um so

This first one, 20 pixels, 20 pixels, 100% of the width, 100% of the height, but it's going over 20 pixels. Isn't that maybe what you said? I think you got it 100% right. I said it was from the center, which doesn't make any sense. I think about the fact that it has 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 X, what does round do? Does it give it rounded corners?

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 thing actually rounds. the corner where the other one that doesn't have round just does a hard turn. Oh, okay. Hard turn. XYWH. Who knew? You want to make a square rectangle? This seems like a pretty nice little syntax, honestly.

Wes, I also have a follow up question to this, 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 stop? Does it stop at the top right corner or does it? did the edges stop at the corners or does the top right corner stop and 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 think you're close. Again, Ray defines an offset path line segment. So it's just a line that 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 shining something in an angle like a ray of light is the answer. Oh. Yeah, that's just you're drawing something from one point to another. But instead of having to calculate the start and end paths, you can simply just say, go at 150 degrees.

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. Oh, yeah. 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, oh, that's similar to gradients. Yeah, pretty cool.

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, wesboss.com. And then I'm writing some CSS, Wes, pipe, P. That's a selector. I have actually looked this up before, and I'm actually pretty bummed out that 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. 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 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.createElementNS 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 Wes namespace with the pipe selector. I have never in my life seen the pipe selector in CSS. Crazy. And it's been in CSS for 11 years. Man, that's wild. Yeah, I didn't know that. That's sick. 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 the class. 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 shop a lot of things and that could be solved with a class for sure. And 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 weird one but kind of cool here is your question What year was the CSS Paint bug tracker introduced? 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 as well. CSS Paint is the API for you. using Houdini. Is that correct? That's correct, yes. 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 seen much progress. However, a lot of the features have made their way into modern CSS. One of them being, I think, like a super ellipse. The Squircle stuff, that was initially part of the Houdini API, but has just been put into regular CSS now. So your question is, what year was it initially introduced? It's been a long time. At least 2016. Houdini. 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. 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 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 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 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 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 uh 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 still experimental. This spec has not yet been blessed. Bless the spec. Just bless it then. Bless the spec. Bless the spec. Yes. Bless this home and bless this spec. That's all I need in my life. Please. All right. I have one for a brand new Compat, what? Baseline 2025. 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 would assume this has to do with print styles. Print styles allow you to gain control of 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. It doesn't even say. It 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 out MapQuest directions back in the day where like some of the gray text would not work. So 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. weird css print is 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 that in the 90s a couple years you can you get new css print

things, which is wild. You can do page numbers in CSS printing. You can do inches and points and everything is in CSS print. It's a wild world. Testing, it sucks. Don't tell me you use the print preview in Chrome. That's not it. Believe me, 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. I was going to say, you've probably done that.

more than most i have unfortunately 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. Why would you use it over opacity? The opacity thing's obviously a hint, but I think the name crossed. Yeah, I'm glad you did that. So like opacity, would you just simply remove the opacity?

I'm going to 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 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? 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. It is not necessarily custom blending. I mean, you're pretty much on. 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.

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, there's no blending or controls over that. It's simply just how much of each one is being correct. Yeah, I did. It's interesting. I've never heard of this. You couldn't put two images on one thing. It is currently only in Safari, which is a bit of a shocker. Well, it's in Chrome behind a flag. Okay.

CSS images module level four. 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 slight opacity Yeah. Yeah, it's interesting. It's an interesting property. And I did see a note that said Chrome is currently implementing the non-prefixed version as well. Wait, it was added to Chrome in Chrome 17.

So this is not new at all? No. What? Not new at all. But soon it will be new with the non-prefixed version. Yeah. It seems like it was one of those weird ones that Safari put in. Safari put it in Safari 5 under a web kit. Then Chrome just implemented it. And then Firefox begrudgingly is not letting you do it. That's crazy. Yeah, Firefox, not in Firefox, is a common refrain through most things, I think, in this episode at least. All right. We got one more each? Yes.

All right. 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 specify syntax inherits an 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?

two other things that are like anime gradients or just a little bit about the app. 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, um, it will then. animate or transition that value, whereas previously you wouldn't be able to do that. So like you said, you can change the gradient angle 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 pull. There's something here with like attribute to 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 you're defining the type of it. So therefore. Or you can do calc operations on it that you might not be able to do without that. I'm going to 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. I'm going to 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 not a good listener. So I do not. I don't remember your example. So one other benefit is you can choose whether or not that CSS variable is inherited, which is really nice. Yeah. Yeah. And a default value. Yes.

And so let's talk about the inherent 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 really nice. I actually didn't know that. This is about to save my ass right now that you said this. Because I've been having 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. Exactly. Like another example would be like. like dark or like a color over right 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. This is great. This is why we read the docs, man. 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 I'm sitting here years later being like, I have this problem and it just didn't connect. Yeah. And then...

Initial value. We talked about that. You can set a default value on it. 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. Oh, this is a good one. Okay. Filter. Yes. So CSS filter functions are for adding filters, as its name suggests. Yes. So blur.

You might have to write these down somewhere. Yeah. Yeah. Let me hold it. Give me like a few minutes to think about this. And then or should or should I like try a 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. Okay, 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 know. But I will say that there are some of these that you have used a bunch before. Or at least I've used a bunch. So therefore you probably have. Oh, um, 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, hue, rotate, grayscale, contrast. So what else would you want to put a filter on? Masking is its own part of CSS, so that's not anything to do. 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, there's like sepia. Sepia. There's hue rotate. I can't believe you got hue rotate. I have a really cool demo where I did nested hue rotate. 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, sepia was a good one. 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 to an element, which is nice if you have like cutouts on it, right? That's right. You want to do a drop shadow to something that has been masked. That's why I was thinking about masking.

And opacity, is 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 sepia. Yes. There's one that you're going to 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. Brightness. Brightness. Yes. Brightness. For some reason, I was like, OK, 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 want to do in accessibility, right? You might want to change the contrast. You might want to make something black and white. Yeah, grayscale isn't the only way to make something black and white. What? 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. Yes. That's a good one. Here they are, folks. 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 HuRotate. I probably would have forgotten about Sepia. And I probably would have forgotten about Grayscale. But 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.

they have like a way more complex filter. Anytime you see somebody doing like really cool stuff and 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 want a bonus question? Bonus. It's in the same vein as your last one. Name five font properties aside from color, size, family. And yeah, I'll give you, we're taking those three easy ones out. So five.

font properties font hyphen something yeah font dash something font family font style styles one good oh okay so sorry i thought you said that one so i said i said no size color or family family okay uh 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'm blanking on them because I use them all the time. Yeah. Font feature settings, font kerning, font language override, font optical sizing, palette, smooth stretch, synthesis. I've never gotten these. 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 zero it gets wider 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. Oh, that's like the fake bold and fake italic. Yeah. For people who don't know, 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 extra text 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. 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, is that some fonts are color fonts. Yeah. That's so weird, hey? That's weird. 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 you, Firefox, for adding that and not any of the other useful stuff that we actually want. 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 uh F-B-S-H, font with built-in syntax highlighting. So you can simply just type 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 uh it will color your font

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 going to go implement that app property thing like today.

That solves a problem I directly have. So I hope you all learned 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.