Hasty Treat - Some Neat CSS Functions That You Should Know About

Welcome to Syntax. On this Monday, hasty treat, we're gonna be talking about CSS functions.

Now some of these are gonna be ones that you may have heard. Some of them may be ones that you have not have heard of, but they're all going to be pretty cool, and we're gonna discuss the what's, why's, and how's, and where's that you have with some specific CSS functions. Now there are ton of these things, so, obviously, this is going to be a subset. My name is Scott Tolinski.

I am a developer from Denver, Colorado, and with me JS always is the Wes Balos.

Hey, everybody.

Hey, Wes. This episode is sponsored by LogRocket.

Now CSS is such a visual medium, and it will make sense that your error pnpm exception in handling should be visual as well. And that's very possible using LogRocket. Now you're gonna wanna check out LogRocket at logrocket.comforward/syntax, where you'll get 14 days for free. Now what is LogRocket? Well, it is the visual error in exception handling service that allows you to see a session replay.

Really pretty cool. You can it's a draggable interface that shows you a video of what happened when the bug happened, where the user clicked. It gives you your network log. It gives you error logs. It gives you just about everything you'd come to expect from the Chrome Dev Tools being right there in addition to your Redux store and all that fun stuff as well. So check out LogRocket at logrocket.comforward/syntax.

Thank you, LogRocket, for sponsoring.

Let's get into some CSS functions.

Just trying to CSS function here, and I'm pretty into some CSS functions myself. This is an area that's always expanding within CSS.

And, sometimes, we, just have our head down in the codes, and we might not even notice all of the changes and improvements that have come to making CSS functions really more useful. So, Wes, do you wanna get into it and talk about some CSS functions?

Yeah. The first one is is actually been around for quite a while, but it has pretty good browser supports, and that's the attr function.

And this function will allow you to access your attributes from an element. Most commonly, you're gonna use this with, like, a data dash attribute. So if you have, like, a div and you wanna apply some additional info to that thing that needs to be available in CSS, then what you can do is you can say, like, data dash last name is equal to boss, and then you could access that thing in CSS.

Most likely, this is going to be using a before or after pseudo element in which you can use content.

Content property in CSS will allow you to put text into an element, and then you can access the data attributes. So a really neat one I saw on Twitter the other day was if you have, like, a a code tag that has a DataDash language of JavaScript or CSS or whatever and you're using those as code blocks, you can use the before to add the language of the content in CSS. And that's helpful often when you're working with some generated output that you can't control, but you still need to be able to display something. Sometimes you can get away with just using that before or after with ATTR.

Cool. Yeah. You know what? I don't use ATTR a ton. Remember somebody Wes saying, like, oh, why wouldn't you just like, what about using ATTR instead of, like, classes? Remember there was, like, a I think there was a potluck question that came in a while ago about that.

Yeah. That was for selectors, though. Yeah. Oh, you're right. Not for accessing them in CSS. Oh, another thing I've seen them is, with tooltips JS if you wanna have, like, a button with a tooltip. Perfect.

Perfect. Perfect use case. There's, like, not a lot of control over, like, whether tooltips should go above, down, left, or right. And then, also, I'm not sure if it's totally accessible or not, so that's something you kinda have to think about.

Yeah. At least that's something you could you could use as a jumping off point, but I think that that is pretty commonly used.

Next is going to be calc. Now calc is sort of everyone's new favorite CSS property. Because I think once you discover calc, once you discover it, you you really get into it, and it's especially powerful when paired with things like CSS variables. It allows you to calculate two values, I e, specifically, units of length. Right? And you can calculate things like, 100% minus three m's, so you can mix and match. That's, like, one of the coolest things. The hugest use case part. Especially, like, if you have a fixed header size and you have, like, the viewport height, you can calculate the body height by doing, you know, 100 v h minus your fixed header height, especially if that's stored in, like, a a variable or something like that, then you get access to the rest of the content that is the rest of the browser window. I mean, that that, to me, is worth the price of entry because it's, like, well, there's no price of entry, but it's worth the any sort of learning this thing because, too oftentimes, we we've wanted to be like, give me 100% Wes we currently Yarn. And, well, okay, that's not super helpful. So, like, it doesn't CSS doesn't work in the way that you'd expect it to there, but being able to calculate the browser height with a property minus this or that is just so incredibly powerful. I I I love calc. I use it all the time. Yeah. Another really good use case for this is with margin. If you're setting a width of something

and you know how big your margin or your your gaps as well, if you've got grid gaps or or now Flexbox has gaps as well, you can calculate this and have a fixed size margin. So you could say, like, a 100% minus 40 p x. And then, like Scott said, you can you can mix and match those things.

And and this is really helpful for when, like, you scale up something and you you still always want the width of the margin to stay the same and not scale up along with it? Yeah. Fantastic.

