In Part I ( https://adamcross.blog/2019/06/18/css-master-class-part-i/ ), we began developing a map of the CSS language, both in our heads and concretely here: https://atlas.mindmup.com/adamcross/css_mind_map_l2/index.html. It’s no longer good enough to have a haphazard collection of rules and properties in our minds. We need a broader understanding of how CSS is written and organized, and we need to know its boundaries. All of that lies somewhere in between a beginner’s grasp of the subject and fully memorizing the entire spec.
CSS has various functions built into the language. (See https://www.quackit.com/css/functions/ .) In general, they act like language primitives each having its own set of allowed inputs, and each having a valid CSS property value as its output. For example, there is a sepia function. Usage of sepia looks something like filter: sepia(100%), and this style is applied to an image. Either explicitly or implicitly, then, the value returned by the sepia function can be thought of as a valid value of the “filter” property.
Nothing in the spec or in the way people talk about CSS functions encourages us to look any more deeply at how they work. For our purposes, they are language primitives. Nobody even defines the word “function” anywhere in the spec as far as I can tell. They get added to the language explicitly in the specification. Then it’s up to browser engines to actually make them work.
From there, of course, we need to familiarize ourselves with the functions themselves—which ones are available, and what do they do? They can mostly be grouped into categories according to what style properties they can be used with, so I will add some of them to the CSS map that way now.
For styling images, then, we can apply a “filter” property, and for the value we can use any of a number of different functions including blur, sepia, opacity, grayscale. Does the “filter” property apply to anything but images? That’s worth looking into. It does seem possible to apply filters to other kinds of elements. I’m not sure why I might want to, but you can apply a “blur” effect to a paragraph of text. That’s interesting. Maybe later I’ll think of actual uses.
Let’s examine some other categories of functions.
The action of the “transform” property is entirely built into its functions, so the rather complicated behavior of these styles is configured by feeding a set of numbers into these functions in the proper order. There’s room for improvement there. It would be nice to have a syntax that assigned meaning to the numbers using keys instead of order. Maybe we can lobby for that later on.
Transform goes with functions like translateX and rotate. I’ll make a note of some of those on the map. Some are already there from before. I won’t list them all, but I’ll try to capture the scale of the subject.
A few functions exist for generating gradients: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.
Several functions exist for specifying geometric shapes, which can be used with clip-path and shape-outside.
Some functions are basically one-offs for specifying one particular property in a parameterized way. cubic-bezier is used to specify an easing function for transitions. The spec defines the url “function” as if it is just raw syntax—not a function, just the opening and closing delimiters used for a url.
The calc function can be used in many different settings, and it allows us to do computations even with mixed units, like with percents and pixels together in one expression.
There’s no shortcut for these things. To learn the functions of CSS, we will have to learn each of the functions, at least the ones that interest us. It’s not hard to find information about them and examples, so that shouldn’t be too hard. We will just have to practice. I for one might start learning how to write gradients using linear-gradient. Being able to use polygon shapes seems cool, but I can’t imagine actually needing that any time soon.
adamcross.blog 