Le CSS a évolué pour devenir un outil puissant avec de nombreuses fonctions intégrées qui améliorent la conception et la réactivité. Ce guide explore les fonctions CSS les plus courantes, en détaillant leurs fonctionnalités et leurs utilisations.

Fonctions de base

attr()

La fonction attr() récupère la valeur d'un attribut HTML d'un élément sélectionné pour l'utiliser dans les styles. Elle fonctionne également avec les pseudo-éléments, où elle accède aux attributs de l'élément parent. Par exemple, pour définir la couleur de fond à partir d'un attribut personnalisé :

.container {
  background: attr(data-bg);
}

Si l'élément a un attribut data-bg, sa valeur est utilisée comme couleur de fond. Notez que attr() retourne toujours une chaîne, donc la valeur doit être valide pour l'attribut CSS concerné.

counter() et counters()

Ces fonctions gèrent les compteurs CSS pour la numérotation. counter() obtient la valeur actuelle d'un compteur nommé, souvent utilisé avec des pseudo-éléments :

.item::before {
  content: counter(nom-compteur);
}

counters() gère les compteurs imbriqués, les reliant avec un séparateur :

.liste::before {
  content: counters(nom-compteur, " ");
}

Pour que les compteurs fonctionnent, initialisez-les avec counter-reset et incrémentez-les avec counter-increment.

url()

La fonction url() référence des ressources externes comme des images ou des polices. Son utilisation est courante dans plusieurs propriétés CSS :

body {
  background-image: url('chemin/image.jpg');
}

@font-face {
  font-family: 'PolicePerso';
  src: url('police.woff2') format('woff2');
}

Les URL peuvent être absolues ou relatives. Les navigateurs téléchargent et mettent en cache ces ressources.

var()

La fonction var() accède aux propriétés personnalisées CSS (variables). Les variables sont déclarées avec -- et peuvent être utilisées globalement ou localement :

:root {
  --couleur-principale: bleu;
}

.element {
  color: var(--couleur-principale, rouge);
}

Un second paramètre optionnel fournit une valeur de repli si la variable n'est pas définie. Les variables facilitent la maintenance et les mises à jour dynamiques via JavaScript.

element()

La fonction element() utilise un élément HTML comme image de fond. Elle prend un identifiant d'élément :

#arriere-plan {
  background-image: element(#source);
}

Ici, l'élément avec l'ID #source est rendu comme fond pour #arriere-plan.

image-set()

La fonction image-set() fournit différentes résolutions d'images selon la densité de pixels de l'appareil :

.image-adaptative {
  background-image: image-set(
    url('img-320w.jpg') 1x,
    url('img-640w.jpg') 2x
  );
}

Le navigateur sélectionne l'image appropriée, garantissant une netteté optimale sur les écrans variés.

Fonctions de couleur

rgb() et rgba()

rgb() définit une couleur avec les composantes rouge, verte et bleue (0-255). rgba() ajoute un paramètre alpha pour la transparence (0-1) :

texte {
  color: rgba(255, 0, 0, 0.7);
}

hsl() et hsla()

Ces fonctions utilisent le modèle teinte, saturation, luminosité. hsla() inclut la transparence :

fond {
  background-color: hsla(120, 100%, 50%, 0.5);
}

hwb()

La fonction hwb() base sur la teinte, la blancheur et la noirceur :

bordure {
  border-color: hwb(0, 20%, 30%);
}

lab() et lch()

lab() utilise l'espace CIELAB (luminosité, composantes a et b), tendis que lch() utilise luminosité, chroma et teinte. Ces fonctions offrent une perception des couleurs plus proche de l'œil humain, mais le support navigateur peut être limité.

device-cmyk()

Pour les impressions, device-cmyk() spécifie des couleurs en cyan, magenta, jaune et noir :

impression {
  color: device-cmyk(50%, 75%, 25%, 10%);
}

color-mix()

La fonction color-mix() mélange deux couleurs dans un espace colorimétrique donné :

degrade {
  background-color: color-mix(in srgb, 60%, vert);
}

Cela crée une couleur mixte avec 60% de vert et 40% de l'autre couleur (spécifiée ou implicite).

oklab()

Introduit dans le CSS Color Module Level 4, oklab() utilise l'espace OKLab pour une uniformité perceptive :

texte-alternatif {
  color: oklab(0.6 0.2 0.3);
}

Fonctions de filtre

blur()

Applique un flou à un élément. La valeur est en pixels, pourcentages ou unités relatives :

.image-floue {
  filter: blur(8px);
}

Pour la compatibilité, ajoutez parfois le préfixe -webkit-. Les performances peuvent être effectées sur les appareils mobiles.

brightness(), contrast(), saturate()

Ces fonctions ajustent respectivement la luminosité, le contraste et la saturation. Elles prennent un multiplicateur ou un pourcentage :

.effet-visual {
  filter: brightness(0.8) contrast(1.2) saturate(150%);
}

sepia() et grayscale()