Next one we have here is the is function. This one's actually pretty cool. It used to be named matches, but now they've renamed it to is. And, what this will allow you to do is to select multiple parent elements and then a single child within it. And what that means is, like, how many times have you ever written the code header h Node comma dot header h two? Like, you wanna select all of the h one, h two, h three, h four, h five through h six that is inside of a specific element. And if you wanna do that, then you you would have to write, like, the header h one comma, the header h two comma. Or nest. With this, you can say, exactly, dot header space colon matches h one h two all the way through. And what that will do is it'll say, within the selector, find me all of the following elements, and this works for the other way around. You could say if it is the header or the footer or the sidebar Mhmm. And then there's a link inside of that. If that's the case, you don't have to say, like, Scott header space a dot sidebar space a. You can say header, footer, sidebar, space a. And, it's pretty cool to be able to select multiple combinations at any level of your selector.

Very interesting.

I hadn't seen that before. Next up is going to be some trigonometry.

Yeah. How many people love trigonometry? I used to actually like trigonometry in school. I don't know. It's been a long time since I've done any sort of trick, but there's trig functions in CSS, which can be super useful for those of you doing really interesting things such as sine, cosine, tan, all of the things that you would expect to be from your graphing calculator or those of you who have used the trig in the last few Yarn, anything that is there. Now one ones that I thought are a little bit more maybe useful to me personally, considering I'm not doing any sort of trick, but, like, pow for the power of as well as square root, s q r t, to get the square root of something. Again, I'm not going to be using these a ton, but I think they're interesting to know that they even exist because I I guess I didn't know that, like, sine existed, but not to the point where I would I would think to use it at any given point. Yeah. I think Sinecoast 10 can be used in a lot of animations in CSS. But Yeah. Especially to get, like, looping things.

Yeah. I've never used any of these in CSS, and the only I've only used 1. I think it was tan or atan in JavaScript. I think I I used sine before. That was when I was doing face detection, and I needed to figure out if the eyes were at different levels. I wanted to figure out the tilt of the head. Mhmm. Oh, yeah. Yeah. Yeah. Yeah. Given 2 points, what is the angle of the 3rd or something like that? Look at that. Yeah. That's a that's a actual good use case for something like this. It's cool.

Next one is is Wes I've heard quite a lot about, but I've never used it myself, and that's the clamp. I know that it allows you to do specify the min and the max of something. But do you know a little bit more about this, Scott? So CLAMP is interesting, and

I have been, like, getting into CLAMP functions quite a bit due to, like, animation courses. Like, I use clamp, not the CSS function clamp, but I use clamp all the time in doing animations when you want to clamp a number. What exactly is clamping? Well, clamping is basically when you want an upper and a lower bound of a number. Right? You could think of it as, like, when you have a minimum and a maximum value, and you wanted to stay within those bounds. So it can be useful in in terms of when you want to scale with the viewport up to a certain spot and down to a certain spot.

And then there's also a preferred value, which is the sort of the center value. Okay. So let's take a a font size example here. So, like, let's say you want the font size to clamp to the lowest possibility of being 1 npm and the highest possibility of being 2 rems. Right? So you want the font to always stay within that range of 1 to 2 rams, and you want the fonts to prefer to be at a specific size. Now people often use a view port units for this. So the way you'd see this written would be font size clamp. The first argument would be 1 rem. The 2nd argument would be something like 2.5 Vercel width, so 2.5 times of the viewport width, maximum being 2 rems. So something like this would be useful if you want your font to, scale to the size of the viewport but always sort of remain that same relative size.

This stuff's so visual.

You could think of this remember when we would in the past, we would use, like, fit text?

Yeah. Yeah. Where you, like, scale the size of a piece of text across

the width of the parent? Correct. And this could be definitely useful for things like that as well because as the element grows in size, you're going to have the font size essentially change to be upper and lower bounds of this thing. So it's basically like a fit text use case when you want your text to fit to something, but you can clamp it to the lower bounds and the upper bounds. And this, well, this example is we're talking about just text right here. Clamp is useful in a lot of situations. Anytime you want to clamp down a value to a minimum case and a maximum case, and you just shrink it down into there. That's great because, like, you have min width and max width. If you ever need that for text or if you ever need it for any other CSS properties, there's not min and max values for that. Right. It seems like clamp Wes can use for that. Yeah. CLAMP, to me, the, like, the most flashy thing that you can use it for is fluid typography. Right? Like, typography that scales. But I I I would Wes there JS probably, like, a ton of other use cases for it that are probably very interesting as well. I haven't used like, I'm typically using Clamp within JavaScript myself. So seeing that Clamp exists in CSS is is gonna be one of those things that I think is gonna take a little bit of time for me to really explore the, should I say, upper bounds of where this thing can go.

