Notes from Kevin Powell's Youtube Channel

Improve your CSS by taking HSL and Custom Props to the next level

Aug 24, 2021

Custom properties are just text replacement, so you can use and fragment of a property, e.g.

:root {
    --hue: 204;
    --saturation: 100%;
    --lighntess: 30%;
}

.card {
    background: hsl(var(--hue) var(--saturation) var(--lightness) / 0.9)
}

New color syntax (no commas, slash): hsl(204 100% 30% / 0.9)

Custom properties are cascaded like all properties.

[min(), max(), and clamp() are CSS magic!}()https://www.youtube.com/watch?v=U9VF-4euyRo

You can use expressions in min(), max(), clamp() without calc():

width; min(500px + 20%, 1000px)

clamp(min, ideal, max)

Give your site a fantastic color scheme fast

Nov 29, 2019

calc() lets you do some real CSS magic

Mar 20, 2019

width: calc(100vw - 2em);

width: margin: 0 calc(-50vw + 50%);

font-size: calc(5vw + 1rem);

Create nice gradients without worrying about the specific color values

Nov 23, 2018