🌱 CSS Properties

Course taught by Lea Verou.

CSS variables are called CSS properties.

You can define fallbacks when setting variables.

A whitespace character can be a default. You can use this to toggle initial for a value.

You cannot spilt a length back into a number. You can add a unit to a number by multiplying by 1px 1rem 1% etc.

You can map values to other ranges using calc. It is best to expose 0 - 1 ranges without units so that you can map them as necessary inside css.

0 - 1 Range mapping

property: calc(var(--p) * min + calc(1 - var(--p)) * max);

--if-not-foo: calc(1 - var(--if-foo));

property: calc(var(--if-foo) * value_if_true + var(--if-not-foo) * value_if_false);

Reusable pointer coordinates

let root = document.documentElement

document.addEventListener('pointermove', (evt) => {
  let x = evt.clientX / innerWidth
  let y = evt.clientY / innerHeight

  root.style.setProperty('--mouse-x', x)
  root.style.setProperty('--mouse-y', y)
})

Look into Ana Tudor’s work for more crazy CSS calc magic https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/

css