957: CSS: Advanced and Obscure  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 957: CSS: Advanced and Obscure - Category: #podcasts - URL: https://share.snipd.com/episode/b3065879-d0a2-4dd9-a466-38d7f07f8fff ## Document Notes ## Highlights - **CSS Shape Functions Are Rich** - CSS has a surprising number of built-in shape functions beyond the familiar ones like ray and xywh. - Wes and Scott highlight super-ellipse (squircle) support and obscure functions that expand shape control. Transcript: Wes Bos CSS shape functions? These are commonly used in ClipPath, OffsetPath and ShapeOutside. So we have- Functions, okay. Super ellipse. Scott Tolinski 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 no no 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 gonna say no and then what was the other one vector vector hmm i'm gonna say no as well all right so you're saying only x y wh and ray Wes Bos 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 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 was i didn't use squircles i didn't use super ellipse i used corner shape so yeah i didn't know squircle border Radius 50 but if you go yeah if you go custom so super uh 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. Scott Tolinski Yeah, interesting. Because 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. Wes Bos Yeah. Vector is not a CSS function. But what is what is X, Y, ([Time 0:01:00](https://share.snipd.com/snip/b6ba43b9-a171-41c9-8e89-9b1ab114656e)) - **CSS Contains Over 100 Functions** - There are far more CSS functions than most developers expect, spanning layout, units, and image ops. - Scott and Wes cite MDN's count of 108 CSS functions to illustrate this breadth. Transcript: Scott Tolinski So your first question is, according to MDN, how many functions are there in CSS? Wes Bos 38, 58, 88, or 108? There's a lot more than you think, simply because the units themselves, like DVH, DVMIN, 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 wh super ellipse and stuff so i'm gonna say there is 88 there Scott Tolinski Are 108 functions in css crazy right a lot i ([Time 0:03:20](https://share.snipd.com/snip/f8128b3e-6c85-4a30-9b86-84c2decec270)) - **Choose Scroll Snap Mode Intentionally** - Use scroll-snap-type: mandatory when you want the viewport to always land on defined snap points. - Use proximity to let the browser decide when a near-snap should trigger and avoid obnoxious snapping. Transcript: Wes Bos In CSS ScrollSnap, we have the property ScrollSnapType. There are three properties, none, mandatory, and proximity. Scott Tolinski Explain what each of these does. ScrollSnapType. ScrollSnapType. Okay. 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. Wes Bos 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 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 like an 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. ([Time 0:04:49](https://share.snipd.com/snip/78f0423f-7bca-4a4a-b353-37d67480bf8f)) - **xywh() Creates Rectangular Paths** - The xywh() function defines rectangular paths using x, y, width, and height for clip-path and offset-path. - It supports an optional round parameter to create rounded corners on the path. Transcript: Scott Tolinski What does, or dust, what does the xywh function do? Same minds think alike. Yes. Xywh. And I already gave you a little example there. Wes Bos 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 in the right in the middle, there's a round 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. Scott Tolinski So you're close. It is defining 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 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 Uh 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. Wes Bos I said it was from the center, which doesn't make any sense now. I think about the fact that it has XY. Scott 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 X ([Time 0:06:40](https://share.snipd.com/snip/10e51508-743a-4386-9b52-ff46fdc1059a)) - **ray() Defines Directional Offset Paths** - ray() defines a line-like offset path that starts at an origin and extends at a specified angle. - Keywords like closest-corner and furthest-corner let rays target container corners automatically. Transcript: Wes Bos What about Ray? We both 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, the top right corner stop and the the the rounding radius go past that? So I I'm going to guess that it has something to do with that. Scott Tolinski Yeah, I mean, I think you're close again. The 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. Wes Bos 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. Scott Tolinski 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 ([Time 0:09:22](https://share.snipd.com/snip/4acf0d28-d4b8-4534-92d1-16437d613026)) - **CSS Namespaces Provide Element Scoping** - CSS namespaces let you declare custom XML/SVG/HTML namespaces and target them with the pipe selector. - This enables scoping injected elements under a unique namespace instead of relying only on classes. Transcript: Wes Bos 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. Scott Tolinski I have actually looked this up before, and I'm actually pretty bummed out that it's blanking on me. Man, I mean, it's obviously scoping or or uh 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 gonna say straight up css has i had no idea that this existed. Wes Bos 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 set the URL. I guess that's the uniqueifier of that. And like 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.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 Wes namespace with the pipe selector. I have never in my life seen the pipe selector in CSS. ([Time 0:11:35](https://share.snipd.com/snip/f52936d0-0ed2-44c8-b532-f9f2c865562e)) - **Houdini's Paint API Took Years** - Scott and Wes recall the long, slow progress of Houdini and CSS Paint in browsers. - They note Paint's promise for JavaScript worklets but lament its slow adoption and unfinished spec status. Transcript: Scott Tolinski Is your question what year was the css bug tracker introduced? 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. Wes Bos Like CSS Paint is the API for using Houdini. Is that correct? Scott Tolinski That's correct, yes. Wes 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 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 just been put into regular css now um so your question is what year was it initially introduced it 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. Scott Tolinski 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 doing? Basically, yeah, you're able to define like a JavaScript worklet and then in Paint, say, use that worklet. Wes Bos And then, 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 Scott Tolinski 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 an it's still experimental like this this Wes Bos Spec has not yet been blessed. Scott Tolinski Bless this spec. Just bless it then. ([Time 0:14:38](https://share.snipd.com/snip/39f4a3b3-0de4-494c-8d92-f87dc4f84dc9)) - **Control Browser Color Adjustments For Print** - Use print-color-adjust: exact when you want browsers to preserve colors and backgrounds for print output. - Use economy to allow the user agent to optimize appearance for the output device (e.g., black-and-white printers). Transcript: Wes Bos 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. Scott Tolinski 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. Wes 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. It doesn't even say printer. 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 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 Scott Tolinski Css ([Time 0:17:43](https://share.snipd.com/snip/b9d6ff84-a815-4feb-a685-0c6aefef0169)) - **cross-fade() For Two-Image Background Transitions** - cross-fade() blends two images into one background-image and controls the fade percentage between them. - It avoids extra DOM elements and simplifies image crossfades, though it lacks advanced blending modes. Transcript: Wes Bos So like opacity would you just simply remove the opacity i'm not 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 are 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. Scott Tolinski So 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. 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 um 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 there's no Blending or or controls over that it's simply just how much of each one is being correct yeah ended it's interesting i've never heard of this yeah you can put two images on one thing yeah Wes Bos It is currently only in safari um 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 you can do how they stack. You can give how big they are and how they repeat. ([Time 0:20:48](https://share.snipd.com/snip/573e47f4-3bb6-4ef6-9302-43f241bf3fcb)) - **Use @property To Animate And Control Inheritance** - Register properties with @property to enable transitions and set types, inheritance, and default values. - Use inherit:false to prevent CSS custom properties from cascading into nested components when undesired. Transcript: Wes Bos 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. Scott Tolinski 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 app just a little bit about it like that's one one feature Wes Bos 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 angle, and it will animate itself instead of just quickly jumping. That's because you've registered the type. Scott Tolinski Yeah, by registering the type, you can... There's something here with 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 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 going to 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. Wes Bos I'm going to tell you that the other two answers are actually in the example I've given you. Scott 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. Wes Bos So 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 really nice. I actually didn't know that. Scott Tolinski 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 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. Wes Bos Like another example would be like dark or like a color overriding. 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 one of them. ([Time 0:23:53](https://share.snipd.com/snip/ef786731-f8b0-4c64-a4a7-afb5813e6a8b)) - **Ten Standard CSS Filter Functions** - There are exactly ten built-in CSS filter functions like blur, brightness, contrast, and hue-rotate. - The full set includes blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Transcript: Scott Tolinski List all 10 of the CSS filter functions. Wes Bos Oh, this is a good one. Okay. Filter. And folks, yes. Scott Tolinski So CSS filter functions are for adding filters, as the name suggests. Yes. So blur. You might have to write these down somewhere. Wes Bos Yeah. Yeah. Hold on, give me like a few minutes to think about this. And then, or should I like try a ramble? Scott 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. Wes Bos Okay, so blur, hue rotate, grayscale, contrast. Okay, good. Scott Tolinski You got some of the hardest ones. So hue rotate definitely hardest one i've used you rotate quite a bit blur contrast um 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 Wes Bos Used a bunch before so or at least i've used a bunch so therefore you probably have oh um grayscale contrast it's not like mix blend mode is its own thing so there's no like blending things Here no no blend nodes blur here 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 to do. Scott Tolinski Maybe think about some more color operations or image kind of operations. Wes Bos Oh, there's like a pixelate one. No, that's image rendering type pixelate. That's its own property as well. Think of some more color options. Oh, there's like sepia. Scott Tolinski Sepia five there's there's hue rotate i can't believe you got hue rotation you haven't gotten here because i have a really cool demo where i did nested hue rotate and it's like yeah mixed Wes Bos With uh 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 see sepia was a good good one uh there's at least four more in that or Scott Tolinski 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 drop shadow drop shadow drop Wes Bos Shadow to an element which is nice if you have like 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? Scott Tolinski Opacity. Yes. Those are the two CSS properties that can be done. Wes 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 yes there's one that you're going to kick yourself on because it's very uh frequently used blur is the one that i always Use yeah blur hue rotate grayscale contrast sepia drop shadow brightness. Brightness. Scott Tolinski Yes. Wes Bos For some reason, I was like, okay, I covered how dark it is with contrast, but contrast and brightness is different. Different. Scott Tolinski 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. Wes 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 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? Scott Tolinski What is it? I don't know. Desaturate or saturate. Wes Bos Desaturate. Oh, come on. I knew that. Scott Tolinski And then there's one more in an accessibility setting that people used to use before dark mode was a setting on your computer. Wes Bos Oh, invert. Invert. Easy. I've used invert before, man. Yes. That's a good one. Scott Tolinski Here they are, folks. Blur, brightness, contrast, drop shadow, grayscale, hue rotate, invert, opacity, saturate and sepia. ([Time 0:27:42](https://share.snipd.com/snip/575cbf5c-fbd4-446e-aed7-d2d1918da9c7)) - **Advanced Font Properties Exist** - CSS exposes many font-related properties beyond family, size, and weight, including variant and synthesis controls. - Properties like font-variant, font-feature-settings, font-synthesis, and font-palette enable advanced typography and color fonts. Transcript: Wes Bos Name five font properties aside from color, size, family. Yeah, I'll give you, we're taking those three easy ones out. Scott Tolinski So five font properties so font hyphen something yeah font dash something font family font style style's one good oh okay so sorry i thought you said that one so i said i said no size color Wes Bos 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 Scott Tolinski Variable fonts i always just use the one with the string property um font wait 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. Wes Bos Font feature settings. Font kerning. 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 Variant. That's the one you were looking for there. Font Variant. And then Font Variant has Alternates, Caps, East Asian, Emoji, Ligatures, Numeric, and Position. So I think Font Variant and 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. Scott Tolinski 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. 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 tact to it. Yeah. Or, yeah, for italics, it just til them and that often looks like dog shit so uh this prevents the browser from doing that interesting what about font palette do you know what that does Wes Bos Couldn't tell you couldn't possibly tell you font palette it's for oh this is a another weird area of the internet, is that some fonts are color fonts. Yeah. 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 ([Time 0:32:50](https://share.snipd.com/snip/757290ef-e167-4638-b5c4-aba1ab0fc5d6))