Fonctions CSS expliquées

62 of 62 rows


Tailles et mathématiques
	Le résultat d'une expression arithmétique, avec des unités mixtes.	width: calc(100% - 2rem);
	La plus petite des valeurs données.	width: min(100%, 60ch);
	La plus grande des valeurs données.	width: max(320px, 40vw);
	Une valeur bornée entre un minimum, une valeur préférée et un maximum.	font-size: clamp(1rem, 2vw, 1.5rem);
	Lit une variable d'environnement fournie par l'agent utilisateur.	padding: env(safe-area-inset-top);
	Une taille bornée à la largeur intrinsèque du contenu.	width: fit-content(200px);
	Arrondit une valeur au multiple le plus proche d'une autre.	width: round(up, 133px, 50px);
	Le reste positif d'une division, toujours non négatif.	margin: mod(100px, 30px);
	Le reste d'une division, conserve le signe du dividende.	margin: rem(-100px, 30px);
	La valeur absolue.	translateX(abs(-10px));
	-1, 0 ou 1, selon le signe de la valeur.	padding: sign(-5px) * 10px;
Grid
	Une plage de taille pour les pistes de grid, entre un minimum et un maximum.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Répète un motif de pistes un nombre de fois ou jusqu'à remplissage.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logique et conditions
	Choisit l'une de deux valeurs selon une condition.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Vrai lorsqu'une media query correspond, à utiliser dans if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Vrai lorsque le navigateur prend en charge une déclaration, à utiliser dans if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Vrai lorsque le sélecteur correspond, à utiliser dans if().	font-weight: if(selector(:hover), 700, 400);
Propriétés personnalisées
	La valeur d'une propriété personnalisée, avec une valeur de repli facultative.	color: var(--accent, #333);
Couleur
	Une couleur à partir des canaux rouge, vert, bleu (et alpha).	color: rgb(59 130 246 / 0.8);
	Une couleur à partir de la teinte, de la saturation et de la luminosité.	color: hsl(210 80% 50%);
	Une couleur dans l'espace perceptuel OKLCH (luminosité cohérente).	color: oklch(0.7 0.15 250);
	Un mélange de deux couleurs dans un espace colorimétrique donné.	color: color-mix(in srgb, red 40%, blue);
	L'option d'une liste qui contraste le mieux avec une couleur de base.	color: color-contrast(#fff vs #000, #777);
	Une couleur à partir de la teinte, de la blancheur et de la noirceur.	color: hwb(210 10% 20%);
	Une couleur dans l'espace CIELAB (luminosité, axes a et b).	color: lab(52% 40 59);
	Une couleur dans l'espace CIELAB (luminosité, chroma, teinte).	color: lch(52% 49 24);
	Une couleur dans n'importe quel espace colorimétrique prédéfini, par coordonnées.	color: color(display-p3 1 0.4 0.2);
	La première couleur en schéma clair, la seconde en schéma sombre.	color: light-dark(#1a1a1a, #f5f5f5);
Dégradés et images
	Un dégradé le long d'une ligne droite entre des points d'arrêt de couleur.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Un dégradé qui irradie vers l'extérieur depuis un point.	background: radial-gradient(circle, #fff, #000);
	Un dégradé qui balaie autour d'un point central.	background: conic-gradient(red, yellow, red);
	Charge une ressource externe : image, police ou SVG.	background-image: url(hero.webp);
	Choisit la meilleure image pour la résolution de l'appareil.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Fond deux images selon un pourcentage donné.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtres et formes
	Filtres de pixels utilisés dans la propriété filter.	filter: blur(4px) brightness(1.1);
	Une chaîne de trajet SVG, pour dessiner un masque ou une forme.	clip-path: path('M10 10 H 90 V 90 Z');
	Lit un attribut HTML ; usage limité en dehors de content.	content: attr(data-label);
	Ajuste le contraste de l'élément.	filter: contrast(1.4);
	Peint une ombre qui suit la forme alpha de l'élément.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Convertit l'élément en niveaux de gris.	filter: grayscale(100%);
	Inverse les couleurs de l'élément.	filter: invert(1);
	Applique une teinte sépia.	filter: sepia(0.6);
	Fait pivoter la teinte des couleurs de l'élément.	filter: hue-rotate(90deg);
	Définit l'opacité de l'élément via filter.	filter: opacity(0.5);
	Une forme de cercle pour clip-path ou shape-outside.	clip-path: circle(40% at 50% 50%);
	Une forme d'ellipse pour clip-path ou shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Une forme de rectangle arrondi pour clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Une forme de polygone à partir d'une liste de points.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transformation
	Déplace l'élément le long de X et Y.	transform: translate(10px, 20px);
	Fait pivoter l'élément autour de son centre.	transform: rotate(45deg);
	Met l'élément à l'échelle le long de X et Y.	transform: scale(1.25);
	Incline l'élément le long de X et Y.	transform: skew(10deg, 0deg);
	Une transformation 2D à partir de six valeurs de matrice.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Définit une profondeur de perspective 3D pour les enfants de l'élément.	transform: perspective(600px) rotateY(20deg);
Animation et compteurs
	Une courbe d'easing à partir de quatre points de contrôle.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Un easing qui avance par sauts égaux.	animation-timing-function: steps(8, end);
	La valeur actuelle d'un compteur CSS, comme contenu.	content: counter(chapter);
	Les valeurs d'un compteur et de tous ses ancêtres, jointes par une chaîne.	content: counters(item, ".");
	De 0 à 1 à mesure qu'une valeur progresse entre un début et une fin.	opacity: progress(scroll(), 0, 50vh);
	Un nombre aléatoire dans une plage, fixé par élément.	rotate: random(from -5deg to 5deg);
	Le sinus d'un angle, pour les expressions calc.	translateY(calc(1rem * sin(45deg)));
	Le cosinus d'un angle, pour les expressions calc.	translateX(calc(1rem * cos(45deg)));