Functions

(upbeat music) - Welcome to the CSS podcast, where we cover all things CSS from accessibility to Zindex. Today we're gonna be talking about functions in CSS. Yes, CSS actually has quite a few functions, and we're gonna be going over most of them in today's show. - Yeah, you could pretty much do functional programming with CSS. I mean, it's not entirely true, but we are gonna be making it sound like there are a lot of functions. This is an overview episode, and there are a ton in here. So in the beginning, we just wanna explain kinda like, what is a function and why does CSS even have these? It turns out they are runtime contextual expressions, and they return dynamic real-time values per the state of the browser, per that visitor in that moment. So this is even something I realized as I made this episode, that these are very much a signal that there is runtime dynamic things happening, and so that's why they need to be functions, is they're gonna be doing things in the moment, and they take parameters so that you can get some sort of good value back from them. So anyway, I thought that was really interesting, that all these functions are pretty much immediate indicators that there's dynamic styling happening. So think about that throughout this whole episode. Interesting thing about a lot of these functions, so like in JavaScript, you have to import functions, and you don't have to do that in CSS. They're there in the global space for you. Many of them can be nested, like calc and var, where you can put one inside of the other, or vice versa. Many are typed and will only accept certain parameters, so they will fail if you invoke them with the wrong stuff. Some can also type cast, so you can pass in various types of parameters and get a new type back. So calc is a good example of this. You can do like 50 times two times one second. We'll convert 50 times two to 100 times one second, it'll be 100 seconds. So it's a really cool way for you to do math, and then convert to a type that then gets used as a value in CSS. It can be animated, really cool. There's also, CSS keeps these functions live, and it will recompute on value changes and updates all the functions that are in there. So that's very cool. This again, that good indicator that they're dynamic. And finally, just 'cause this is just fun to say, many of these CSS functions are pure functions. So that means that given the same parameters, they will always return the same value. I know that sounds like how every function should work, but no, sometimes functions modify things outside of themselves, and at which point they're not pure. So there are a couple of exceptions in CSS. I think counters is one, counters, you totally change things outside yourself, but it's okay. So anyway, hopefully that was a good breakdown of like, what is a function? Why do I use them in CSS? And then let's dive into the rest. You know, what do you have for us and like types of functions available? - There's a lot of different types of functions available. And all of these, you know, essentially just return values or go through some logic and give you some output. So the first type are functional selectors. This would be on the left side of that property value statement. I would include pseudo classes that accept input values, like is, not and laying. And we need something to match with is, like is, is something that matches things. So you need to have some kind of arguments for those matches or for laying. You have to have some language there. And also I want to note that we did an episode each on pseudo classes and pseudo elements. So check out the show for pseudo elements and pseudo classes. If you want a deep dive on these things, including some of the non-functional selectors here. It's a pretty robust look into pseudo CSS. I will say, I definitely have a lot of fun playing that show together. The next type is color function notation. Color function notation uses comma separate values due to legacy functional notation. But in newer browsers, you can actually omit these commas, which is fun. But if you do, you have to be careful and remember to browser test, Adam. (laughing) - Yeah, I just broke a production by deploying commas colors. So it was cool. We opened it up an edge and it was a healist site. It was like, this site is lacking color. And we're like, oh, 'cause every single color defined is in a way that it doesn't understand, okay? - Yeah, there are also gradient functions. In gradient functions, you'll also see comma separating values. And these are to denote distinct colors and their stops and different aspects of those functions. All these functions have different arguments and argument lists. We'll go over those. A mathematical expressions like Adam talked out with calc. You add, subtract, multiply, divide and also accept parentheses within them. So if you are doing mathematical notation, you can use PEMDAS, the correct order of operations there. And this, as Adam said, will interpolate values. Then within mathematical expressions, you have min, max, clamp, image set, min, max. These allow for logical comparisons and they can be used either in sizing or within grid for comparison. There's also cubic bezier functions, which are a mathematic like, but these are used for animations. They create a curve from which to animate. And then speaking of animations, there's steps and there's path functions. And these are used within keyframes or animation declarations to write animations that need arguments, need some sort of parameters, but most functions accept one value, even though there are so many different types of functions used all over CSS. So we're gonna get into how those notations vary and dive into the details of all of these various CSS functions. - So, Adam, do you wanna start with maybe like colors, functional color notation? - Yeah, yeah. So we covered these in episodes six and seven and that was about color usage and color perception. So in case you wanna get a super deep dive, go back and I loved those episodes too. Their colors just amazing. Anyway, so some of the color functions that we have available in CSS, we have HSL, HSLA, RGB, RGBA. So those should feel very familiar. Those are functions again, right? They have a parentheses and they take multiple color channels that equate out and return a color value that can be painted. So kind of cool. Those are also functions in that you can kind of pass custom properties in there and do something dynamic, really fun. We also have lab and LCH. So these are new color notations for additional color gamuts that are coming out. And then we have the color function itself. Can't forget the color function. So this one is not really supported anywhere. It's honestly like the most exciting one, I think too. But this is where you can pass in a gamut that you want and then the channels for that value. And then you can specify a bunch of fallbacks. So in one color value definition that I write, I can actually match maybe four plus colors across different browsers and different capabilities. So again, that color function indicates that there's a very dynamic color that is intended to be used here. And yeah, so that's a little high level view of functional color notation. - I love that. - You're taking it to tell us about gradients, right? - Yeah, gradients use colors. So we're actually gonna be diving more into gradients in our next episode, which is episode 21. So if you're interested in this topic, make sure to tune into that show for a much deeper dive into gradient functions. But these are some of my favorite things to play with in CSS. I think that there's a lot that you can do with gradients. And gradients are considered images and consist of a comma separated list of definitions. You can have multiple colors, multiple color stops. You could just angle and starting points of all these gradients. And there's three main types. You have linear gradients, radial gradients, and conic gradients. So with linear gradients, you need to define at least two colors for the gradient to show up. And the default is that the direction is top to bottom. So if you just write linear gradient red comma blue, it's gonna be a top to bottom red to blue gradients. And as I mentioned briefly, you can also set color stop values. So you can have these positioned, you can have a hundred colors within your gradient and have them all positioned at different intervals. So you can have a lot of variants in there. And if you don't want to go from top to bottom, you can set a direction as an angle like 45 degrees or two right, two left, and then create your gradient that way. There's also repeating gradient. So if you have a repeating linear gradient, you can set that instead of just linear gradient as the function. And that is going to allow you to define a defined gradient pattern and its size. And then make a repeating pattern to fill the rest of the element based on that template pattern. So these are really handy for making like stripes or other gradient effects. And there's radial gradient. So this is a rounded gradient as the background image. And again, you have to define at least two colors for this to show up. And the default is from the center out to the edges. And this radial gradient will take the proportions of its parent element. So if you have like a really wide rectangle, you're gonna see this wide oval shaped gradient by default, but you can actually change the size and shape of that rounded piece by giving it a size or say circle. Circle is a keyword you can use here for a perfectly round gradient. And then you can set the position. So you could use percentages or pixel values to place that circle or that rounded radial shape wherever you want within the elements. And there's also keywords here you can use like for this left corner or at top. And then you would have like a radial gradient. So like radial gradient circle at top center, red comma blue would be a radial gradient that has a circle as the inside part. It starts at the top center of the div and goes from red in the center out to blue at the edges. So again, you could repeat these kind of like with linear gradients, a repeating radial gradient kind of looks like a bullseye or some kind of like cool like effect from the center. And then finally there's conic gradients. So you can kind of think of conic gradients like a squeegee where you have a squeegee thing or like straight mop type thing and you fix one point and then you rotate the squeegee around that point until it forms a circle. So now take this circle of color and extend it out to the entire div or element and give the first and last color that you started and ended with a gradient transition in between. So conic gradients will start and end with either different colors. You're gonna see like a line that breaks the color or if they start and end with the same color it'll look like a continuous cone of color there. These are supported in all modern browsers except for Firefox and enable some interesting things like pie charts and we'll get into all that in our next episode. But like radial and linear gradients you can set the gradient start points and their position, their center coordinates. But unlike the other types of gradients you need to use a unit that is like degrees or radians or turns where it sets the gradient position based on a percentage degree or rounded thing, iconic value, I don't know what to call it. But you can also repeat these with a repeating conic gradient. They look really cool, kind of like sunbursts. You can sort of think of that instead of a stripe, like a linear gradient. - How about that for a teaser of the gradient episode that's next. - That's gradients in three minutes. - There's so much in there, it's really exciting stuff and you just casually dropped repeating conic gradient and I'm like, that is amazing, it's so cool. All right, well let's talk about some functions that you can call that get you some values and they get you runtime dynamic values. We have the attribute function. So this is ATTR and this returns the value of an attribute on the selected element. So this is a really neat one. If you have just a custom attribute on an HTML node or even just its regular, you know, like you could say the input type, you can get that string, that value that's in that type parameter on the DOM node itself can come into CSS and become a value in a way. So attribute is this dynamic way to reach into the selected element and grab values off of its attributes and use them in your CSS. It's very cool, it's a little limited at the moment but soon it's gonna get some mighty improvements. So be on the lookout for an article and blog post about what is coming to the attribute function in CSS. It is super exciting. Anyway, we also have the variable keyword in CSS. So you probably have used this. This is how you use a custom property that's been created. So you say var open parentheses and you can specify the name of the custom property in there and you can also put a comma and specify a fallback. So when you define a custom property, you don't use a function but when you want to use it, you do use the functional notation. Again, 'cause you're reaching in, you're grabbing something dynamic and contextual, kind of cool. We also have the URL function. So you've used this all the time and you also use this in different locations and the URL function is for fetching assets. You can use this for grabbing font files or images. You can specify base 64 strings. You can even specify IDs to like items on the page. So this could be for SVG. There's also at import URL and at namespace URL. So URL can get used in a few different ways. It's just like a small side note. I was reading the spec on URL and it looks like CSS level one, the URL functional notation described true URLs, whatever that means. And then in CSS level two, they expanded it so that URL could be used to describe an URI and a URN. Whatever a URN is. - What is the URN? - I have no idea. But eventually they came back and in CSS level three with the URL function, they were like, "Nah, let's just go back to the original." And they just cropped it back. So it's now, again, true URL. So the URL function can only take URLs. I suppose that makes sense. The last function for values is image set. And this lets you in CSS, specify a fallback set of responsive images and each of them take a URL to the image asset itself and then a resolution that you have to specify so that it can be matched. And once that resolution matches, it will grab that image from the set and use it in your CSS. Again, something runtime and dynamic it needed to do. So yeah, those are cool. So I did also mention pseudo selector functions and pseudo selectors like focus hover, hash out and shout all those sorts of things. Some of these need to accept arguments to do their job. So there are 61 stable and experimental pseudo selectors in total. So if you are interested in hearing about almost all of those in our other episodes, again, check those out in the podcast. Thank you for listening to us. But the functional pseudo selectors are not is, where, Lang and Durr. So if we start with not, not is a negation factor. It accepts one selector and the ability to include more than one is currently experimental, not widely supported. So right now you're just gonna be able to use not with one value in there and you also can't nest them. You can't have colon not, colon not. That's not gonna work. So if you were gonna use not, you could write for example, A colon not and then in parentheses dot blue. And this would target all links that did not have a class of blue on them. So this is really helpful where you have general style rules and then a few exceptions here and there. I've used not pretty selectively, not very often, but it can really come in handy in those occasional moments. There's also is and where and these are matches selectors. In fact, matches was renamed to is and these look for matches to the arguments that go into the selector functions. So colon is can be used for a shortcut for writing code. So you can write colon is and then in parentheses, header comma main comma footer A colon hover and then write your styling in there. This is equivalent to writing header A colon hover comma main A colon hover comma and footer A colon hover. So you're styling the links on hover only in the header main and footer sections. This is kind of similar to the concept of ampersands and SAS where you can just write a little bit more concisely your code. You can also use this to do things like A colon is and then in the argument list, colon hover comma colon focus and style both the hover and focus state of a link in one line of code. So you can just write it directly as you're writing that selector instead of having to write these all like with commas and like enters and anyway, it's really nice for simplifying longer complex selectors like specifically. - Totally. - And the difference between where and is is that where always has zero specificity but is takes on the specificity of the most specific selectors that you put in the argument list. So it's always gonna be more specific than the specificity of the selectors in that list. But where is easier to override with simple selectors? So it's all about specificity, baby. - Yeah, yeah. - I'm getting weird and weird throughout this podcast. (laughing) I've just started like singing opera songs. - Well, wait, you were trying to do, what's the song? It's like, it's not the Benjamins. It's all about the specificity, baby. I'm like trying to think, what rap song were you? - Okay. - I don't even know. I'm cancelling myself. - I loved it. Weirdness is awesome. Anyway. - The last two pseudo selector functions are Lang and Der. Lang accepts a language shorthand such as FR for French or EN for English and Der, which means direction. Also, it accepts RTL or LTR so you can style specifically based on these properties, based on language, only accepts those two values. So if you put something else in there, it's just not gonna read it. It's gonna ignore the line. And then we also have these pseudo class nth pattern selectors. So these, you would have an nth pattern. I actually really wanna do a show on these 'cause I think that this is like a really interesting, robust micro syntax. And that syntax is the argument for the function. So if you're using an nth pattern of two n for the nth child function for that as the pseudo selector function, the selection would then start from the top of the list and target every other item skipping the first item to start with that second one. So it'd be like second, fourth, sixth, et cetera. And the last child would start from the end, not the beginning, but it would essentially do the same thing. So it would target every other value starting at the second to last one. So it would depend on how many are in the list for this. Then there's also nth of type, which allows you to specify based on a specific type of element on top of that regular pattern. So you would be selecting like only paragraphs that are every other paragraph, which is super useful for like ads and things if you had those interjected between paragraphs. Anyway, and then last nth, last of type would run the same pattern as nth last child, but again, starting from the end and using that type, the types, we got types. - We got types, CSS has types and functions. It's a real programming language, everybody. (laughing) - Believe us. - That's like, I made that tweet the other day about, I was like, "CSS is a functional programming language." And people are like, "It looks like Haskell." And I'm like, "I know, that's kind of the point here. "It's totally select where from, "you know, and map some new properties on it." It's, anyways, CSS is a programming language. It's undeniable. Anyway, whatever. This little opinionation piece coming out right there. Oops, my bad. - Listen, I've been fighting this since my career began. So the conversation's the same. (laughing) - Stupid battle that anyway, whatever. Okay, so we have math functions. Let's talk about math and CSS again, 'cause it's not a programming language. It needs math and okay, I'm done with that joke. Anyway, we have math functions. We talked about Calc already. Calc is super powerful. We also got some new ones of Min, Max and Clamp. I don't think we've done a show on those, but we did cover them in one episode. Do you remember which one it was? - We talked about them in layout or spacing. Probably both of those shows. - Probably both, yeah. It comes in really handy. I feel like we should do a deeper dive on them 'cause they're really powerful. But essentially, so Min, Max and Clamp can take multiple values, comma, separated. And again, a runtime determination will be made about which value to use based on what came back dynamically. So it's really fun to put inside of Min, Max and Clamp a viewport unit, right? So you can say like, hey, I want my font size to be, I don't know, 1.1 rem, but maybe try being three viewport unit wide. And then on a really big screen, you can say Min or Max and essentially clamp that to say be a fluid number that's based on the viewport or Max yourself out at this font size here. So it's really, really powerful, cool logic that you can tuck right in between those parentheses there. We also have like legit math functions in CSS. You can do sine, cosine, tan, pow, like all those really fun ones to do your dynamic animations. So you can put these inside of Calc. It's really cool, powerful stuff. So CSS has numerous math functions for you to use. - Yeah, and speaking of animations, I feel like I'm on like the episode teaser patrol here because again, I want to note that we're going to have some off coming episodes on this. - The teaser patrol would be the coolest team to be on. It's like, what team are you on? I'm on the teaser patrol. (laughing) - We're going to highlight a lot of really cool animation things, but in this episode, we're going to talk about the two functions of cubic bezier and steps. Cubic bezier is used in animations to specify easing curves. So you would have easing curves as like shorthands for how you want your animation to move throughout the space. So the shorthands are like ease in, ease out, ease in at or linear. But if you want to create your own, cubic bezier accepts four comma separated values. And you can think of these as two different handles on either end of this curve. So the first handle is at zero zero and the second handle is at one one. And then the values inside of the cubic bezier argument list are going to be the x y coordinates of that first handle and the second handle. So it's going to be the first two of the first handle. The second two are the last handle. So a linear ease would be cubic bezier zero zero one one. It would just look like a straight diagonal line. But if you wanted to pull this handle upward to look like the left half of a rainbow, then you would change it to zero one one one. So that would move that first one upward. And if you wanted it to look like the opposite of that, which would be like the right half of a U that sort of be like an ease in, then you would have it at one zero one one. So we're only just seeing that x value of the right handle, not the y value of it. The possibilities here endless anything between zero and one, even negative numbers works here. So I encourage you to try these out. There's a really great site called cubic bezier.com. It's cubic dash bezier.com. It's B-E-Z-I-E-R if you're wondering how it's spelled. And this site makes it really easy to play around with these and see how they affect your animation, even play an animation with a duration. So love that site, we'll link it. Also steps, steps are used with step animation. Step animations are like a ticking clock animation or something that stops at different points. So the steps function accepts the number of steps as the first arguments and then the direction. So you can either go start to end, which is to identify which direction through the animation loop these steps go. So front to back, back to start. The default is end. So you're going from start to end. - Awesome, for some reason cubic bezier. I loved the word bezier. And I went through the stop process of, that would be a great like pet name. And then I was like, wait a second, maybe it's a nerd cafe that's called. - Bezier cafe. - Benye's and Bezier's. It's like you serve Benye's. - I would eat there. - This is so stupid. Yeah, cool. It's like the CSS nerdy cafe. Love it. Okay, so let's talk about how you can make shapes. So there's like functions in CSS for creating shapes. And these are used inside of shape outside and clip path. And you have functions like, well, path. And path is a function that can take all sorts of other parameters, but it's used for animation or inside a clip path. You also have offset path. We have circle, which can make circles. We have a lips, which doesn't make circles. It makes ellipses. Hey, here's a fun little note. I learned this in a kid's book and I feel smarter now because of it for some reason, but do you know a circle is not an ellipse, which is not an oval? - No, I didn't know that. I'm confused. Can you explain this again? - Yeah, okay. So like an egg is an oval and an egg is not an ellipse. So like an ellipse, I think the final determination was that two sides are parallel. So a circle is like all sides are parallel or whatever. An ellipse is two sides are parallel and an oval is only one side is parallel. So like an egg is like, right? It only shares anyway, whatever. - I always thought it was the opposite. We're like an egg would be an ellipse, but on an oval, but I'm wrong. I don't know how to English. - I remember I felt really wrong too. Here's the assertion. This is what we could just walk away with, which is an ellipse is an oval, but an oval may not be an ellipse. - Okay, so it's like a square and a rectangle. A square is a rectangle, but a rectangle may not be a square. - Exactly. And so yeah, that's why we have two different functions in here. We have circle and we have ellipse. So just kind of funny, weird kids books are teaching me things every day. We also have the polygon function. So this is anytime you want to draw a shape that has three or more vertices. So this can create cool things like triangles and other stuff. And then we have the inset function, which is for creating rectangular shapes. And don't be confused with the inset function versus the inset property. Cause we talked about in the logical property episode about the inset, which is pretty much your logical version of top left bottom right, the physical ones. And the inset here is a function and it's for creating squares. So anyway, kind of interesting. Yeah, next we have sizing functions, which are also known as transform functions because these go on the right hand side of the transform property. The transform property is super robust and just like a really interesting world of its own. But let's start by talking about scale. We have the scale X, scale Y and scale Z functions. These increase or decrease the size of something along an axis, whether it's the X axis, which is horizontal, the Y axis, which is vertical, or the Z axis, which is away from and towards you, like Z index. So these would specify where you're scaling from and they accept unitless values. So that would be like one is the default, anything less than one would decrease the scale, greater than one would increase the scale. And it goes quickly when you increase the scale. So then there's also a shorthand for all these, which is just scale. And this is the shorthand for a 2D plane transformation, which is just the X and Y axis, but there's also scale 3D. So with scale, you could have either two values, like a X and Y transformation or one value, which would be duplicated as both. But then for scale 3D, you must have three values, the X, Y and Z values for your transformations. And you can do a lot of fun, like animated 3D transformations with this. There is also the perspective function when you are working with 3D CSS. And here you would set a perspective point. So imagine like when you're creating a perspective-based landscape drawing in art class in like fourth grade, you would have like your origin point, and then you would draw all the lines towards it. This is your perspective. So perspective takes one argument, that's a set value like 10 REMs. And you can use that in the same line of transformations as all the other transform functions, because it all goes within the same property. So then we also have translate. Translate is similar to scale in terms of the way it's written, but instead of increasing or decreasing the size of something, it would be moving the elements on a plane. So there's translate X, which moves it on the X plane, translate Y, moves it on the Y plane, translate Z to move on that Z plane away from towards you. And then translate itself is a shorthand for X and Y, accepts one or two values. And there's translate 3D, which accepts X, Y and Z transformations all at the same time. These accept static values like pixels, M's, inches, any length value. We also have rotate. So there's rotate X, rotate Y, rotate Z. These are rotations on an axis. You can use degrees, radiance, turns all of those fun round units for this. Rotate is the shorthand for X and Y. And rotate 3D actually takes four arguments, the X and Y rotations, as well as an angle that you're rotating at. So there's rotate 3D. You could do like rotate 3D, 1, 1, 1, 45 degrees, all comma separated. And this would be a positive angle rotation. The positive angle would be a clockwise rotation and the negative angle will be counterclockwise. So that's like one way to think about that rotation angle. And finally, there's skew. So there's skew X, skew Y, and just the skew shorthand for both X and Y. This takes two corners and slants them. So you could think of like a parallelogram where you have like the top and bottom slanted vibe. And that is the shape that you're creating here, which is useful if you're creating like perspective in CSS. And if this accepts values and turns, radians, all of those great radial degrees, factors, factors, units. We have a unit show too, since I'm the listener of other shows, please today. - Kind of is like that, huh? - Yeah. There's just so many episodes we've done at this point that cover like basic CSS like things that are so involved in every other aspect of CSS so it's hard not to reference those shows. And I think they're pretty good too, so yeah. - Yeah, nice and bite-sized, I agree. And I'm looking forward to more and more this ability to reference those. It's kind of fun. Hey, we have a catalog, you know? - We have a catalog. - We have a catalog. All right, you know, when you saw everyone, that's in the middle of the episode, we're just patting our own backs. It's okay. We've got other functions. There's like tons more functions to go over here. - This is gonna be a long show. - This is a long show. - You know, we're almost done, I swear. - We are on the final stretch. At this point, if I was on a run, I might start sprinting. Okay, so we've also got filters. These filter functions you've definitely, you've used to blur before. I know you have, I use it all the time. I like blurring stuff. I think it creates kind of a cool effect. Anyway, so we have many filters that are functions and they are runtime contextual and they do lots of really cool stuff. So we have blur, brightness, contrast, grayscale, hue, rotate, invert, opacity, saturate, sepia, drop shadow, and URL. So URL is not a filter, but you can pass in a filter into that URL. It's kind of cool. I wanted to throw that in there as a side note. I feel like we should do a whole episode on filters at some point and really dive deep into like how some of these work and how you can leverage them. But for now, it seems kind of okay just to list them there high level. What do you think? - Yeah, I mean, I love using filters and blend modes now with Edge using a basis of Chromium. These are something you can really implement in your designs today. You don't have to use a separate image for hover effects. You can use these for so many different visual effects and interactive effects. So I'm like a huge, huge fan of filters and blend modes in CSS. - Totally. We're junkies. We're like color junkies. We're filter junkies. It's okay. - Yeah, and we're also grid junkies. - We are grid junkies. (laughing) - There are a few different grid functions that are super helpful. The first one is fit content. This is used for sizing items. It accepts one argument, but the function itself is a shorthand for a pretty interesting calculation. And that calculation is min and then in parentheses, maximum size. And then the max function taking the minimum size and the argument that you're putting into fit content. So what does that mean? Let's say an example. So you would use fit content when you're defining grid template columns or grid template rows. And say you have like fit content, you have grid template columns, fit content 400px, fit content 400px auto. So this would be three columns. The first two have a fit content of 400px. There's just one example of how you would use it. So the content in the first and second columns would be clamped at the 400px max size. But if the content within those is smaller than 400 pixels, it would take the auto size of the minimum content. So the min content size. So you can use absolute units here like pixels or rems or percentage based in the viewport units. There's also min max. So min max accepts two values and this defines a size range in between the minimum maximum values provided. It's very similar to clamp but you're using this for grid logic where the actual value in clamp is the min content size of what's inside the grid. So those are similar but not used outside of grid. You gotta use min max with grid and you could put a variety of values in here. You could use absolute lengths like pixels. You could use a percentage. You could use flex values, fractional units or keyword values like max content, min content or auto. So an example would be min max 300px comma 1fr. Those would be the two arguments in there. So this would be a minimum of three inch pixels and maximum of one fractional unit of that grid space. You could say something like min max 300px 50vw. So instead of one fractional unit, the max would be 50% of the viewport width and then an example of like min max and the min content comma 500px where min content would be the smallest size of the content on your page which is inside of that grid column which is already sort of the default but the max there would be 500px. Finally, we have repeat as a grid function. Repeat as a shorthand that helps you write grid templates a bit more concisely. So for an equally spaced six column grid instead of writing something like grid template columns 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr. You can write grid template columns and then repeat colon six comma 1fr. That's it. - So nice. What a convenience that they threw in there with the repeat function. 'Cause now I'm thinking about it. It's like you have a grid template and yeah, you could write 100 template columns in there if you wanted to. - It is just so convenient, yeah. - Or like grid auto columns which is essentially like grid repeat template. But then we have this function repeat which is somewhere in the middle. It's like I don't want to repeat my template pattern forever. I also don't wanna only do it. Anyway, it's what a convenience. They're so thoughtful. The CSS working group, I can't believe it. - Yeah, you can even use repeat with like min max. So you could like write like repeat min max and then give it like sizing inside of there. - So rad, so rad. The final functions, the final functions. That was just fun to sing. - It's the final functions. (humming) It's just media queries and supports. Anyway, okay, well, I just breezed right through like I didn't try to sing on a podcast. You know, so we've got the app media, media query and it's a function. It's a function and it has parameters. Well, it has parentheses and you pass things inside of there. And those are runtime contextual. So you have like a media query for min widths, whatever, right? And that's something that needs to be checked dynamically against the visiting system and the viewport size that it has. We have color gamut P3. So you can say media query. Hey, tell me dynamically at runtime does this device support color gamut P3? If it does, I want to go into hyper color space and show some really neat stuff. We also have at supports and at supports can take an expression where you test to see if something is supported or not. So I have a fun at supports example here, which is at supports open parentheses, color colon, color function, display P3. And then I have a like a color function inside of the color at supports. Anyway, just kind of fun. We have like functions inside of functions because that's how functional CSS is. It's very nimble that way. So that kind of covers like, hey, if you know of a CSS function that we did not just list, hit us up. We want to know. But before we end, we want to talk about hacking functions and that functions since they are so dynamic and they do things that maybe are less predictable or you're giving the developer and the user some power to integrate with the system. This is a lot like when you take input from a form and you submit it into the database. Anytime the user is contributing something into your system, which is supposed to be very private, your server is supposed to be this private space, it can be hacked. So since we can pass really, really robust things into these functions, they have to create spec entries and other things that prevent people from hacking and attacking your users through CSS. Did you know that CSS can attack people? It can steal data. So anyway, we're not going to go into that. I think we should do like a CSS hacking episode, but I did want to talk today about the billion laughs attack. And this is a custom property CSS attack. And essentially what happens is inside of you, you make a CSS custom property and you say, its value is this and its default is this. And you specify the default as the previous custom property. So essentially what you're doing is you're creating a recursive custom property expansion scenario where every new custom property references the previous one, which was already expanded to be bigger. So eventually you get a custom property that is full of so many other custom properties that it takes down the browser. And it's called a billion laughs because essentially you can create like a LOL text string and just repeat it until it reaches a billion. And I think this is an important one to talk about 'cause I think you reach a billion laughs in like 30 or 40 custom properties. So essentially this is a hack that you can hand write. It only takes you a minute or two to just sit down and hand write CSS custom properties that take the browser down. And it's called the billion laughs attack. So the browser had to add a limit. They had to add a limit. It's in the spec and it says, hey, a custom property needs to have a maximum and it's on you browser. You can decide how big of a string someone can put inside of a custom property. And so anyway, I encourage you all to go look at what your browser is your favorite and what is their limit that they have on what you can put inside of a custom property. So kind of interesting. There's also URL attacks and attribute-based attacks. So there's things where people can create a URL dynamically in CSS using the attribute function, append those values onto a URL and essentially like post data to their server from your CSS because CSS tried to fetch a request. It's tried to fetch something at a URL and it just subsequently made a request. So anyway, there's also cross-site scripting attacks that way too. So yeah, CSS, you're functional and now you can even be hacked like a real language. I had brought it back, I shouldn't have done that. But I had-- - I didn't know about these. - Any of them? - I didn't know about the URL attacks like other attribute attacks. I mean, that makes sense. I get those. The billion laughs attack. I don't even know why you would use that like what? This seems like a fun fact. But I did know about the visited security issues and that's why for the visited pseudo class, you can only style very limited set of properties because what visit does is it gives information to the website about where the user has been like on the page. And so you can use that information to like send malicious information, I guess through the URL attacks or attribute attacks. I don't know. - Seriously, yeah, through JavaScript. 'Cause yeah, visit is a good one too 'cause you can't get the computed color of a link. And they do that because JavaScript was being used to say, is it purple or blue? If it's purple, they've been there and let's stash the information we know about them. And yeah, good point. There's, ah, ah, creepy, but powerful, I guess. I don't know. - You gotta change the styling of your links, friends. - Yeah. So back to functions. I thought this was a really great show. It was very long and very full of content. We went very quickly over this. So if you need to get more information about any of these things, we will have links in the show notes for you. I definitely learned from getting an overview and then diving deep. So we hope that you can do that with all the functionality of CSS. - Yeah, you know the surface area of all the functions. And I think that should be helpful. And just as always, if you have any CSS questions, we would love to answer them on the show. Just tweet us. Hashtag, CSS podcast. - I'm @unionfitter, that's @una. - And I'm @argailink, a-r-g-y-o-e-i-n-k. And yeah, ping us. We want it. - If you like the show, please give us a review on whatever podcast app you're using. That's a great way to support us, your content creators, or share this with a friend. Those reviews and those shares help other people discover our show and help us have more time to deliver better content for you. - Thanks, y'all. Stay functional. - See you next time. (upbeat music)