Thread by @lihautan

Another week on #CSSpodcast, this weeks topic is CSS Functions 😍

🧵

CSS Functions provides runtime contextual expressions that return dynamic real-time value per the state of the browser per user in that moment

- global space, no need import
- can be nested, calc(var(--var))
- typed, eg: `rotate(45px)` will not work
- keep the function live, recompute on value changes and updates
- many of them are pure functions, however, counter-example: `counter()`

1️⃣ Color functions

- `rgb()`, `rgba()`, `hsl()`, `hsla()`, `lab()`, `lch()`
- `color()` w3.org/TR/css-color-4…

✨ newer browser supports comma-less notation (css-tricks.com/no-comma-color…)

2️⃣ Gradient functions

- `linear-gradient()`, `repeating-linear-gradient()`
top -> bottom
- `radiant-gradient()`, `repeating-radiant-gradient()`
center -> outer
- `conic-gradient()` and `repeating-conical-gradient()`
clockwise

3️⃣ `attr()`

- allow you to read value from attribute of the element you are targeting

4️⃣ `var()`

- allow you to insert value of the CSS Custom Property

5️⃣ `url()`

- use for fetching assets

6️⃣ `image-set()`

- grab image based on resolution

7️⃣ Functional Selectors

- `:is()`, `:where()` `:not()`, `:lang()`, `:dir()`,
- `nth-child()`, `nth-last-child()`, `nth-of-type()`, `nth-last-of-type()`

https://twitter.com/lihautan/status/1278189274114842624?s=20

8️⃣ Mathematical Functions

- `calc()`, `min()`, `max()`, `clamp()`

9️⃣ Trigonometry Functions

- `sin()`, `cos()`, `acos()`, `asin()`, `atan()`, `atan2()`, `sqrt()`, `hypot()`, `pow()`

1️⃣0️⃣ `cubic-bezier()`

🎥 check out @wgao19 's talk at engineers.sg/video/the-obsc… explaining bezier

1️⃣1️⃣ `steps()`

- divide the output value into equal distance steps.
- useful for animating sprites

1️⃣2️⃣ Shape Functions

- `path()`, `circle()`, `ellipse()`, `polygon()`, `inset()`

1️⃣3️⃣ Transform Functions

- scaleX(), scaleY(), scaleZ(), scale(), scale3d()
- perspective()
- translateX(), translateY(), translateZ(), translate(), translate3d()
- rotateX(), rotateY(), rotateZ(), rotate(), rotate3d()
- skewX(), skewY(), skew()

1️⃣4️⃣ Filter Functions

- blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), url()

1️⃣5️⃣ Grid Template Functions

- `fit-content()`, `min-max()`, `repeat()`

1️⃣6️⃣ Media Queries

- `media`, `supports`

1️⃣7️⃣ Vulnerabilities

- Billion Laughs Attack (drafts.csswg.org/css-variables/…)
- XSS through `url()` + `attr()` (didnt' quite understand, probably @argyleink can explain further on this)