CSS Almanac → Functions
This is a work in progress — and we could use your help! Learn about writing for CSS-Tricks and how to contribute to the CSS Almanac.
anchor()
Experimental feature
The CSS anchor() function takes an anchor element’s side and resolves to the <length> where it is positioned. It can […]anchor().target { top: anchor(--my-anchor bottom); }anchor-size()
Experimental feature
The CSS anchor-size() function takes an anchor element and resolves to its width or height <length>, essentially returning an anchor’s […]anchor-size().target { width: anchor-size(width); }attr()
The CSS attr()attr() function enables you to pass the value of an HTML attribute over to CSS. .element { color: attr(data-color type()); } calc-size()
Experimental feature
The CSS calc-size() function enables us to perform calculations using intrinsic size values such as auto, min-content, max-content, and fit-content. […]calc-size().element { width: calc-size(auto, size); }clamp()
The CSS clamp() function locks a value between a minimum and maximum, using a preferred value within that range.clamp().element { width: clamp(200px, 50%, 800px); }counter()
The counter()counter() function takes the number (or symbol) of a list item and makes it available to display outside the list. In other words, it makes things that aren't lists look like lists. For example, we can take the current list number of an existing list counter, format it as a Roman numeral, then display it in front of a heading:h2::before { content: counter(my-counter, upper-roman) ". "; }counters()
The CSS counters()counters() function can combine multiple lists into a single list. So, if you have two active counters on the page, counters() can be used to combine them so that the list numbers are used to count the items in both lists together.li::marker { content: counters(item, ".") ") "; }hsl()
The CSS hsl() function represents color in the sRGB color space and displays it according to its hue, saturation, and lightness. We […]hsl().element { color: hsl(90deg, 50%, 50%); }lab()
The lab() color function represents colors in the CIELAB color space. It displays them according to their lightness, red/green axis position, blue/yellow axis position, and an optional alpha transparency value.lab().element { color: lab(50% 50% 50% / 0.5); }lch()
The lch()lch() color function specifies colors in the CIELAB color space. Unlike the lab() function — which uses Cartesian coordinates — the lch() function uses polar coordinates to set color in terms of its hue and chroma, which is generally more intuitive..element { color: lch(10% 0.215 15deg); }light-dark()
The CSS light-dark() function takes two color values — one for “light” mode and one for “dark” mode — and […]light-dark()html { color: light-dark(#000, #fff); }mod()
The CSS mod() function returns the remaining “modulo” after the first argument is modulus-divided by the second argument. It’s the […]mod().element { width: mod(10px, 4px); }oklab()
The oklab() function represents colors in the OKLab color space. OKLab is an “OK” and even better version of the lab color […]oklab().element { color: oklab(25.77% 25.77% 54.88%; }oklch()
The CSS oklch()oklch() function specifies colors with three components — Lightness (L), Chroma (C), and Hue (H) — offering a perceptually uniform system, which is a fancy way of saying that it is closely aligned with how humans perceive color..element { color: oklch(70% 0.15 240); }random()
Experimental feature
The random() function in CSS is an experimental feature (i.e., not supported in any browser) that returns a random numeric […]random().element { width: random(5rem, 25rem, by 5rem); }rem()
The CSS rem()rem() function (also called the “remainder” function) returns the amount left over after the first argument’s integer is divided by the second argument..element { width: rem(10px, 4px); }rgb()
The CSS rgb() color function represents color in the sRGB color space specifying their redness (r), greenness (g), and blueness (b), and an optional transparency value.rgb().element { color: rgb(0 0 0 / 0.5); }round()
The CSS round() function enables us to round a number, percentage, or dimension (i.e., a number with units attached). We’ve been able to round using […]round().element { width: round(10.4px, 1px); }symbols()
Defines an only-use counter style without the need to do a whole @counter-style, at the cost of missing some features.symbols()ul { list-style: symbols(cyclic "🥬"); }