sepia() convertit les couleurs en tons sépia, et grayscale() en niveaux de gris. Les paramètres contrôlent l'intensité :

.vintage {
  filter: sepia(80%);
}

.mono {
  filter: grayscale(100%);
}

invert()

Inverse les couleurs de l'élément, créant un effet négatif :

.inverse {
  filter: invert(1);
}

drop-shadow()

Ajoute une ombre portée à l'élément, similaire à box-shadow mais appliquée via filtre :

.ombre-floue {
  filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.4));
}

hue-rotate()

Rotation de la teinte des couleurs d'un angle spécifié :

.teinte-modifiee {
  filter: hue-rotate(120deg);
}

Fonctions de dégradé

linear-gradient() et repeating-linear-gradient()

Créent des dégradés linéaires. repeating-linear-gradient() répète le motif :

.fond-degrade {
  background: linear-gradient(to right, rouge, bleu);
}

.fond-repetitif {
  background: repeating-linear-gradient(45deg, vert, jaune 10px);
}

radial-gradient() et repeating-radial-gradient()

Créent des dégradés radiaux à partir d'un point central :

.cercle-degrade {
  background: radial-gradient(circle, orange, violet);
}

conic-gradient() et repeating-conic-gradient()

Créent des dégradés coniques, utiles pour des effets comme des diagrammes circulaires :

.degrade-conique {
  background: conic-gradient(rouge 0%, bleu 100%);
}

Fonctions mathématiques

calc()

Permet des calculs dans les valeurs CSS, combinant unités différentes :

.taille-dynamique {
  width: calc(100% - 2 * 20px);
}

Les opérateurs doivent avoir des espaces autour d'eux. Peut être combiné avec d'autres fonctions comme min() ou max().

min() et max()

min() retourne la plus petite valeur parmi ses arguments, et max() la plus grande :

.taille-limitee {
  height: min(50vh, 300px);
  width: max(200px, 30%);
}

clamp()

Contraint une valeur entre un minimum et un maximum :

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

Ici, la taille de police s'adapte à la largeur de la fenêtre, mais reste entre 1rem et 2.5rem.

Fonctions graphiques

circle(), ellipse()

Définissent des formes pour le contour ou le découpage. Par exemple, pour un découpage circulaire :

.avatar {
  clip-path: circle(50% at center);
}

ellipse() permet des ovales avec deux rayons.

inset()

Crée une zone de découpage rectangulaire avec des bords arrondis optionnels :

.carte {
  clip-path: inset(10px round 5px);
}

polygon() et path()

polygon() définit une forme polygonale par des points, et path() utilise des données SVG :

.etoile {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.forme-complexe {
  clip-path: path('M0,0 L1,0 L1,1 Z');
}

Fonctions de transformation

scale(), scaleX(), scaleY(), scaleZ(), scale3d()

Modifient la taille des éléments. Par exemple :

.agrandi {
  transform: scale(1.2);
}

.plate {
  transform: scaleY(0.8);
}

rotate(), rotateX(), rotateY(), rotateZ(), rotate3d()

Effectuent des rotations en 2D ou 3D :

.tourne {
  transform: rotate(45deg);
}

.rotation-3d {
  transform: rotate3d(1, 1, 0, 30deg);
}

translate(), translateX(), translateY(), translateZ(), translate3d()

Déplacent les éléments dans l'espace :

.deplace {
  transform: translate(50px, -20px);
}

.avant-plan {
  transform: translateZ(100px);
}

skew(), skewX(), skewY()

Appliquent une inclinaison :

.incliner {
  transform: skewX(15deg);
}

perspective()

Définit la profondeur pour les transformations 3D :

.scene {
  perspective: 800px;
}

.objet-3d {
  transform: rotateY(60deg);
}

Appliquez-la au conteneur pour un effet cohérent sur les enfants.

matrix() et matrix3d()

Permettent des transformations complexes via des matrices. matrix() utilise six valeurs pour les transformations 2D, et matrix3d() seize pour les 3D. Elles offrent un contrôle précis mais sont plus complexes.

Fonctions de mise en page

fit-content()

Ajuste la taille d'un élément selon son contenu, avec une limite maximale :

.grille-adaptative {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, fit-content(100%)));
}

minmax()

Définit une plage de tailles pour les éléments de grille CSS :

.grille-flexible {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

repeat()

Répète des motifs dans les grilles ou les flexbox :

.grille-repetee {
  grid-template-columns: repeat(auto-fill, 100px);
}

Utilisez auto-fill ou auto-fit pour la réactivité.

Fonctions d'animation

cubic-bezier()

Définit une courbe de vitesse personnalisée pour les transitions ou animations :

.transition-fluide {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Les quatre valeurs contrôlent la forme de la courbe de Bézier.

steps()

Crée des transitions par étapes plutôt que fluides :

.animation-passee {
  animation: clignoter 2s steps(4, end) infinite;
}

@keyframes clignoter {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

Cela divise l'animation en quatre étapes abruptes.