Fonctions CSS

Taille fluide

Limiter une valeur entre min et max

CSS

.title {
    font-size: clamp(1rem, 2vw, 2rem);
}

Autre clamp

CSS

.box {
    width: clamp(200px, 50vw, 800px);
}

Variantes possibles : clamp(min, preferred, max).

Min / Max

Choisir la plus petite valeur

CSS

.panel {
    width: min(100%, 600px);
}

Choisir la plus grande valeur

CSS

.hero {
    height: max(50vh, 300px);
}

Variantes possibles : min(), max().

Calculs

Combiner plusieurs unités

CSS

.box {
    width: calc(100% - 2rem);
}

Autre calc

CSS

.box {
    height: calc(50vh + 100px);
}

Variantes possibles : +, -, *, /.

Trigonométrie

Rotation trigonométrique

CSS

.rotate {
    transform: rotate(sin(45deg) * 1turn);
}

Translation trigonométrique

CSS

.move {
    transform: translateX(cos(30deg) * 50px);
}

Variantes possibles : sin, cos, tan, asin, acos, atan.

Modulo

Reste d’une division

CSS

.pattern {
    width: calc(100px % 30);
}

Autre modulo

CSS

.pattern {
    height: calc(200px % 40);
}

Variantes possibles : % dans calc().

Arrondis

Arrondir à un multiple

CSS

.round {
    width: round(33.33px, 10px);
}

Autre arrondi

CSS

.round {
    width: round(5.5rem, 1rem);
}

Variantes possibles : round(valeur, multiple).

Signe

Obtenir -1, 0 ou 1

CSS

.sg {
    margin-left: calc(sign(-20px) * 10px);
}

Autre sign

CSS

.sg {
    margin-left: calc(sign(50px) * 5px);
}

Variantes possibles : sign().

Hypoténuse

Calculer hypot(a, b)

CSS

.hyp {
    width: hypot(3px, 4px);
}

Autre hypot

CSS

.hyp {
    height: hypot(10px, 10px);
}

Variantes possibles : hypot(a, b).

Puissance

Élever une valeur

CSS

.pow {
    width: pow(2, 3);
}

Autre pow

CSS

.pow {
    width: pow(4, 2);
}

Variantes possibles : pow(base, exp).

Racine carrée

sqrt()

CSS

.sq {
    width: sqrt(49px);
}

Autre sqrt

CSS

.sq {
    width: sqrt(100px);
}

Variantes possibles : sqrt(valeur).

Couleurs

Couleur en oklch

CSS

.txt {
    color: oklch(60% 0.15 240);
}

Mélange de couleurs

CSS

.mix { 
    color: color-mix(in oklch, red 40%, blue);
}

Variantes possibles : rgba, rgb, hsl, oklch, color-mix.

Images

Image responsive

CSS

.img {
    background-image: image-set(
        "img-400.webp" 1x,
        "img-800.webp" 2x
    );
}

Dégradé

CSS

.grad {
    background: linear-gradient(90deg, #111, #444);
}

Variantes possibles : linear, radial, conic.

Attr

Afficher une valeur HTML

HTML

<div class="tag" data-label="Nouveau"></div>

CSS

.tag::after {
    content: attr(data-label);
}

Autre attr

HTML

<button class="btn" data-count="1"></button>

CSS

.btn::after {
    content: attr(data-count);
}

Variantes possibles : attr() dans content.