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

for a grid row, and you could say that fixed to content notice all of the changes and improvements that have come to making CSS functions 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.

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 100% 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? 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 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

and fit content is really interesting. It's for grid specifically.

Beautiful tan or atan in JavaScript. I think I I used sine before. That was when I was doing JS if you wanna have, like, a button with a tooltip. Perfect.

is going to be Hey, Wes. This episode is sponsored by And, sometimes, we, just have our head down in the codes, and we might not even

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,

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.

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

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 parent elements and then a single child within it. And what that means is, like, how many times have you ever written the code

last name is equal to boss, and then you could access that thing in CSS.

the before to add the language of the content at any level of your selector.

in CSS. And that's helpful often when you're working with some generated output that you can't control,

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.

of JavaScript or CSS or whatever and you're using those as code blocks, multiple

access your attributes

from an element. Most commonly, you're gonna use this with, like, a data dash attribute. So if you have,

Next is going to be calc. Now calc is sort of everyone's new favorite

will allow you to

you can use

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 We were talking about this JS sort of like a max width for grid,

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? 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 give it a URL 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.

Maybe sorry. Maybe you're right. I'm referring to where 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

of in this case, it's an SVG.

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, face detection, 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, 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

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 kind of like clamp as well to, at a minimum, be this big and at a maximum,

function within filter. Have you ever used URL filter where you can use an SVG filter? 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.

div below it, and that's a

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,

opacity, contrast.

So My name is Scott.

Saturate.

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.

and then you can access those filters in CSS

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

And on that, you

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

Go back and listen to it.

and there's a lot of really amazing CSS functions. I wanna hear what your most interesting 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 This stuff's so visual.

Sarah was telling us how you can attach different filters in an SVG, much more useful 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,

saturate forever and ever and ever on on leveluptutorials.com.

super common in, like, video and photo editing. Right? You, like, create a mask of a thing to get that transparency Remember there was, like, a I think there was a potluck question that came in a while ago about that.

Head on over to syntax.fm that is it for these cool CSS functions, On, like, the very first version of it, we had all the logos desaturated. You hover, and then they saturate.

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 but you still need to be able to display something. Sometimes you can get away with just using that before or after with ATTR.

Oh. It's a good episode.

and then access them via

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.

Oh, that's fun. Yeah. I I think blurring is super interesting. We we used

but always sort of

Deno one f r, what that will do is it looks like a really nice background image when it's really just a a JPEG that's being crunched by CSS.

remain that same relative size.

scale to the size of the viewport

a video, And this function 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.

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

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

meaning that after each 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

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

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

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.

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

be this big. You can pass it 2 different values for your lower end and your higher end. Where this ends up actually becoming

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 for a full archive of all of our shows, and don't layer going.

really explore the, should I say, upper bounds of where this thing can go.

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

grid column has had its space

we're talking about just text right here. Clamp is useful in a lot of situations. Anytime you want to

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 all exactly the same regardless of free space that is left out until they all wrap on to to Node line.

it will, at a minimum, make them 0,

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.

Bos, and Scott, el toro Loco,

soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes, barracuda,

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing,

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.

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.

Tolinski.

LogRocket.

Thank you, LogRocket, for sponsoring.

Hey, everybody.

really more useful. So, Wes, do you wanna get into it and talk about some CSS functions?

Monday. Monday. Monday.

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

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

visual as well. And that's very possible using LogRocket. Now you're gonna wanna check out LogRocket at logrocket.comforward/syntax, Let's get into some CSS 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, Now CSS is such a visual medium, and it will make sense that your error pnpm exception in handling should be

Last 1 we have here is filter. Now filter is a CSS property, and it comes with CSS.

a whole bunch of different functions. There's blur.

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.

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

Very interesting.

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, Really pretty cool. You can it's a draggable interface

find me all of the following elements, and this works for the other way around. You could say if it is obviously, and at a maximum, make them Node f r. But what that will do is it will make them

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

exactly, 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 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.

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 with the URL.

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,

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

combinations

too oftentimes, we we've wanted to be like, give me 100%

CSS property. Because I think once you discover calc,

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

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

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,

minus 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 I mean, that kind of, oh, function is is really sort of nice. There's also the URL 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.

units of length. Right? And you can calculate things like, 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,

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

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

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 free space,

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

two values, I e, specifically, to the lower bounds and the upper bounds. And this, well, this example is 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,

Yeah. I've never used any of these in CSS, and the only I've only used 1. I think it was 40 p x. And then, like Scott said, you can you can mix and match those things.

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