There you go. Wow. That's great. Next one we have here is min max, and this is part of CSS Grid. When you want a column or a row or a track, as we call them, in CSS Grid to kind of like clamp as well to, at a minimum, be this big and at a maximum, be this big. You can pass it 2 different values for your lower end and your higher end. Where this ends up actually becoming much more useful is when you want to have a set of equal columns in in Grid. And people will often say, oh, 3 columns, One f r, one f r, one f r, and that will give you 3 equal columns. And that actually works in in some cases, but because the way that f r works in grid and I like to think of f r units as free space, meaning that after each grid column has had its space used, there's a bunch of extra space. And if there's not much in each of your columns, then you have a 100% of equal space. And giving them each one f r, one f r, one f r, that means that they'll each take up equal columns. But if one of your columns has something that's making it wider, like an image, a video, some text that doesn't wrap, CSS Grid will first lay it out based on the width of that text or that image that doesn't wrap. And then it will say, okay. Now I fit this thing. There's a bunch of extra space, free space, and then it will divide that evenly up between the people that have 1 f r each. So it doesn't actually make equal columns. All I have to say, if you use min max Deno one f r, what that will do is it will, at a minimum, make them 0, obviously, and at a maximum, make them Node f r. But what that will do is it will make them all exactly the same regardless of free space that is left out until they all wrap on to to Node line.

That's interesting. I I haven't used this a whole lot, but I'm interested in in a lot of these things because sometimes we get wrapped up into the way that we've just done CSS for so long that you don't even think about, like, oh, there's this really new, elegant way to do things.

And Grid is one of those ones that's like when it first came out, it was like, alright. Here's the way that you do things in Grid, but I'm learning that there's just so many advancements to this stuff that I haven't even thought about a whole Scott. Like, this Node, next one is the fit content function, and fit content is really interesting. It's for grid specifically.

We were talking about this JS sort of like a max width for grid, like a grid template column, sort of like a max width, but it's not limited to the width dimension. It can be used for columns or for height. So you could think of this like a max for a grid row, and you could say that fixed to content is going to be a maximum width. Keep in mind that this can be when I say width, it can be either width or height. So if you pass in, let's say, 100 pixels to fit content, the grid template column will shrink to the content, but it will max out at the value specified in here. So if you say 100, if you have, like, 2 characters in your grid template column, it's gonna shrink to those 2 characters. But if you have, you know, paragraph, it the maximum it's going to be is going to be 100 pixels wide. So this is sort of like a it will it will fit the content to this specific parameter.

Beautiful explanation of that. That's it's always very hard to explain these such visual things over a podcast, but, hopefully, we give you the gist of it, and you can go check it out yourself.

Last 1 we have here is filter. Now filter is a CSS property, and it comes with a whole bunch of different functions. There's blur.

Blur is really cool because you can if you have something that's semi transparent and you put a blur on it, then you can still overlay text on top of that and not have that blur, and you can get get this kind of cool blurred background effect that used to not be possible. I remember designers always giving me mock ups where Oh, yeah. The thing would be blurred and they're like, sorry. Sanity really do that. And and now there's grayscale sepia, opacity, contrast.

Saturate.

Yeah. You can just and stack them together as well where you can apply a bunch of contrast and then add CPO or vice versa, and it actually does do them in order. I've used this quite a bit on, like, my generated slide decks where I just have images in the background of each slide. If you, like, grayscale it and then crank up the contrast and then have a bunch of opacity, it looks like a really nice background image when it's really just a a JPEG that's being crunched by CSS.

Oh, that's fun. Yeah. I I think blurring is super interesting. We we used saturate forever and ever and ever on on leveluptutorials.com.

On, like, the very first version of it, we had all the logos desaturated. You hover, and then they saturate.

I mean, that kind of, oh, function is is really sort of nice. There's also the URL function within filter. Have you ever used URL filter where you can use an SVG filter?

I didn't know about that until we had Sarah Swain on the podcast. She told me about that. The episode I wasn't on. Yeah. That's the 1 episode we didn't know about Scott because you were, like, sick or something, and we already had her queued up. I'm using it, the URL function, in my if you go to my beginner JavaScript Scott course, I've got these drips where the Oh, yeah. The pattern above it, the blue pattern drips down onto the div below it, and that's a clip path, I think. No. A mask. There's a difference between a mask and a clip path. Yeah. That would be a mask. And then the mask sort of punches it out.

And on that, you give it a URL of in this case, it's an SVG.

Inside of it, there's, like, the data for how the mask will look and how it will punch it out. So Isn't that just an SVG? Maybe sorry. Maybe you're right. I'm referring to where Sarah was telling us how you can attach different filters in an SVG, and then you can access those filters in CSS with the URL.

I'm thinking what you're what this is using is it's using specifically an SVG as a mask. Yes. Sorry. That's what it's doing. The masks are are super common in, like, video and photo editing. Right? You, like, create a mask of a thing to get that transparency layer going.

So, obviously, if you've used Photoshop too, I think masks are extremely common in Photoshop. So Yeah. Yeah.

Yeah. That's pretty cool. It's not not what I was thinking about initially. So it has nothing to do with, the URL functions that you just talked about. But you can store filters in an SVG and then access them via CSS.

Oh. It's a good episode.

Go back and listen to it.

So that is it for these cool CSS functions, and there's a lot of really amazing CSS functions. I wanna hear what your most interesting just exciting use cases for CSS functions are that maybe we didn't even cover the function at all, or maybe we covered the function and you have a really cool example of how you can utilize some of this stuff. Again, these are all very visual, so let's get some visual examples. If you follow us on Twitter, we will retweet you some of your cool CSS function examples. I'm gonna see some. Alright. Thanks so much for tuning in. We will catch you on Wednesday.

Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't